Guia do Usuário Cancelar

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.

Página da Web do Photoshop dividida em fatias
Página da Web dividida 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.

Tipos de fatia

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

  1. Selecione a ferramenta Fatia  . (Pressione a tecla C para navegar entre as ferramentas também agrupadas por Recorte.)

    As fatias existentes serão exibidas automaticamente na janela do documento.

  2. Na barra de opções, escolha uma configuração de estilo:

    Normal

    Determina as proporções da fatia à medida que você arrasta.

    Proporção Fixa

    Define uma proporção entre altura e largura. Insira números inteiros ou números decimais para a proporção. Por exemplo, para criar uma fatia com largura duas vezes maior que a altura, insira 2 para largura e 1 para altura.

    Tamanho Fixo

    Especifica a altura e a largura da fatia. Insira valores de pixel em números inteiros.

  3. Arraste sobre a área em que deseja criar uma fatia. Arraste com a tecla Shift pressionada para restringir a fatia a um quadrado. Arraste com a tecla Alt (Windows) ou Option (Mac OS) pressionada para desenhar a partir do centro. Use Visualização > Ajustar para alinhar uma nova fatia a uma guia ou a uma outra fatia na imagem. Consulte Como mover, redimensionar e ajustar fatias do usuário.

Criação de fatias a partir das guias

  1. Adicione guias a uma imagem.
  2. Selecione a ferramenta Fatia e clique em Fatias a Partir de Guias na barra de opções.

    Ao criar fatias a partir de guias, as fatias existentes são excluídas.

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.

Criar uma fatia a partir de uma camada no Photoshop
Uma fatia com base em camadas é atualizada quando a camada de origem é modificada.

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.

  1. Selecione uma camada no painel Camadas.
  2. Escolha Camada > Nova Fatia com Base em Camada.
Observação:

Não utilize uma fatia com base em camadas quando planejar mover a camada sobre uma grande área da imagem durante uma animação, pois as dimensões da fatia podem exceder um tamanho adequado.

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.

  1. Usando a ferramenta Seleção de Fatia , selecione uma ou mais fatias para converter.
  2. Na barra de opções, clique em Forçar.

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:

Linhas de fatia

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.

Cores de fatias

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.

Números de fatias

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.

Símbolos de fatias

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

  1. Escolha Visualizar > Mostrar > Fatias. Para ocultar ou mostrar fatias juntamente com outros itens, use o comando Extras. Consulte Como mostrar ou ocultar Extras.

Como mostrar ou ocultar fatias automáticas

  1. Siga um destes procedimentos:
    • Selecione a ferramenta Seleção de Fatia  e clique em Mostrar Fatias Automáticas ou Ocultar Fatias Automáticas na barra de opções.

    • Escolha Visualizar > Mostrar > Fatias. As fatias automáticas serão exibidas com o restante das fatias.

Como mostrar ou ocultar números das fatias

  1. Siga um destes procedimentos:
    • No Windows, escolha Editar > Preferências > Guias, Grade e Fatias.

    • No Mac OS, escolha Photoshop > Preferências > Guias, Grade e Fatias.

  2. Em Fatias, clique em Mostrar Números da Fatia.

Alteração da cor das linhas das fatias

  1. No Windows, escolha Editar > Preferências > Guias, Grade e Fatias. No Mac OS, escolha Photoshop > Preferências > Guias, Grade e Fatias.
  2. Em Linhas de Fatia, escolha uma cor no menu Cor de Linha.

    Após a alteração de cor, as linhas da fatia selecionadas são automaticamente exibidas em uma cor de contraste.

Receba ajuda com mais rapidez e facilidade

Novo usuário?