Gerar itens de imagem de camadas

É possível criar itens de imagens JPEG, PNG, GIF ou SVG 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.

Para compreender melhor o gerador de itens de imagem, considere um arquivo PSD simples (download neste link) com a seguinte 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, .gif, ou .svg) 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.

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.

Gerar ativos para documentos na nuvem

Se você estiver trabalhando com um documento na nuvem, os ativos serão salvos no diretório “Associações de nuvem do Photoshop”:

• Windows: C:\Users\yourname\Documents\Adobe\Photoshop Cloud Associates
• macOS: /Users/yourname/Documents/Adobe/Photoshop Cloud Associates

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:

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

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

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.

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.

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.

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%)

Exemplos de escala absoluta

Bons exemplos de escala absoluta

• 100x80 foo.png (escala absoluta simples)
• 80 x 100px foo.png (espaços entre comprimentos)
• 4in x100 foo.png (combinação de unidades e nenhuma unidade)
• 90mm x120cm foo.png (mistura de unidades diferentes)
• 100x? foo.png (curinga)
• ?x60in foo.png (curinga no início)

Exemplos inválidos de escala absoluta

• 100x100foo.png (sem espaço antes do nome do arquivo)
• 80x100 60% foo.png (mistura de escala absoluta e relativa)
• 50% 80x100 foo.png (mistura de escala absoluta e relativa)
• 20in cm x50cm foo.png (unidades múltiplas)
• 30nm x20 nano.png (unidade inválida)

Formatação e separação de vários arquivos

Bons exemplos

• Camada 1.png (é permitido espaço no nome do arquivo — resulta em um único arquivo chamado “Camada”)
• Camada 1.png, Camada 2.jpg (vírgula como separador)
• Camada 1.png, Camada 2.jpg (vírgula seguida de espaços como separador
• Camada 1.png+Camada 2.jpg (mais como separador)
• Camada 1.png + Camada 2.jpg (mais seguido de espaços como separador)

Reúna todo o trabalho

100% Delicious, 42% Layer 1.png24 + 100x100 Camada.jpg-90% , 250% Quux/Foo Bar Baz.gif resulta em três arquivos (a string "100% Delicious" é ignorada porque não é um nome de arquivo):

• Camada 1.png, em escala de 42%, como um png de 24 bits
• Camada.jpg, como um tamanho absoluto de 100x100 pixels, como um jpg de 90% de qualidade
• Foo Bar Baz.gif na subpasta Quux, na escala de 250%, como um gif.

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:
   

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

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.

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

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%
  

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.

Perguntas frequentes