Se há um aspecto de trabalhar com o Illustrator que eu realmente não gosto é converter linhas de arte em imagens svg para celular ou na web. Usando o menu Exportar> Exportar como e, para ser extremamente honesto, o recurso Salvar para a Web - Exportar> Salvar para a Web - não era exatamente fácil de usar.
A conversão de um desenho para o formato .svg abriu uma caixa de diálogo bastante intimidadora que, para pessoas novas neste fluxo de trabalho, ofereceu uma série confusa de opções para não mencionar o fato de haver vários formatos .svg e apenas um deles era o apropriado formato. Uma vez que você se acostumou com este fluxo de trabalho, não foi grande coisa, mas a curva de aprendizado foi íngreme.
Tudo isso mudou com o novo recurso Export For Screens - Export> Export for Screens - e o painel Asset Export que foi apresentado ao Illustrator CC 2015 em junho de 2016. Neste “How To”, vou mostrar como usar os dois características. Vamos começar.
01 de 04
Como acessar a exportação de telas no Adobe Illustrator CC 2015
Tendo sido um usuário do Illustrator desde o Illustrator 88, acho que você pode entender minha relutância em considerar o Illustrator como uma ferramenta de design séria para interfaces e projetos da Web e móveis.
Quando as pranchetas foram introduzidas na versão CS4 2008, achei que essa era uma adição interessante ao aplicativo. Quando vi pela primeira vez o agora obsoleto recurso Salvar para a Web no Illustrator, achei interessante, mas achei que o mesmo recurso no Adobe Fireworks estava mais alinhado com gráficos da Web do que o Illustrator.
Com o advento de uma abordagem mobile-first para o design e a crescente dependência de imagens SVG para projetos móveis, o Illustrator foi minha ferramenta “go to” para SVG e se tornou uma parada importante no fluxo de trabalho do Design UI.
Ainda assim, se eu precisasse exportar recursos para dispositivos móveis, o Sketch 3 e o Photoshop CC 2015 são minhas ferramentas de escolha. O Illustrator entrou na lista em junho de 2016 com o realmente interessante menu Exportar para telas.
No exemplo acima, tenho duas telas destinadas a um iPhone e elas estão em pranchetas separadas, denominadas "Página inicial" e "Locais". Para emiti-los, selecionei Arquivo> Exportar> Exportar para telas. A caixa de diálogo Export for Screens é exibida.
02 de 04Como usar a caixa de diálogo Exportar para telas
Quando a caixa de diálogo aparecer, clique em cada prancheta a ser selecionada. Em seguida, ele terá uma marca de seleção. Você também pode clicar duas vezes no nome de uma prancheta para selecioná-la e alterá-la. É bom saber se suas pranchetas são chamadas de “Artboard 1” e “Artboard 2”, o que, francamente, não diz nada.
Você tem três opções na área Selecionar:
- Todos: Essa opção exporta cada prancheta no documento como um arquivo separado.
- Alcance: Insira um intervalo de pranchetas a serem exportadas. Isso é especialmente útil para projetos com algumas dezenas de pranchetas.
- Documento Completo: Selecione esta e todas as pranchetas serão achatadas em um único documento.
A área Exportar para permite escolher a pasta de destino da saída. A pasta padrão será o local atual do documento do Illustrator.
Formatos é onde a mágica acontece. Você vai notar que existem três ícones - iOS. Android e uma engrenagem. Os dois primeiros são auto-explicativos. O ícone de engrenagem abre as Configurações de formato, que permitem controlar como cada um dos formatos de arquivo na lista será otimizado. Essas configurações são "específicas do formato" e depois de fazer as alterações, clique no botão Salvar configurações e essas alterações serão aplicadas aos formatos a serem emitidos.
Depois de escolher o iOS ou o Android, a lista será alterada para incluir todas as resoluções disponíveis nessa plataforma. A listagem do iOS mostrará os fatores de escala para a tela Retina e a seleção Android terá escalas que variam de 0,75x a 4x, que acomoda praticamente todos os dispositivos Android disponíveis.
Se houver um formato mostrando que você deseja remover, clique no "x". Se houver um que você deseja adicionar, clique no botão + Adicionar escala.
Quando terminar, clique no botão Exportar prancheta e uma barra de progresso mostrará quando o processo estiver concluído.
03 de 04Usando os arquivos A exportação de telas do Adobe Illustrator CC 2015.
Ao verificar os resultados de Exportar para telas, você descobrirá que o Illustrator gerou uma versão simplificada de cada tela. Na superfície, isso pode parecer um pouco fraco, especialmente se você esperava que o Illustrator exportasse todos os bits e peças como imagens.
Se você voltar atrás e pensar sobre isso por um momento, isso é exatamente o que você precisa, porque você pode usar essa saída em um aplicativo de prototipagem como o Adobe Experience Design, o Principleformac, o Atomic.io, o UXPin ou outro aplicativo de prototipagem.
Neste exemplo, estou usando o Adobe Experience Design (XD) para criar um simples click-thru. O primeiro passo no processo foi selecionar o tamanho do iPhone 6 que correspondia às dimensões da interface do Illustrator.
Quando a interface foi aberta, selecionei a ferramenta Artboard e cliquei uma vez na área de trabalho para adicionar outra prancheta. Eu então os nomeei como "Home" e "Places", selecionei cada prancheta e importei a imagem PNG do Illustrator para a prancheta.
Para criar os "pontos de acesso" para o click-thru, desenhei um retângulo sobre o botão Explorar na tela inicial e defini seus valores de preenchimento e borda como nenhum, desmarcando essas propriedades no painel Propriedades. Eu fiz a mesma coisa com o botão Voltar na página Locais.
Para adicionar a Interatividade, selecionei o modo Prototype e cliquei no “hotspot”. Eu então arrastei a flecha - chamada de fio - para a página de Lugares e ajustei o alvo de Transição nos Lugares, o movimento para Empurrar Esquerda, o alívio para aliviar e a duração da transição para .6 segundos.
Repeti este passo com o ponto de acesso na página do Google Places. A única diferença era que a transição estava definida para apertar à direita. Quando eu cliquei no botão Play, testei meu protótipo.
04 de 04Como usar o painel Exportar ativo no Adobe Illustrator CC 2015
Juntamente com o menu Salvar para telas, a Adobe também adicionou um novo painel - Exportação de material - que removeu um enorme obstáculo no fluxo de trabalho do Design da interface do usuário.
O ponto doloroso eram os ícones. O Illustrator é um excelente aplicativo de desenho vetorial, mas, para emitir, digamos, 10 ícones, em uma página com 40 ou 50 deles, cada um deles é salvo como uma imagem SVG. Isso inevitavelmente exigiu mais tempo do que o normal, graças a sucessivas viagens ao painel SVG. Este ponto de dor é agora uma coisa do passado.
Este novo painel pode ser encontrado em Window> Asset Export. Quando o painel abrir, selecione o material que você deseja converter em SVG ou outro formato e arraste para o painel. Quando você solta o mouse, uma miniatura do ativo é adicionada ao painel. Nomeie o ativo. Continue arrastando objetos para o painel até terminar.
Selecione cada item Na área Configurações de exportação, ou selecione todos eles, mantendo pressionada a tecla Shift e clicando em cada um deles. Selecione seu formato - neste exemplo, escolhi o SVG e clique no botão Exportar. Os itens selecionados serão enviados como arquivos SVG para o mesmo local que o arquivo do Illustrator.
Onde todo esse processo fica ainda mais simples, você não precisa usar o painel Exportação de Ativos. Se você clicar no botão Salvar para telas, na parte inferior do painel, a caixa de diálogo será aberta.
Por outro lado, você pode clicar na guia Ativos no painel Salvar para telas para acessar o painel Exportação de ativos. Por exemplo, se você tiver um ícone personalizado em uma prancheta, poderá abrir o painel Exportação de ativos na caixa de diálogo Salvar para a tela e arrastá-lo para o painel Exportação de ativos.
