Ícone para fechamento de elementos modais do site Ícone para seção de comentários do site Ícone para perfil no Facebook Ícone para representação de categorização do site Ícone para perfil no Google Plus Ícone para curtir o artigo do site Ícone para perfil no LinkedIn Ícone para exibir menu escondido do site Ícone para perfil no Pinterest Ícone para abrir modal de busca do site Ícone para compartilhamento do site Ícone de data da postagem Ícone para perfil no Twitter Ícone para compartilhar artigo no WhatsApp

Logotipo de João Kleber Figueira dos Santos Desenvolvedor Web Freelancer Jkfigueirasantos Blog

exportar-assets-photoshop

Photoshop: Exportando imagens e gerando múltiplos assets rapidamente

Aprenda a exportar uma ou várias imagens de vários tamanhos de uma vez no Photoshop e acelere seu workflow!

Escrito por jkfigueirasantos

Boa parte dos designers e desenvolvedores do mundo usam o Photoshop para criação de layouts, exportar imagens na hora da codificação da interface ou até mesmo tratar alguma imagem removendo elementos ou botando aquele ~efeito maroto~ de Instagram nela. Mas o fato é que se tratando de exportação de imagens e elementos do site (o famoso “fatiar o layout”) pode se tornar uma tarefa maçante, principalmente ao exportar várias versões de um mesmo elemento em tamanhos diferentes. Neste artigo vou mostrar alguns macetes que podem te ajudar na hora de exportar layout no Photoshop.

ps: Neste tutorial estarei usando o Photoshop CC para as demonstrações

Método #1: Exportação rápida em PNG no Photoshop

Essa dica é para você que quer exportar um elemento de forma mais rápida e que não vai precisar gerar versões e versões da mesma em tamanhos diferentes!

Selecione alguma layer/camada no painel de Camadas do Photoshop, clique com o botão direito e selecione o “Exportação rápida como PNG”. Agora basta nomear a imagem e dar Ok.

Clique no texto da camada (clicando na thumbnail vai aparecer opção de mesclagem)

Clique no texto da camada (clicando na thumbnail vai aparecer opção de mesclagem)

Método #2: Ajustar e exportar uma imagem proporcionalmente no Photoshop

Aqui além de você poder escolher em que extensão deseja para a sua imagem (.jpg, .png, .gif por exemplo) você pode definir os tamanhos dela de acordo com o padrão de tamanho e resolução.

Selecione a camada e clique com o botão direito e selecione “Exportar como…“. Vai aparecer um modal com as opções de extensão, tamanho padrão da imagem, qualidade (somente para .jpg), metadados e padrão de cores. Você pode definir uma nova largura e altura para a imagem na opção “Tamanho da imagem” ou ajustar essas opções de forma proporcional apenas diminuindo a sua porcentagem de tamanho no campo “Dimensionar” (lembre-se que isso pode distorcer a qualidade da imagem).

Método #3: Exportar imagem de acordo com a resolução no Photoshop

Nesta opção você pode exportar uma imagem em vários tamanho definindo tamanhos e sufixos para a mesma. Isso te dá a habilidade de exportar as imagens com os seus tamanhos proporcionais e chamá-los através da propriedade “srcset” através da tag image no HTML e sendo usados em dispositivos Retina Display, por exemplo.

