Logotipo Design Interativo

Exportando imagens e svg para dispositivos Android utilizando o Adobe Illustrator CC


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.

 Selecione o arquivo que você quer exportar e como o botão direito do mouse clique em Collect for Export

Collect For Export

 

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…

 

Asset Export

Caso você esteja criando aplicativos para ios apenas troque no botão clicando em ios.

 

ios e android

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

format settings svg

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.

 

 

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade