Si hay un aspecto del trabajo con Illustrator que realmente no disfruto, es convertir el arte lineal a imágenes svg para móvil o la web. El uso del menú Exportar> Exportar como y, para ser brutalmente honesto, la función Guardar para web - Exportar> Guardar para web - no fue exactamente fácil de usar.
Convertir un dibujo al formato .svg abrió un cuadro de diálogo bastante intimidante que, para las personas nuevas en este flujo de trabajo, ofrecía una confusa variedad de opciones, por no mencionar el hecho de que había varios formatos .svg y solo uno de ellos era el adecuado. formato. Una vez que se acostumbró a este flujo de trabajo, no fue un gran problema, pero la curva de aprendizaje fue pronunciada.
Todo ha cambiado con la nueva función Exportar para pantallas - Exportar> Exportar para pantallas - y el panel Exportación de activos que se introdujo en Illustrator CC 2015 en junio de 2016. En este "Cómo", le mostraré cómo usar ambos caracteristicas. Empecemos.
01 de 04
Cómo acceder a la exportación para pantallas en Adobe Illustrator CC 2015
Habiendo sido un usuario de Illustrator desde Illustrator 88, creo que puede comprender mi renuencia a considerar a Illustrator como una herramienta de diseño seria para interfaces y proyectos web y móviles.
Cuando se introdujeron las tablas de diseño en la versión CS4 2008, pensé que era una adición interesante a la aplicación. La primera vez que vi la función Guardar para Web, ahora en desuso, en Illustrator, me pareció interesante, pero encontré que la misma función en Adobe Fireworks estaba más alineada con los gráficos web que con Illustrator.
Con la llegada de un enfoque de diseño de dispositivos móviles por primera vez y la dependencia cada vez mayor de las imágenes SVG para proyectos móviles, Illustrator fue mi herramienta "ir a" para SVG y se convirtió en una parada importante en el flujo de trabajo de UI Design.
Aún así, si necesitaba exportar activos para dispositivos móviles, Sketch 3 y Photoshop CC 2015 son mis herramientas preferidas. Illustrator entró en la lista en junio de 2016 con el menú Exportar para pantallas realmente ingenioso.
En el ejemplo anterior, tengo dos pantallas destinadas a un iPhone y están en Artboards separados denominados "Inicio" y "Lugares". Para darles salida, seleccioné Archivo> Exportar> Exportar para pantallas. Se abre el cuadro de diálogo Exportar para pantallas.
02 de 04Cómo utilizar el cuadro de diálogo Exportar para pantallas
Cuando aparezca el cuadro de diálogo, haga clic en cada mesa de trabajo para seleccionar. Entonces lucirá una marca de verificación. También puede hacer doble clic en el nombre de una mesa de trabajo para seleccionarlo y cambiarlo. Esto es bueno saber si sus mesas de trabajo se llaman "Artboard 1" y "Artboard 2" que, francamente, no le dicen nada.
Tiene tres opciones en el área Seleccionar:
- Todos: Esta opción exporta cada mesa de trabajo en el documento como un archivo separado.
- Distancia: Introduzca una gama de tableros para exportar. Esto es especialmente útil para proyectos con unas pocas docenas de mesas de trabajo.
- Documento completo: Seleccione esto y todas las mesas de trabajo se aplanarán en un solo documento.
El área Exportar a le permite elegir la carpeta de destino para la salida. La carpeta predeterminada será la ubicación actual del documento de Illustrator.
Formatos es donde ocurre la "magia". Notarás que hay tres iconos- iOS. Android y un Gear. Los dos primeros son autoexplicativos. El icono de engranaje abre la Configuración de formato que le permite controlar cómo se optimizará cada uno de los formatos de archivo en la lista. Estas configuraciones son “específicas del formato” y una vez que haya realizado los cambios, haga clic en el botón Guardar configuración y esos cambios se aplicarán a los formatos que se enviarán.
Una vez que elija iOS o Android, la lista cambiará para incluir todas las resoluciones disponibles en esa plataforma. La lista de iOS mostrará los factores de escala para la pantalla Retina y la selección de Android tendrá escalas de .75x a 4x, que se adaptan a prácticamente todos los dispositivos Android que existen.
Si hay un formato que muestre que desea eliminar, haga clic en la "x". Si hay una que desea agregar, haga clic en el botón + Agregar escala.
Cuando haya terminado, haga clic en el botón Exportar Artboard y una barra de progreso le mostrará cuando finalice el proceso.
03 de 04Uso de los archivos de exportación para pantallas de Adobe Illustrator CC 2015.
Cuando revise los resultados de Exportar para pantallas, descubrirá que Illustrator ha generado una versión aplanada de cada pantalla. En la superficie, esto puede parecer un poco débil, especialmente si esperaba que Illustrator haya exportado todos los bits y piezas como imágenes.
Si da un paso atrás y lo piensa por un momento, esto es exactamente lo que necesita, ya que puede usar esta salida en una aplicación de creación de prototipos como Adobe Experience Design, Principleformac, Atomic.io, UXPin u otra aplicación de creación de prototipos.
En este ejemplo, estoy usando Adobe Experience Design (XD) para crear un clic simple. El primer paso en el proceso fue seleccionar el tamaño del iPhone 6 que coincidiera con las dimensiones de la interfaz de Illustrator
Cuando se abrió la interfaz, seleccioné la herramienta de la mesa de trabajo y hice clic una vez en la mesa de trabajo para agregar otra mesa de trabajo. Luego los nombré "Inicio" y "Lugares", seleccioné cada mesa de trabajo e importé la imagen png de Illustrator a la mesa de trabajo.
Para crear los "hotspots" para los clics, dibujé un rectángulo sobre el botón Explorar en la pantalla de inicio y configuré sus valores de relleno y borde en ninguno al deseleccionar esas propiedades en el panel Propiedades. Hice lo mismo con el botón Atrás en la página de Lugares.
Para agregar la Interactividad, seleccioné el modo Prototipo y luego hice clic en el "punto de acceso". Luego arrastré la flecha, llamada cable, a la página de Lugares y configuré el objetivo de Transición en los Lugares, el movimiento para Empujar a la Izquierda, la relajación para facilitar y la duración de la transición a .6 segundos.
Repetí este paso con el punto de acceso en la página de Lugares. La única diferencia era que la Transición estaba configurada como Push Right. Cuando hice clic en el botón Reproducir, probé mi prototipo.
04 de 04Cómo utilizar el Panel de activos de exportación en Adobe Illustrator CC 2015
Junto con el menú Guardar para pantallas, Adobe también agregó un nuevo panel, "Exportación de activos", que eliminó un gran punto de dolor en el flujo de trabajo de diseño de interfaz de usuario.
El punto doloroso fueron los iconos. Illustrator es una excelente aplicación de dibujo vectorial, pero para mostrar, digamos 10 iconos, en una página con 40 o 50 de ellos, cada uno se guarda como una imagen SVG. Esto inevitablemente requería más tiempo de lo habitual gracias a los viajes sucesivos al panel SVG. Este punto de dolor es ahora una cosa del pasado.
Este nuevo panel se puede encontrar en Ventana> Exportación de activos. Cuando se abra el panel, seleccione el recurso que desea convertir a SVG u otro formato y arrástrelo al panel. Cuando suelta el mouse, se agrega una miniatura del activo al panel. Nombre el activo. Sigue arrastrando objetos al panel hasta que hayas terminado.
Seleccione cada elemento en el área de configuración de Exportación, o selecciónelos todos presionando la tecla Mayús y haciendo clic en cada uno. Seleccione su formato, en este ejemplo, elegí SVG y haga clic en el botón Exportar. Los elementos seleccionados se enviarán como archivos SVG a la misma ubicación que el archivo de Illustrator.
Donde todo este proceso se vuelve más ordenado es que no tiene que usar el panel Exportación de activos. Si hace clic en el botón Guardar para pantallas en la parte inferior del panel, se abrirá el cuadro de diálogo.
A la inversa, puede hacer clic en la pestaña Activos en el panel Guardar para pantallas para acceder al panel Exportar activos. Por ejemplo, si tiene un icono personalizado en una mesa de trabajo, puede abrir el panel Exportación de activos en el cuadro de diálogo Guardar para pantalla y arrastrar ese elemento al panel Exportación de activos.
