Se hai un aspecto de traballar con Illustrator que realmente non me gusta, está a converter a arte en liña para imaxes svg para móbil ou na web. Usando o menú Exportar> Exportar como e, para ser brutalmente honesto, a función Gardar por web - Exportar> Gardar por web - non eran exactamente fáciles de usar.
A conversión dun debuxo no formato .svg abriu unha caixa de diálogo bastante intimidante que, para persoas novas deste fluxo de traballo, ofreceu unha variedade confusa de opcións sen mencionar o feito de que había un número de formatos .svg e só un deles era o correcto formato. Unha vez que se acostumaba a este fluxo de traballo non era gran cousa, pero a curva de aprendizaxe era abrupta.
Isto cambiou coa nova función de Exportar pantallas - Exportar> Exportar pantallas - e Panel de exportación de activos que se introduciu no Illustrator CC 2015 en xuño de 2016. Nesta "Como" vou amosarche como usar ambos características. Comezamos.
01 de 04
Como acceder á exportación para pantallas en Adobe Illustrator CC 2015
Foi usuario de Illustrator dende Illustrator 88. Creo que pode comprender a miña desgana en considerar Illustrator como unha ferramenta de deseño seria para as interfaces e proxectos web e móbiles.
Cando os artboards foron introducidos na versión CS4 de 2008, pensei que era un complemento interesante para a aplicación. Cando vin por primeira vez a característica de Save For Web en Illustrator, de novo, atopei que era interesante pero atopei a mesma característica en Adobe Fireworks que estaba máis aliñada cos gráficos web que Illustrator.
Coa chegada dun primeiro enfoque de deseño para dispositivos móbiles e a crecente dependencia de imaxes SVG para proxectos móbiles, Illustrator foi a miña ferramenta "ir a" para SVG e converteuse nunha parada importante no fluxo de traballo de IU Design.
Aínda así, se necesitase exportar activos para móbiles, Sketch 3 e Photoshop CC 2015 son as miñas ferramentas de elección. Illustrator entrou na lista en xuño de 2016 co menú realmente Explicación para Pantallas.
No exemplo anterior, teño dúas pantallas destinadas a un iPhone e están en Artboards separados chamado "Home" e "Places". Para saída deles, seleccionei Ficheiro> Exportación> Exportación de pantallas. Abre o cadro de diálogo Exportar pantallas.
02 de 04
Como usar a caixa de diálogo Exportar para pantallas
Cando apareza o cadro de diálogo, prema en cada cadro para seleccionar. Posteriormente exercerá unha marca de verificación. Tamén podes premer dúas veces no nome dun artboard para seleccionalo e cambialo. É bo saber se os seus arteiros son chamados "Artboard 1" e "Artboard 2", que, francamente, non che di nada.
Tes tres opcións na área Seleccionar:
- Todos: Esta opción exporta cada artboard do documento como un ficheiro separado.
- Alcance: Introduza unha variedade de artistas para exportar. Isto é especialmente útil para proxectos con algunhas ducias de artistas.
- Documento completo: seleccione isto e todos os arteiros serán achatados nun único documento.
A área Export To permite escoller o cartafol de destino para a saída. O cartafol predeterminado será a localización actual do documento Illustrator.
Os formatos son onde se dá a "maxia". Notarás que hai tres iconas-iOS. Android e un Gear. Os dous primeiros son autoexplicativos. A icona de Gear abre a Configuración de formato que permite controlar como se optimizarán cada un dos formatos de ficheiros da lista. Estas opcións son "específicas de formato" e unha vez que realizou os seus cambios, faga clic no botón Gardar configuración e estes cambios aplicaranse aos formatos a seren saídos.
Unha vez que elixes iOS ou Android a lista cambiará para incluír todas as resolucións dispoñibles nesa plataforma. A listaxe de iOS mostrará os factores de escala da pantalla de Retina e a selección de Android terá escalas que varían de .75x a 4x que acomodan practicamente todos os dispositivos Android aí fóra.
Se hai un formato que amosa o que quere eliminar, prema no botón "x". Se hai un que desexa engadir faga clic no botón Engadir + escala.
Cando remate, faga clic no botón Exportar gráfico e unha barra de progreso mostrarache cando finalice o proceso.
03 de 04
Usando os ficheiros Exportar para pantallas de Adobe Illustrator CC 2015.
Cando verifique os resultados de Export for Screens, descubrirá que Illustrator produciu unha versión aplanada de cada pantalla. Na superficie, isto pode parecer un pouco feble especialmente se esperaba que Illustrator exportase todos os anacos como imaxes.
Se retrocede e pensa por un momento, este é precisamente o que precisa porque pode usar esta saída nunha aplicación de prototipos como Adobe Experience Design , Principleformac, Atomic.io , UXPin ou outra aplicación de prototipos.
Neste exemplo, estou usando Adobe Experience Design (XD) para crear un simple click-through. O primeiro paso no proceso foi seleccionar o tamaño do iPhone 6 que correspondía ás dimensións da Interface Illustrator
Cando se abriu a interface, seleccionei a ferramenta Artboard e fixei unha vez no paineboard para engadir outra artboard. A continuación, chaméronlles "Home" e "Places", seleccionamos cada cadro e importaron a imaxe png desde Illustrator ata o cadro artístico.
Para crear os "hotspots" para o click-thru, debuxei un rectángulo sobre o botón Explorar na pantalla de inicio e estableza os seus valores de recheo e bordo a ningún se desactiva esas propiedades no panel Propiedades. Fixen o mesmo co botón Atrás na páxina Lugares.
Para engadir a Interactividade, seleccionei o modo Prototype e logo faga clic no "punto de acceso". Despois arrastraba a frecha, chamada fío, á páxina Lugares e fixaba o destino de Transición nos Lugares, o movemento para empurrar cara a esquerda, a facilidade para facilitar e a duración da transición cara a .6 segundos.
Repetiu este paso co punto de acceso da páxina Lugares. A única diferenza foi a transición establecida para empurrar cara á dereita. Cando premei o botón Reproducir probei o meu prototipo.
04 de 04
Como usar o panel de activos de exportación en Adobe Illustrator CC 2015
Xunto co menú Gardar para pantallas Adobe engadiu tamén un novo panel - Exporte de activos - que eliminou un punto de dor enorme no fluxo de traballo de IU Design.
O punto de dor era iconas. Illustrator é unha gran aplicación de deseño de vectores, pero a saída, digamos 10 íconos, nunha páxina con 40 ou 50 deles esixidos cada un gardado como imaxe SVG. Isto necesitaba inevitablemente máis tempo do habitual grazas a sucesivas viaxes ao panel SVG. Este punto de dor é agora unha cousa do pasado.
Este novo panel pódese atopar en Xanela> Exportación de activos. Cando se abra o panel, seleccione o elemento que desexa converter a SVG ou a outro formato e arrastre ao panel. Cando solte o rato engádese unha miniatura do recurso ao panel. Nome o activo. Siga arrastrando obxectos ao panel ata que termine.
Seleccione cada elemento na área de configuración de exportación ou seleccione todos premendo a tecla Maiúsc. E premendo en cada un deles. Selecciona o teu formato - neste exemplo, escollín SVG- e fai clic no botón Exportar. Os elementos seleccionados serán emitidos como ficheiros SVG na mesma localización que o ficheiro Illustrator.
Onde todo este proceso é aínda máis simple, non tes que usar o panel Exportar activos. Se fai clic no botón Gardar por pantallas na parte inferior do panel ábrese o cadro de diálogo.
Pola contra, pode facer clic na pestaña Activos no panel Gardar para pantallas para acceder ao panel Exportar activos. Por exemplo, se ten unha icona personalizada nunha caixa de diálogo pode abrir o panel Exportar de activos no cadro de diálogo Gardar por pantalla e arrastrar ese elemento no panel de exportación de activos.