Exportando Assets de um PSD para Apps (para não-designers como eu)

Padrão

E aí pessoal, beleza?

Bom, hoje fugindo um pouco de programação, vamos para um assunto de muitíssima utilidade: você pegou aquele PSD maneiro com o design do seu app, mas o designer esqueceu ou não pode te gerar os assets no momento… e agora José? Foi esse o meu caso recentemente e, como um ser rústico em se tratando de arte gráfica digital, cuja maior proeza é redimensionar uma imagem usando o Paint (sim, todas as imagens do blog são editadas no PAINT!), bate aquele desespero.

Bom, no meu caso, precisei pesquisar um bocado e, no final, até que o Photoshop faz algumas mágicas pra gente. Aqui estou usando a versão CC 14.2 do Photoshop… se não me engano, essa funcionalidade que vou mostrar apareceu na versão 14.1 (não faço ideia de como funciona em outras versões… se um designer leitor souber, fique a vontade pra entrar em contato que atualizamos o post :)).

Tendo em mãos o seu PSD, você vai abrir e, antes de mexer qualquer coisa, vai em Arquivo -> Gerar -> Recursos de imagem e certifique-se que a opção está marcada!

Captura de tela 2014-08-06 20.18.47

Feito isso, é só alegria. Agora, você pode ir até as suas camadas (ou layers) e renomeá-las, por exemplo, para imagem.png ou imagem.jpg. Existem uns padrões aí nessa nomenclatura para gerar assets de diferentes tamanhos automaticamente (por exemplo retina e normal, no caso do iOS). Um post mais detalhado sobre o assunto pode ser encontrado aqui.

Uma dica que eu, totalmente leigo não sabia, era como mesclar duas camadas pra exportá-las numa mesma imagem. É só segurar o Ctrl para selecionar as camadas que você deseja agrupar, clicar com o botão direito e selecionar a opção Grupo a partir de camadas. Depois, é só dar o nome do recurso a esse grupo que ele criou.

Complementando aqui a dica, recentemente eu descobri um conversor de resources de iOS para Android. Não sei vocês, mas a maioria dos designers que já trabalhei estão acostumados a gerar os resources para iOS, com a nomenclatura @2x para imagens retina e uma outra versão da imagem (por exemplo menu@2x.png menu.png). Para simplificar o nosso trabalho e o trabalho dos designers, achei no Github um projeto chamado ios2android, que nada mais é um script que, usando o ImageMagick, converte esses recursos para Android, redimensionando-os na proporção correta e criando as pastas drawable-hdpidrawable-mdpidrawable-ldpi, etc. Se tiver a versão pra iPad da imagem, ele converte pras dimensões de tablets Android também. Uma maravilha. O link do projeto é este.

As minhas impressões sobre esse script: como ele usa shell script, no Windows você precisa instalar o Cygwin (lembrando de adicionar o pacote do ImageMagick). No Mac, via Homebrew (conforme especificado na própria descrição do repositório), é bem simples (ele foi pensado pra rodar no Mac mesmo). Já no Linux, que tecnicamente seria de boa também, tive o problema de que as imagens ficaram com metade do tamanho que deveriam ficar. Eu não manjo quase nada de shell script… caso alguém saiba e consiga investigar o motivo disso acontecer no nosso amigo Linux, faça um pull request lá no projeto e contribua com o Open Source! 🙂

Bom pessoal, é isso! Fica a dica! 😀

Deixe uma resposta