Krypton Solid

Novedades para diseñadores web en Illustrator CC

Novedades para diseñadores web en Illustrator CC

El 6 de mayo, Adobe anunció las ú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 características nuevas, como bibliotecas de AutoCAD, sobreimpresión en blanco, intercambio de proxy de relleno y trazo para texto, generación automática de esquinas, compatibilidad con índices, archivos de paquetes, imágenes no integradas, ubicación de múltiples archivos, herramientas de tipo táctil, herramientas de transformación gratuitas y imágenes en pinceles. Si eres un adicto a Illustrator, todas estas son características que valen la pena, pero en lo que quiero enfocarme específicamente son las mejoras centrales que ayudarán a cualquiera a crear ilustraciones 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 iconos se veían pixelados y el texto parecía suavizado. La naturaleza misma de Illustrator es proporcionar ilustraciones nítidas y ricas, 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 interfaz de usuario (iconos, cursores, etc.) se verán más suaves. También hicieron algunas mejoras en el proceso de renderizado. Ahora aprovecha las máquinas de varios núcleos y utiliza el renderizado por subprocesos para renderizar las ilustraciones. Debería ver alguna mejora en tareas como hacer zoom, desplazarse, copiar, pegar, arrastrar y soltar, etc.

Mejoras en las guías

Las guías se utilizan ampliamente al planificar y diseñar páginas. La creación de maquetas en Illustrator utilizando guías le permite colocar el 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 las guías (Ctrl / Cmd +;) y luego elige mostrarlas, las guías no se bloquean automáticamente como lo hacían en versiones anteriores.
  • Cree guías horizontales y verticales en una sola acción. He aquí 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 una 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, lo que generalmente no produce los mejores resultados de inmediato. Además, la búsqueda y exploración de una gran cantidad de fuentes puede resultar 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 maquetas fácilmente utilizando las mismas fuentes que desea utilizar en la web.

Mejoras en la búsqueda de color

Encontrar un color particular entre una gama de numerosos colores puede llevar mucho tiempo y resultar frustrante. En Illustrator CC, se han realizado cambios para facilitar 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. Al hacer clic en Muestras de color, aparece una barra de búsqueda debajo de la lista predefinida de colores. 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. Al escribir R = 77, se mostrarán todas las muestras de color que tienen color rojo con un valor de 77 en la escala RGB. El widget de búsqueda está habilitado de forma predeterminada.

También se ha mejorado la opción de búsqueda en el Panel de muestras. El campo no impone un autocompletado. Los caracteres que escribe ya no se sustituyen automáticamente por el color más parecido encontrado. Puede escribir el nombre de un color o simplemente escribir los valores del color RGB (o CMYK para imprimir) para buscar si existe tal combinación de colores. El campo de búsqueda no está habilitado de forma predeterminada y debe habilitarse por primera vez desde el submenú del panel.

También vale la pena señalar que Kuler se ha incorporado a Illustrator. Entonces, si usa este servicio de Adobe para crear temas y grupos de colores, puede acceder fácilmente a este contenido directamente dentro de Illustrator CC.

Panel de propiedades CSS

Por supuesto, la característica más importante de la web son las mejoras realizadas en los flujos de trabajo CSS y SVG. Ahora bien, si eres un usuario incondicional de Illustrator, 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 funciones recuerdan lo que ya está disponible para Photoshop CS6 a través de las actualizaciones de Creative Cloud y las funciones que se encuentran en Fireworks CS6.

El Panel de propiedades de CSS es la forma en que extraerá el CSS del documento de Illustrator y proporciona varias formas de hacerlo. Sin embargo, el paso clave para hacer que todo esto funcione es nombrar 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 se está abriendo a una forma desorganizada y potencialmente descuidada de generar código. Básicamente, así es como 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 apariencias compatibles con CSS, como degradados y esquinas redondeadas.

pic2

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 CSS, que es el primero de los cuatro botones en la parte inferior derecha del panel. El panel proporciona varias funciones para los flujos de trabajo CSS:

  • Ver el CSS de un objeto seleccionado
  • Copiar código CSS para un objeto seleccionado
  • Exportar el objeto seleccionado a un archivo CSS junto con las imágenes utilizadas en CSS
  • Exportar código CSS para todos los objetos del 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 tenga el nombre correcto en el Panel de capas. Con esta opción, 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, tendría que guardar un documento como SVG. Aquí, en la actualización de CC, tiene la capacidad de copiar algo dentro del documento, luego ir a su editor HTML favorito y simplemente pegar; todo el código SVG se colocará dentro del documento. Es un flujo de trabajo sorprendentemente agradable. Si eso no es suficiente 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, a menudo creará varios estilos gráficos mientras crea ilustraciones. No puede utilizar 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 resultar difícil identificar el estilo gráfico correcto.

Illustrator CC ofrece dos funciones que se han agregado para mejorar la experiencia de trabajar con estilos en formato SVG que abordan estos problemas:

  • Nombre del 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.
  • Exporta 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 utilice los estilos gráficos no utilizados en otras obras de arte.
pic3

Cómo lo usarás

Ciertamente, esta 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, un degradado, un patrón o incluso un 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 de Illustrator CC, visite la página del producto de Illustrator.

¿Eres aficionado a Illustrator? ¿Qué funciones de Illustrator CC te entusiasman más? Háznoslo saber en los comentarios.

Deja un comentario