É possível criar itens de imagens JPEG, PNG ou GIF a partir do conteúdo de uma camada ou um grupo de camadas em um arquivo PSD. Os itens são gerados automaticamente quando você adiciona uma extensão de formato de imagem suportado a um nome de camada ou nome de grupo de camadas. Opcionalmente, é possível também especificar parâmetros de qualidade e tamanho para os itens da imagem gerados.

Gerar itens de imagens a partir de um arquivo PSD é especialmente útil para o design para vários dispositivos da web.

Vídeo: Gerar recursos da Web na Photoshop CC

Vídeo: Gerar recursos da Web na Photoshop CC
Este vídeo percorre as várias maneiras pelas quais você pode usar o gerador de recursos na Photoshop CC para fornecer imagens de diferentes tamanhos e resoluções para uso em outros projetos.
Chris Converse

Para saber como criar e gerar gráficos da Web com o Adobe Generator, consulte Extrair ativos para a Web.

Gerar itens de imagem de camadas ou grupos de camadas

Para compreender melhor o gerador de itens de imagem, considere um arquivo PSD simples (download neste link) com a seguinte hierarquia de camadas:

Geração de ativos de imagens do Photoshop
Exemplo de arquivo PSD e sua hierarquia de camadas

A hierarquia de camadas para este arquivo tem dois grupos de camadas —Rounded_rectangles e Ellipses. Cada um de esses grupos de camadas contém cinco camadas.

Siga estas etapas para criar itens de imagem deste arquivo PSD:

  1. Com o arquivo PSD aberto, selecione Arquivo > Gerar > Itens de imagem.
  2. Adicione as extensões apropriadas de formato de arquivo (.jpg, .png ou .gif) aos nomes das camadas ou dos grupos de camadas a partir das quais você deseja gerar recursos de imagem. Por exemplo, renomeie os grupos de camadas Rounded_rectangles e Ellipses como Rounded_rectangles.jpg e Ellipses.png; e a camada Ellipse_4 como Ellipse_4.gif.

Observação:

Os caracteres especiais : e * não são suportados nos nomes de camadas.

O Photoshop cria os itens de imagem e salva-os em uma subpasta ao lado do arquivo PSD de origem. Se o arquivo PSD de origem PSD ainda não foi salvo, o Photoshop salva os itens gerados em uma
nova pasta na área de trabalho.

Nomes de ativos de imagem do Photoshop
Nomes de itens de imagem são gerados a partir dos nomes de camadas/grupos de camadas

Observação:

A geração de itens de imagem é ativada para o documento atual. Após habilitado, o recurso permanece disponível sempre que o documento é aberto a seguir. Para desativar a geração de itens de imagem para o documento atual, desmarque Arquivo > Gerar > Itens de imagem.

Criar vários itens de uma camada ou de um grupo de camadas

Para gerar vários itens de uma camada/grupo de camadas, separe os nomes de itens com vírgulas. Por exemplo, o seguinte nome de camada cria três itens:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Salvar itens em uma subpasta

É possível optar por salvar os itens de imagem feitos gerados de grupos específicos de camadas em uma subpasta diretamente na pasta do documento. Inclua o nome da subpasta no nome do grupo de camadas; por exemplo:

[subpasta]/Ellipse_4.jpg 

Um caso de uso de webdesign

Gerar itens de imagens a partir de um arquivo PSD é especialmente útil para o design para vários dispositivos da web. Considere o seguinte design da web e a sua estrutura de camadas:

Um design da web e sua hierarquia de camadas
Um design da web e sua hierarquia de camadas

Vamos extrair o ícone na parte superior e a linha superior da grade de imagem de Pontos de acesso global como itens de imagem:

  • Adicionar extensões de formato de imagem para os nomes de camada apropriados.
Renomear as camadas/grupos de camadas apropriados do Photoshop
Renomear as camadas/grupos de camadas apropriados do Photoshop

