Si hi ha un aspecte de treballar amb Illustrator que realment no m'agrada, és convertir l'art de línia a SVG imatges per a mòbils o per a la web. Utilitzeu el menú Exportació i exportació com, i per ser brutalment honest, la funció Desa per a la web, Exportació> Desa per a la web, no era exactament fàcil d'utilitzar.
La conversió d'un dibuix al format .svg va obrir un quadre de diàleg bastant intimidatori que, per a persones noves d'aquest flux de treball, oferia una varietat confusa d'opcions per no esmentar el fet que hi havia una sèrie de formats .svg i només un d'ells era el propi format. Un cop us acostumaves a aquest flux de treball no va ser gran cosa, però la corba d'aprenentatge era empinada.
Tot això ha canviat amb la nova funció Exportació de pantalles - Exportació> Exportació de pantalles - i el panell d'exportació d'actius que es va presentar al Illustrator CC 2015 al juny de 2016. En aquesta "Com", us mostraré com utilitzar tots dos característiques. Comencem.
01 de 04
Com accedir a l'exportació de pantalles en Adobe Illustrator CC 2015
Després d'haver estat un usuari d'Illustrator des de Illustrator 88, crec que puc entendre la meva reticència a considerar Illustrator com una eina de disseny seriosa per a interfícies i projectes web i mòbils.
Quan els artboards van ser introduïts a la versió CS4 de 2008, vaig pensar que era una addició interessant de l'aplicació. Quan vaig veure per primera vegada la funció Desa per Web ara obsoleta a Illustrator, una vegada més, em va semblar interessant, però he trobat que la mateixa característica d'Adobe Fireworks estava més alineada amb gràfics web que Illustrator.
Amb l'aparició d'un primer enfocament mòbil per dissenyar i augmentar la dependència de les imatges SVG per a projectes mòbils, Illustrator era l'eina "anar a" per SVG i es va convertir en una parada important en el flux de treball de disseny de la interfície d'usuari.
Tot i així, si fos necessari exportar actius per a mòbils, Sketch 3 i Photoshop CC 2015 són les meves eines d'elecció. Illustrator va ingressar a la llista al juny de 2016 amb el menú realment atractiu Exportacions per a pantalles.
A l'exemple anterior, tinc dues pantalles destinades a un iPhone i es mostren a Artboards separats anomenats "Inici" i "Llocs". Per emetre'ls, he seleccionat File> Export> Export for Screens. S'obrirà el quadre de diàleg Exportar per a pantalles.
02 de 04
Com s'utilitza el quadre de diàleg Exportar per a pantalles
Quan aparegui el quadre de diàleg, feu clic a cada botó per seleccionar. Esportarà una marca de verificació. També podeu fer doble clic al nom d'un artboard per seleccionar-lo i canviar-lo. Això és bo per saber si els vostres taulells es denominen "Artboard 1" i "Artboard 2", que, francament, no us diuen res.
Teniu tres opcions a l'àrea de selecció:
- Tots: Aquesta elecció exporta cada porta d'art al document com un fitxer separat.
- Interval: introduïu una gamma d'artistes per exportar. Això és especialment útil per a projectes amb una dotzena d'artistes.
- Document complet: seleccioneu aquesta i totes les fitxes seran aplanades en un únic document.
L'àrea Export To permet seleccionar la carpeta de destinació de la sortida. La carpeta predeterminada serà la ubicació actual del document Illustrator.
Els formats són on passa la "màgia". Notaràs que hi ha tres icones: iOS. Android i Gear. Les dues primeres són autoexplicatives. La icona de Gear obre la Configuració de format que us permet controlar com s'eliminarà cadascun dels formats de fitxers de la llista. Aquests paràmetres són "específics del format" i un cop realitzats els canvis, feu clic al botó Desa configuració i els canvis s'aplicaran als formats que es generaran.
Una vegada que seleccioneu iOS o Android, la llista canviarà per incloure totes les resolucions disponibles en aquesta plataforma. La llista d'iOS mostrarà els factors d'escala per a la pantalla de Retina i la selecció d'Android tindrà escales que van des de .75x a 4x, que s'adapten pràcticament a tots els dispositius Android que hi ha.
Si hi ha un format que mostri que voleu eliminar, feu clic a "x". Si hi ha un que voleu afegir feu clic al botó + Afegeix una escala.
Quan hagueu acabat, feu clic al botó Exportar i apareixerà una barra de progrés quan finalitzi el procés.
03 de 04
Ús dels fitxers d'exportació per a pantalles d'Adobe Illustrator CC 2015.
Quan consulteu els resultats de Exportar per a pantalles, descobrireu que Illustrator ha produït una versió aplanada de cada pantalla. A la superfície, això pot semblar una mica feble especialment si s'espera que Illustrator hagi exportat tots els bits i peces com a imatges.
Si torna enrere i pensa en això per un moment, en realitat és exactament el que necessita perquè pot utilitzar aquesta sortida en una aplicació de prototips com Adobe Experience Design , Principleformac, Atomic.io , UXPin o una altra aplicació de prototipatge
En aquest exemple, estic fent servir Adobe Experience Design (XD) per crear un senzill clic. El primer pas del procés va ser seleccionar la mida de l'iPhone 6 que coincideix amb les dimensions de la interfície Illustrator
Quan es va obrir la interfície, he seleccionat l'eina Artboard i heu fet clic una vegada al tauler per afegir un altre artboard. Llavors els vaig nomenar "Inici" i "Llocs", va seleccionar cada artboard i va importar la imatge png de Illustrator a l'artboard.
Per crear els "punts d'interès" per al clic-a través, he dibuixat un rectangle sobre el botó Explorar a la pantalla d'inici i estableix els valors d'emplenament i de vora a cap, deseleccionant aquestes propietats al panell de Propietats. Vaig fer el mateix amb el botó Enrere a la pàgina Llocs.
Per afegir la Interactivitat, he seleccionat el mode Prototype i després heu fet clic al "punt d'accés". Llavors arrossegava la fletxa, anomenada filferro, a la pàgina Llocs i fixava el blanc de la Transició a Llocs, el moviment a Pulsar cap a l'esquerra, la facilitat per relaxar-se i la durada de la transició a .6 segons.
He repetit aquest pas amb el punt d'accés a la pàgina Llocs. L'única diferència era la transició es va establir per prémer. Quan he fet clic al botó Reprodueix he provat el meu prototip.
04 de 04
Com utilitzar el panell d'activitats d'exportació a Adobe Illustrator CC 2015
Juntament amb el menú Desa per a pantalles, Adobe també va afegir un nou panell - Export Asset - que va eliminar un gran punt de dolor en el flux de treball de disseny de la interfície d'usuari.
El punt de dolor era icones. Illustrator és una aplicació de dibuix vectorial excel·lent però per a la sortida, per exemple, 10 icones, en una pàgina amb 40 o 50 d'ells, cadascun d'ells es guarda com una imatge SVG. Això va requerir inevitablement més temps del normal gràcies als viatges successius al panell SVG. Aquest punt de dolor ara és una cosa del passat.
Aquest nou panell es troba a la finestra> Exportació d'actius. Quan el panell s'obre, seleccioneu l'element que voleu convertir a SVG o un altre format i arrossegueu-lo al tauler. Quan deixeu anar el ratolí, s'hi afegeix una miniatura de l'actiu al tauler. Assigneu un nom a l'actiu. Seguiu arrossegant objectes al tauler fins que hagueu acabat.
Seleccioneu cada element a l'àrea Configuració d'exportació o seleccioneu-los tot mantenint premuda la tecla Majús. I fent clic a cadascun d'ells. Seleccioneu el vostre format, en aquest exemple, he triat SVG i feu clic al botó Exporta. Els elements seleccionats es mostraran com a fitxers SVG a la mateixa ubicació que el fitxer Illustrator.
Quan tot aquest procés sigui encara més net, no haureu d'utilitzar el panell d'exportació d'actius. Si feu clic al botó Desa per a les pantalles a la part inferior del quadre, s'obre el quadre de diàleg.
A la inversa, podeu fer clic a la fitxa Assets del panell Desa per a pantalles per accedir al panell Exportació d'actius. Per exemple, si teniu una icona personalitzada en un quadre d'eines, podeu obrir el panell d'exportació d'actius al quadre de diàleg Desa per a la pantalla i arrossegar aquest element al panell d'exportació d'actius.