Para fazer isso é bem simples: Repita o processo anterior (botão direito do mouse + “Exportar como” e a sua esquerda vai encontrar as opções de tamanhos e definir sufixos para a mesma. Veja a imagem abaixo.

Exportando imagens de vários tamanhos no Photoshop

Aqui definimos que a imagem vai ser exportada em 3 tamanhos: 1x (@1, tamanho padrão dessa imagem no Photoshop), 0.5x (@0,5x, imagem sendo exportada 50% menos do que seu tamanho original) e 1.25x (@1,25x, imagem sendo exportada 25% maior do que seu tamanho original).

O resultado final podemos ver logo abaixo.

Só não se esqueça de renomear a imagem no painel de layers. Eu esqueci e acabou saindo um "Plano de Fundo" :v

Só não se esqueça de renomear a imagem no painel de layers. Eu esqueci e acabou saindo um “Plano de Fundo” :v

Método #4: Exportando assets direto pela camada no Photoshop

Aqui encontramos um modo um pouco mais avançado de se exportar imagens. De fato, podemos exportar as imagens em tamanhos diretamente escritos na layer, definindo de uma vez o nome, tamanho e compressão das mesmas.

ps: as imagens serão exportadas onde o arquivo que você está manipulando.

Múltiplas extensões

Para começar, vamos criar na área de trabalho uma pasta chamada assets e escolher uma imagem para praticarmos.

Abra a imagem no “Fotoxópe”, vá na aba Arquivo/Gerar/Recursos de Imagens. A partir daí o Photoshop estará aguardando as suas ações de manipulação de camadas de acordo com o que você escrever nelas. Renomeie a camada da imagem para background.jpg, background.png e o que acontece? Nada.

Como assim “nada”? Não deu nenhum retorno, nenhuma imagem nem nada! Calma! Volta na pasta em que a imagem está e veja o que apareceu.

Exportando várias imagens com diferentes extensões no Photoshop

Sim, agora podemos ver a geração de assets do Photoshop: foi criada uma pasta com o mesmo nome da imagem, porém com um “-assets” do lado contendo a imagem tanto na extensão .jpg quanto em .png! Agora vamos analisar essa estrutura:

  • O texto “background” seria o nome da imagem que você quer gerar;
  • O que vier depois do “.” aqui será interpretado como o nome da extensão;
  • O “,” significa você passará um outro parâmetro para exportar de novo aquela imagem, como se fosse um “e também”, podendo gerar ela com uma nova extensão, por exemplo.

Múltiplas extensões + tamanhos proporcionais

É possível também exportar essas imagens em diversos tamanhos escalonando elas proporcionalmente. Para isso, basta definir a proporção em % na frente do nome delas, como por exemplo 100% background-default.jpg + 50% background-small.jpg. Vamos analisar novamente:

  • Os “100%” e “50%” – neste caso – refere-se ao tamanho proporcional da imagem no Photoshop;
  • Se repetirmos o processo de antes deixando o nome da imagem somente em “background”, teremos um erro no Photoshop (ele aparece em .txt na pasta de assets) nos falando que houve um conflito de caminhos, então precisamos nomear as versões das imagens de forma diferente (“-default” e “-small”);
  • Assim como no processo anterior, o que vem depois do “.” vem a ser a extensão da imagem. Neste caso use somente o .jpg.

Exportando assets de vários tamanho rapidamente no Photoshop

O resultado podemos ver aqui:

exp-ps-5

Múltiplas extensões + tamanhos proporcionais + Compressão/Qualidade de exportação

No mesmo ritmo podemos definir também a qualidade da imagem ao ser exportada. Para isso basta colocarmos o nível de qualidade em % logo após a extensão da imagem (ou 8, 24 e 32 para extensões .png).

exp-ps-6

Ao ir na pasta das imagens geradas podemos ver que foram criadas 3 imagens com os nomes que demos. Ao abri-las podemos ver o nível de qualidade.

Múltiplas imagens e tamanhos divididos por pastas

Temos a opção de também gerar as imagens tendo os seus tamanhos jogados em determinadas pastas. O processo dessa geração também é relativamente simples e podemos fazer de duas formas.

A primeira opção é definirmos uma configuração padrão parar exportar as imagens. Para isso crie uma camada e como primeiro parâmetro coloque “default”, isso fará o gerador do Photoshop interpretar que aquela camada tem a configuração que deve ser considerada para exportar as imagens do projeto.

Ainda nesta camada, defina o tamanho das imagens (como no processo anterior) e logo em seguida o nome da pasta + o prefixo que acompanhará as imagens (neste caso: “large” e “small” como o nome das pastas e “_large” e “_small” que virá após o nome das imagens).

Note que as imagens definidas com o tamanho de 100% (tamanho original de cada imagem) serão jogadas na pasta “large”, as que foram redimensionadas em 50% para a pasta “small”.

ps: lembre-se de jogar cada imagem em uma pasta e de dar a ela o nome que irá nas suas versões, acompanhado da extensão (neste caso, .jpg).

Exportar assets no Photoshop avançado

A segunda opção é, ao invés de definir uma camada com essas configurações padrão, nomear as pastas com o tamanho + pasta/nome-da-imagem_prefixo.extensão como na imagem abaixo.

Exportar assets no Photoshop avançado #2

Referências:

Smashing Magazine – The Retina Asset Workflow You’ve Always Wanted For Photoshop

COMENTAR
COMPARTILHE