Renomear as camadas/grupos de camadas apropriados

Observação:

Um único item de imagem é gerado a partir do conteúdo de uma camada/grupo de camadas. Por exemplo, o grupo de camadas do logotipo AdventureCo na captura de tela acima contém uma camada de forma e uma camada de texto dinâmico. Essas camadas são achatadas quando um item de imagem é gerado a partir do grupo de camadas.

O Photoshop cria os itens e salva-os no mesmo local do arquivo PSD de origem.

Ativos de imagens gerados do Photoshop
itens de imagens gerados

Especificar parâmetros de qualidade e tamanho

Por padrão, os itens JPEG são gerados com qualidade de 90%. Por padrão, os itens PNG são gerados como imagens de 32 bits. Os itens GIF são gerados com transparência alfa básica.

É possível personalizar a qualidade e o tamanho enquanto se renomeia camadas ou grupos de camadas na preparação para geração de itens.

Parâmetros dos itens JPEG

  • Adicione a qualidade de saída desejada como um sufixo para o nome do item: .jpg(1-10) ou .jpg(1-100%). Por exemplo:
    • Ellipse_4.jpg5
    • Ellipse_4.jpg50%
  • Adicione o tamanho desejado da imagem de saída (relativo ou em formatos suportados: px, in, cm e mm) como um prefixo para o nome do item. O Photoshop dimensiona a imagem proporcionalmente. Por exemplo:
    • 200% Ellipse_4.jpg
    • 300 x 200 Rounded_rectangle_3.jpg
    • 10in x 200mm Rounded_rectangle_3.jpg

Observação: lembre-se de adicionar um caractere de espaço entre o prefixo e o nome do item. Se você estiver especificando o tamanho em pixels, poderá omitir a unidade. Por exemplo, 300 x 200.

Observação:

Como ilustrado, você pode mesclar diferentes unidades e pixels para especificar o tamanho desejado de saída. Por exemplo, 4in x 100 Rounded_rectangle_3.jpg é um nome válido de camada para a geração de itens.

Parâmetros dos itens PNG

  • Adicione a qualidade de saída desejada como um sufixo para o nome do item: 8, 24 ou 32. Por exemplo:
    • Ellipse_4.png24
  • Adicione o tamanho desejado da imagem de saída (relativo ou em formatos suportados: px, in, cm e mm) como um prefixo para o nome do item. O Photoshop dimensiona a imagem proporcionalmente. Por exemplo:
    • 42% Ellipse_4.png
    • 300 mm x 20 cm Rounded_rectangle_3.png
    • 10 pol x 50 cm Rounded_rectangle_3.png

Observação: lembre-se de adicionar um caractere de espaço entre o prefixo e o nome do item. Se você estiver especificando o tamanho em pixels, poderá omitir a unidade. Por exemplo, 300 x 200.

Observação:

Como ilustrado, você pode mesclar diferentes unidades e pixels para especificar o tamanho desejado de saída. Por exemplo, 4in x 100 Rounded_rectangle_3.png é um nome válido de camada para a geração de itens.

Parâmetros de itens GIF

  • Adicione o tamanho desejado da imagem de saída (relativo ou em formatos suportados: px, in, cm e mm) como um prefixo para o nome do item. Por exemplo:
    • 42% Ellipse_4.gif
    • 300mm x 20cm Rounded_rectangle_3.gif
    • 20in x 50cm Rounded_rectangle_3.gif

Observação: lembre-se de adicionar um caractere de espaço entre o prefixo e o nome do item. Se você estiver especificando o tamanho em pixels, poderá omitir a unidade. Por exemplo, 300 x 200.

Observação:

Como ilustrado, você pode mesclar diferentes unidades e pixels para especificar o tamanho desejado de saída. Por exemplo, 4in x 100 Rounded_rectangle_3.gif é um nome de camada válido para a geração de itens.

