Para quem utiliza softwares da Adobe como o Illustrator CC por exemplo para desenhar interfaces, também pode criar toda a UI de um aplicativo e ainda exportar as imagens e arquivos em svg com facilidade sem precisar criar diversos tamanhos manualmente para Android ou IOS.
Como Designer conheço as diversas ferramentas que o mercado oferece para criar as interfaces, mas nem sempre você tem acesso a essas ferramentas, existe designer que utilizam Windows e isso é uma realidade nas empresas, com isso nem sempre é possível utilizar o ferramentas que só possuem versão para dispositivos da Apple.
Se você desenha aplicativos no Illustrator CC com apenas alguns cliques você pode exportar seus vetores para todas as diversas resoluções que o Android solicita (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi e svg) ou então para as versões de retina dos iPhones e iPads.
Neste artigo não quero explicar sobre as resoluções em dp, sp do Android isso você pode fazer uma pesquisa na web que existe uma imensidão de artigos sobre o assunto, nesse artigo vou mostrar como se faz a exportação e as configurações que devem ser feitas para que os arquivos svg funcionem.
Exportando os arquivos
As imagens abaixo mostram exatamente como deve ser feito, lembre-se apenas o Adobe versão CC possuí esta ferramenta as versões anteriores sinto muito dizer mas você vai precisar fazer tudo na mão.
1º Selecione o arquivo que você quer exportar e como o botão direito do mouse clique em Collect for Export
2º Irá abrir a janela de Asset Export do Illustrator nessa janela é possível renomear os arquivos, é muito importante você utilizar underline para separar os caracteres, se você utilizar hífen os desenvolvedores vão pedir para você renomear tudo novamente.
Na imagem abaixo você também pode ver que exite todas as resoluções pré criadas, apenas crie o sufixo para gerar as imagens com os nomes diferentes exemplo: _hdpi, _xxhdpi, etc…
Caso você esteja criando aplicativos para ios apenas troque no botão clicando em ios.
Prontinho clique em exporte e o Illustrator ira criar as imagens em todas as resoluções que você precisa corretamente. Simples né, a unica configuração que você vai precisar fazer é para arquivos SVG, abaixo explico o que você precisa fazer para não ter dor de cabeça na hora de exportar.
Vamos falar de SVG
Para exportar arquivos em svg é importante salientar que o Android Studio não aceita vetores complexos, então nada de utilizar gradientes e transparências, se você fizer algum ícone com texto embutido transforme o texto em curva, e se utilizar stroke transforme essas bordas em outline, pois ao enviar arquivos de svg para o Android Studio com os efeitos acima ira ocorrer erros. Resumindo apenas ícones simples podem ser utilizados como svg, fora isso utilize imagens mesmo.
Para configurar corretamente a exportação do SVG, na janela de Asset Export do Illustrator CC, no lado direito você verá o menu, clique e selecione Format Settings, clique em SVG e faça as mesmas configurações da imagem abaixo depois salve.
Styling: Presentation Attibutes
Font: SVG
Images: link
Objects ID: Layer Names
Decimal: 3
Pronto agora você poderá exportar seus arquivos rapidamente e sem problemas.
Uma coisa muito boa que a ferramenta faz é ao salvar o seu arquivo .ai todas as configurações de exportações são mantidas, criando uma biblioteca única que pode ser alterada quando quiser e ainda ao mudar algo no ícone que já esteja na biblioteca ele é automaticamente atualizado também na sua coleção de exportação.
Gostou desse artigo? Dá uma forcinha!
A única forma que consigo remunerar meu site é através de anúncios, não esqueça de conferir!