Criar fatias nas páginas da Web

As fatias dividem uma imagem em imagens menores que são recompostas em uma página da Web usando uma tabela HTML ou camadas CSS. Dividindo a imagem, é possível atribuir diferentes links de URL para criar uma navegação de página ou otimizar cada parte de uma imagem usando suas próprias configurações de otimização.

Uma imagem em fatias é exportada e otimizada usando o comando Salvar para a Web. O Photoshop salva cada fatia como um arquivo separado e gera os códigos HTML ou CSS necessários para exibir a imagem em fatias.

Ao trabalhar com fatias, lembre-se destas noções básicas:

• É possível criar uma fatia usando a ferramenta Fatia ou criando fatias com base em camadas.

• Após criar uma fatia, você pode selecioná-la usando a ferramenta Seleção de Fatia  e, em seguida, mover, redimensionar ou alinhar essa fatia a outras fatias.

• É possível definir opções para cada fatia, como tipo de fatia, nome e URL, na caixa de diálogo Opções da Fatia.

• É possível otimizar cada fatia usando diferentes configurações de otimização na caixa de diálogo Salvar para a Web.

As fatias são categorizadas de acordo com o tipo de conteúdo (Tabela, Imagem, Sem Imagem) e pela maneira pela qual são criadas (usuário, baseada em camada, automática).

As fatias criadas com a ferramenta Fatia são chamadas fatias do usuário; as fatias criadas a partir de uma camada são chamadas fatias com base em camadas. Ao criar uma nova fatia do usuário ou uma nova fatia com base em camadas, são geradas fatias automáticas adicionais para as demais áreas da imagem. Em outras palavras, as fatias automáticas preenchem o espaço da imagem que não está definido por fatias do usuário nem por fatias com base em camadas. As fatias automáticas são regeneradas sempre que fatias do usuário ou fatias com base em camadas são adicionadas ou editadas. É possível converter fatias automáticas em fatias do usuário.

Fatias do usuário, fatias com base em camadas e fatias automáticas têm aparências diferentes: as duas primeiras são definidas por uma linha sólida, e as fatias automáticas são definidas por uma linha pontilhada. Além disso, as fatias do usuário e as fatias com base em camadas exibem ícones diferentes. Opte por mostrar ou ocultar camadas automáticas, o que pode facilitar a visualização ao trabalhar com fatias do usuário ou fatias com base em camadas.

Uma fatia secundária é um tipo de fatia automática gerada quando são criadas fatias sobrepostas. As fatias secundárias indicam como a imagem será dividida quando o arquivo otimizado for salvo. Embora as fatias secundárias sejam numeradas e exibam um símbolo de fatia, não é possível selecioná-las nem editá-las separadamente da fatia subjacente. As fatias secundárias são regeneradas sempre que a ordem de empilhamento das fatias é organizada.

As fatias são criadas usando métodos diferentes:

• Fatias automáticas são geradas automaticamente.

• Fatias do usuário são criadas com a ferramenta Fatia.

• Fatias com base em camadas são criadas com o painel Camadas.

fCriação de fatias em uma página da Web

Você pode usar a ferramenta fatia para desenhar linhas de fatia diretamente em uma imagem ou desenhar seu gráfico usando camadas e criando fatias com base nas camadas.

Criar fatias com a ferramenta Fatia

Criação de fatias a partir das guias

Criação de uma fatia a partir de uma camada

Uma fatia baseada em camada contém todos os dados de pixels na camada. Se você mover a camada ou editar seu conteúdo, a área da fatia se ajustará automaticamente para incluir os novos pixels.

As fatias com base em camadas são menos flexíveis que as fatias do usuário; no entanto, é possível converter ("forçar") uma fatia com base em camadas em uma fatia do usuário. Consulte Conversão de fatias automáticas e fatias com base em camadas em fatias do usuário.

Conversão de fatias automáticas e fatias com base em camadas em fatias do usuário

Uma fatia com base em camadas está vinculada ao conteúdo de pixels de uma camada, portanto a única maneira de mover, combinar, dividir, redimensionar e alinhar essa fatia é editar a camada, a menos que você a converta em uma fatia do usuário.

Todas as fatias automáticas em uma imagem estão vinculadas e compartilham as mesmas configurações de otimização. Se quiser definir diferentes configurações de otimização para uma fatia automática, é necessário forçá-la para uma fatia do usuário.

Visualização de fatias e opções de fatia

É possível visualizar fatias no Photoshop e na caixa de diálogo Salvar para a Web. As características a seguir podem ajudá-lo a identificar e diferenciar fatias:

Definem os limites da fatia. Linhas sólidas indicam que é uma fatia do usuário ou fatia com base em camadas, enquanto linhas pontilhadas indicam que é uma fatia automática.

Diferenciam as fatias do usuário e fatias com base em camadas das fatias automáticas. Por padrão, as fatias do usuário e as fatias com base em camadas têm símbolos azuis, enquanto as fatias automáticas têm símbolos cinzas.

Além disso, a caixa de diálogo Salvar para a Web utiliza ajustes de cor para reduzir o brilho das fatias não selecionadas. Esses ajustes são para fins de exibição apenas e não afetam a cor da imagem final. Por padrão, o ajuste de cores para fatias automáticas é duas vezes o valor do ajuste para fatias do usuário.

As fatias são numeradas  da esquerda para a direita e do alto para baixo, começando a partir do canto superior esquerdo da imagem. Se a organização ou o número total de fatias for alterado, os números de fatias serão atualizados para refletir a nova ordem.

Os seguintes símbolos, ou ícones, indicam determinadas condições.

A fatia do usuário tem conteúdo da Imagem.

A fatia do usuário não tem conteúdo da Imagem.

A fatia é baseada em camada.

Como mostrar ou ocultar limites das fatias

Como mostrar ou ocultar fatias automáticas

Como mostrar ou ocultar números das fatias

Alteração da cor das linhas das fatias