Visão geral das fatias.

Ao criar elementos gráficos para a web, diferentes partes de uma imagem geralmente precisam se comportar de forma independente. Uma área pode vincular a uma URL, outra pode carregar mais rápido e outra pode precisar de diferentes configurações de aprimoramento.As fatias dividem uma única imagem em uma grade de partes menores que funcionam juntas como uma página da Web, mantendo cada uma com controle sobre cada seção.

O Photoshop recompõe imagens fatiadas em páginas da web usando tabelas HTML ou camadas CSS. Ao exportar uma imagem fatiada com o comando Arquivo > Exportar > Salvar para Web, o Photoshop salva cada fatia como um arquivo separado.Ele também gera o HTML ou CSS necessário para exibir a imagem como uma única composição em um navegador.

Como as fatias funcionam.

As fatias dividem uma imagem ao longo de linhas de grade invisíveis, criando seções retangulares que funcionam como arquivos independentes. Cada fatia mantém sua posição no layout geral enquanto opera como um elemento separado, com as próprias propriedades, configurações de aprimoramento e comportamentos.

Esta abordagem oferece algumas vantagens práticas:

• Atribuir diferentes links de URL para criar elementos de navegação clicáveis
• Aplicar diferentes Configurações de compactação para equilibrar qualidade e tamanho do arquivo entre as áreas
• Atualizar seções individuais sem reexportar a composição inteira

Tipo de fatia por criação.

Photoshop categoriza as fatias com base em como são criadas, e cada tipo se comporta de maneira diferente conforme você edita a imagem.

• Fatias do usuário: seções definidas manualmente com a Ferramenta Fatia ferramenta{6} Você tem controle total sobre tamanho, posição e propriedades delas, e elas permanecem no lugar até serem movidas ou modificadas.
• Fatias baseadas em camada: As fatias incluem todos os pixels de uma camada.Os limites delas são atualizados automaticamente quando você move ou edita a camada.Elas funcionam bem para conteúdo que muda com frequência, mas oferecem menos controle sobre o posicionamento preciso do que as fatias do usuário.
• Fatias automáticas: fatias que preenchem o espaço restante em uma imagem não coberto por fatias do usuário ou fatias baseadas em camada. O Photoshop gera essas fatias automaticamente e as regenera sempre que você adiciona, remove ou modifica outras fatias. Todas as fatias automáticas em uma imagem compartilham as mesmas configurações de aprimoramento.
• Subfatias: um tipo especializado de fatia automática que aparece quando as fatias se sobrepõem. As subfatias mostram como o Photoshop divide as áreas sobrepostas quando você salva o arquivo otimizado. Não é possível selecionar ou editar subfatias independentemente das fatias subjacentes.

Tipo de fatia por conteúdo.

As fatias também são classificadas pelo tipo de conteúdo que contêm.

• Fatias de imagem: o tipo de fatia padrão para conteúdo visual, que contém dados de imagem do documento do Photoshop.
• Fatias sem imagem: células de tabela em branco para texto em HTML ou cores sólidas. O Photoshop não exporta essas fatias como arquivos de imagem, o que as torna úteis para texto dinâmico e selecionável.
• Fatias de tabela: fatias que definem como o Photoshop estrutura a tabela HTML usada para remontar uma imagem fatiada em um navegador.

Indicações visuais de fatia.

O Photoshop usa indicações visuais para ajudar a diferenciar os tipos de fatia durante o trabalho.

• Linhas de fatia: linhas sólidas marcam fatias do usuário ou fatias baseadas em camada, e linhas pontilhadas marcam fatias automáticas.
• Cores de fatia: símbolos azuis identificam fatias do usuário e fatias baseadas em camada, e símbolos cinza marcam fatias automáticas.
• Números de fatia: os números no canto superior esquerdo de cada fatia seguem da esquerda para a direita e de cima para baixo, e são atualizados automaticamente quando você reorganiza ou modifica as fatias.
• Emblemas de fatia: ícones pequenos identificam o conteúdo e o tipo da fatia. Por exemplo, um ícone de imagem marca uma fatia do usuário com conteúdo de imagem, um ícone de imagem cortado marca uma fatia do usuário sem conteúdo de imagem, e um ícone de camada marca uma fatia baseada em camada.

Reconhecer essas diferenças visuais ajuda a identificar rapidamente os tipos de fatia e trabalhar com mais eficiência em layouts de fatia complexos ao fatiar páginas da Web.