Parâmetros de qualidade não estão disponíveis para itens GIF.

Construa nomes de camadas complexos

É possível especificar vários nomes de itens com parâmetros ao nomear uma camada para geração de itens. Por exemplo:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

O Photoshop cria os seguintes itens a partir dessa camada:

  • Delicious.jpg (uma imagem JPG de qualidade 8 dimensionada em 120%)
  • Delicious.png (uma imagem PNG de 24 bits dimensionada em 42%)
  • Delicious_2.jpg (uma imagem JPG de qualidade 90% com um tamanho absoluto de 100x100 px)
  • Delicious.gif (uma imagem GIF dimensionada em 250%)

Especificar configurações padrão para itens

É possível especificar configurações padrão de largura do documento para os itens gerados. Siga estas etapas:

  1. Crie uma nova camada vazia no documento.
  2. Comece o nome da camada com a palavra-chave padrão. Agora, insira as configurações a serem aplicadas a todos os itens da imagem gerados do documento. Por exemplo:

padrão alta-res/

Gerencie os itens da imagem em uma subpasta denominada alta-res. Por exemplo, [asset_folder]/alta-res/Delicious.jpg.

padrão alta-res/@2x

Gerencie os itens da imagem em uma subpasta denominada alta-res. Além de isso, adicione sufixos aos nomes dos itens com @2x. Por exemplo, [asset_folder] /alta-res/ Delicious@2x.jpg.

Padrão 50% baixa-res/

Salve os itens de imagem reduzidas em 50% na subpasta baixa- res na pasta de itens do documento 

padrão alta-res/@2x + 50% baixa- res/

Gerencie dois itens de uma camada:

  • Na subpasta alta-res, um item de imagem cujo nome tem o sufixo @2x
  • na subpasta baixa-resum item de imagem reduzida em 50%

Observação:

Os fatores de dimensionamento padrão são substituídos por fatores de dimensionamento especificados para camadas individuais.

Desabilitar a geração de itens de imagem para todos os documentos

É possível desativar a geração de itens de imagem globais para todos os documentos do Photoshop ao alterar as suas Preferências.

  1. Escolha Editar > Preferências > Plug-Ins.
  2. Desmarque Habilitar o Generator.
  3. Clique em OK.

Observação:

O comando de menu Arquivo > Criar não fica disponível ao desativar a geração de itens de imagem de Preferências. O recurso pode ser ativado novamente somente na caixa de diálogo Preferências .

Perguntas frequentes

É necessário especificar nomes exclusivos de itens?

Os nomes de itens devem ser exclusivos no nível do documento.

Qual é o nível de qualidade padrão em que os itens de imagem são gerados?

Por padrão, os itens JPG são gerados com qualidade de 90%. Por padrão, os itens PNG são gerados como imagens de 32 bits. Os itens GIF são gerados com transparência alfa básica.

O Photoshop cria itens de imagem a partir de camadas com transparência e outros efeitos?

Sim. A transparência e outros efeitos aplicados em uma camada são refletidos nos itens criados a partir dessa camada. No entanto, esses efeitos podem ser nivelados nos itens gerados.

Como os itens de imagem são criados a partir de camadas que sangram da tela?

Os ativos são cortados nos limites do documento. Se uma imagem não estiver dentro dos limites do documento, o Generator não cria os ativos de imagem associados.

A vírgula é o único separador permitido entre nomes de itens de imagem?

Além da vírgula (,), é possível usar o símbolo de adição (+) como separador entre os nomes dos itens de imagem. Por exemplo:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

é igual a:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

Vídeo: Criar um projeto do Edge Reflow do Photoshop Generator

Vídeo: Criar um projeto do Edge Reflow do Photoshop Generator
Este vídeo mostra como criar um layout da Web que atenda aos tamanhos de tela, que variam de 320 pixels a mais de 1.000 pixels horizontais.
Chris Converse

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online