Novedades para los diseñadores web en Illustrator CC
El 6 de mayo, Adobe anunció sus últimas actualizaciones de su software creativo. Algunas de estas actualizaciones tienen grandes implicaciones sobre cómo los usuarios trabajan con sus herramientas. En este artículo, me gustaría revisar qué ha cambiado Adobe en Illustrator y específicamente cómo afecta a los diseñadores web.
Por supuesto, hay varias funciones nuevas, como bibliotecas de AutoCAD, sobreimpresión en blanco, intercambio de proxy de relleno y carrera para texto, generación automática de esquinas, soporte indic, archivos de paquete, imágenes no embebidas, ubicación de múltiples archivos, herramientas de tipo táctil, herramientas de transformación libre y imágenes en pinceles. Si eres un adicto a Illustrator, estas son todas las características que valen la pena, pero en lo que quiero centrarme específicamente son en las mejoras básicas que ayudarán a cualquiera a crear obras de arte para la entrega en pantalla.
Soporte HiDPI
Con la aparición de pantallas de alta resolución (como la Macbook Pro con pantalla Retina), Illustrator CS6 y versiones anteriores se veían borrosas. Las ilustraciones y los íconos parecían pixelados y el texto se veía como anti-alias. La naturaleza misma de Illustrator es proporcionar una rica y nítida obra de arte, por lo que esta experiencia fue menos que deseable. Afortunadamente Adobe ha mejorado Illustrator CC para aprovechar estas pantallas de alta resolución. Las ilustraciones se verán mejor, el texto se verá nítido, los elementos de la IU (iconos, cursores, etc.) se verán más suaves. También hicieron algunas mejoras en el proceso de renderizado. Ahora aprovecha las máquinas multinúcleo y utiliza la representación con subprocesos para representar ilustraciones. Debería ver algunas mejoras en tareas como ampliar, panoramizar, copiar pegar, arrastrar y soltar, etc.
Mejoras de guías
Las guías se utilizan ampliamente al planificar y diseñar páginas. Crear maquetas en Illustrator utilizando guías le permite colocar contenido de manera precisa. En Illustrator CC, hay cuatro mejoras en las guías:
- Al hacer doble clic en una regla, se crea una guía en esa ubicación específica de la regla.
- Cuando mantiene presionada la tecla Mayús y luego hace doble clic en una ubicación específica en una regla, la guía creada en el punto se ajusta automáticamente a la marca (división) más cercana en la regla.
- Si oculta guías (Ctrl / Cmd +;) y luego elige mostrarlas, las guías no se bloquean automáticamente como lo hacían en versiones anteriores.
- Crea guías horizontales y verticales en una acción. Aquí se explica cómo: en la esquina superior izquierda de la ventana de Illustrator, haga clic en la intersección de las Reglas y presione Ctrl (o Cmd en una Mac) y arrastre el puntero del mouse a cualquier ubicación en la ventana de Illustrator; el puntero del mouse se convierte en cruz para indicar dónde se puede crear una guía horizontal y vertical; suelte el puntero del mouse para crear las Guías.
Mejoras en la búsqueda de fuentes
La búsqueda típica de escritura anticipada solo busca la primera palabra en el nombre de la fuente, que generalmente no arroja los mejores resultados de inmediato. Además, buscar y explorar una gran cantidad de fuentes puede ser difícil. Se ha agregado una nueva opción de función de búsqueda "Buscar nombre de fuente completo" a los paneles de control y de caracteres. Además, la integración de TypeKit para fuentes de escritorio se anunció recientemente en MAX. Esto significa que puede diseñar fácilmente maquetas con las mismas fuentes que piensa utilizar en la web.
Mejoras de búsqueda de color
Encontrar un color particular de una variedad de colores puede llevar mucho tiempo y ser frustrante. En Illustrator CC, se han realizado cambios para facilitar mucho la tarea de buscar y encontrar un color. El cuadro de diálogo Selector de color (haga doble clic en el proxy de relleno en la barra de herramientas) ahora tiene un widget de búsqueda en la ventana Muestras de color. Cuando hace clic en Muestras de color, aparece una barra de búsqueda debajo de la lista de colores predefinida. Escriba el nombre de un color o un valor RGB (o CMYK para imprimir). Si escribe 'azul', se muestran todas las muestras de color con la palabra azul en su nombre. Escribir R = 77 mostrará todas las muestras de color que tengan un color rojo con un valor de 77 en la escala RGB. El widget de búsqueda está habilitado por defecto.
La opción de búsqueda en el Panel de Muestras también se ha mejorado. El campo no impone un autocompletar. Los caracteres que escriba ya no se sustituirán automáticamente por la coincidencia de color más cercana encontrada. Puede escribir un nombre de un color o simplemente escribir en los valores de color RGB (o CMYK para imprimir) para buscar si existe una combinación de colores. El campo Buscar no está habilitado de manera predeterminada, y debe habilitarse por primera vez desde el submenú del panel.
También vale la pena señalar que Kuler se ha horneado en Illustrator. Por lo tanto, si utiliza este servicio de Adobe para crear grupos y temas de color, puede acceder fácilmente a este contenido directamente dentro de Illustrator CC.
Panel de propiedades CSS
Por supuesto, la característica más importante para la web son las mejoras realizadas en los flujos de trabajo de CSS y SVG. Ahora, si eres un usuario de Illustrator hardcore, es posible que hayas usado algo en CS5 llamado paquete HTML5, que estaba disponible en AdobeLabs. Por alguna razón, nunca apareció en CS6 pero, muchas de esas características han regresado con esta actualización de CC. Estas características son una reminiscencia de lo que ya se ha puesto a disposición de Photoshop CS6 a través de las actualizaciones y características de Creative Cloud que se encuentran en Fireworks CS6.
El Panel de propiedades de CSS es cómo extraerá el CSS del documento de Illustrator y proporciona varias formas de hacerlo. Sin embargo, el paso clave para hacer que todo esto funcione sea nombrando las capas dentro del panel de capas. Ciertamente, Illustrator puede generar CSS sin que el objeto tenga un nombre dentro del panel de capas, pero te estás abriendo a una forma desorganizada y potencialmente descuidada de generar código. Esto es esencialmente cómo Illustrator nombrará las reglas de clase que crea para usted. El CSS que se genera puede tener prefijos de navegador para Webkit, Firefox, Opera e Internet Explorer. Puede capturar aspectos compatibles con CSS como degradados y esquinas redondeadas.
Puede controlar cómo se genera el CSS accediendo al cuadro de diálogo Opciones de exportación de CSS. Puede acceder al cuadro de diálogo haciendo clic en el botón Opciones de exportación de CSS, que es el primero de cuatro botones hacia la parte inferior derecha del panel. El panel proporciona varias funciones para flujos de trabajo de CSS:
- Ver el CSS para un objeto seleccionado
- Copiar código CSS para un objeto seleccionado
- Exportar el objeto seleccionado a un archivo CSS junto con las imágenes usadas en CSS
- Exportar código CSS para todos los objetos en el documento a un archivo CSS
Además, puede exportar el código CSS para todos los objetos dentro del documento yendo al menú Archivo y seleccionando Exportar. Eso abrirá un cuadro de diálogo, y desde allí puede elegir CSS en el menú de formato.
Si tiene un objeto, selecciónelo y asegúrese de que esté nombrado correctamente en el Panel de Capas. Una vez seleccionado, verá el CSS necesario para generar la ilustración en un navegador en el Panel de Propiedades de CSS.
Código SVG
En versiones anteriores de Illustrator, debería guardar un documento como SVG. Aquí, en la actualización de CC, tiene la capacidad de copiar algo dentro del documento, luego vaya a su editor de HTML favorito y simplemente realice un pegado; todo el código SVG se colocará dentro del documento. Es un flujo de trabajo sorprendentemente agradable. Si eso no lo deja para usted, el método más tradicional de guardar el documento como SVG todavía está disponible.
Además, Adobe ha agregado soporte para exportar estilos no utilizados. Al diseñar, muchas veces creará múltiples estilos gráficos al crear ilustraciones. No puedes usar todos los estilos disponibles. Cuando exporta ilustraciones en formato SVG, los estilos no utilizados no se exportan. Además, en el código CSS exportado, los estilos gráficos no tienen nombres asociados y puede ser difícil identificar el estilo gráfico correcto.
Illustrator CC ofrece dos características que se han agregado para mejorar la experiencia de trabajar con estilos en formato SVG que abordan estos problemas:
- Nombre de estilo gráfico. Cuando elige exportar estilos gráficos, el nombre de cada estilo se exporta con la definición del estilo en la nomenclatura CSS.
- Exportar estilos no utilizados. Cuando exporta ilustraciones en formato SVG, ahora puede optar por exportar estilos no utilizados. Esto permite que otro diseñador o desarrollador que esté importando los estilos use los estilos gráficos no utilizados en otras piezas de arte.
Cómo lo usarás
Esto ciertamente no es una herramienta para codificar páginas web completas. Lo que veo es usar Illustrator para crear maquetas, luego codificar manualmente la estructura en HTML y el código de diseño en CSS. Cuando se necesita una sombra paralela, gradiente, patrón o incluso logotipo, el uso de estas nuevas opciones de extracción de CSS y SVG será muy útil y ahorrará mucho tiempo.
Si está interesado en obtener más información sobre las nuevas funciones en Illustrator CC, visite la página del producto de Illustrator.
¿Eres un aficionado de Illustrator? ¿Qué características de Illustrator CC le entusiasman más? Háganos saber en los comentarios.