É 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.

Como criar e exportar gráficos da Web, consulte Como exportar arquivos em vários formatos no Photoshop.

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-res, um item de imagem foi reduzido 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

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

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.

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.

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.

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%