Cómo exportar estilos CSS desde Illustrator


Illustrator se ha convertido en uno de los mejores aliados de los diseñadores web de estos tiempos, sobre todo después de 2013, cuando salió a la luz Illustrator CC y se le abrieron nuevas puertas tanto a diseñadores como a desarrolladores.

¿Por qué digo esto? Porque ahora Illustrator permite no sólo diseñar una página web o sus elementos, sino además exportar su código CSS, o sea, la apariencia que poseen el texto, las imágenes, etc, lo cual puede hacerse lo mismo de forma individual, que para todo el conjunto.

Esto es sin dudas un alivio para diseñadores y desarrolladores, pues los estilos de la página siempre han sido un punto de discordia entre ambos: el diseñador aspira a que el resultado final quede tal cual lo diseñó, y al desarrollador a veces le resulta difícil o tedioso replicar el aspecto y posición exactos de los componentes del diseño.

Hoy vengo a mostrarte paso a paso cómo utilizar las herramientas que Illustrator pone a nuestra disposición para obtener y exportar estilos CSS, con lo cual te ahorrarás tiempo y preocupaciones.

¿Cómo conseguirlo?

Utilizando el panel Propiedades CSS, desde el cual puedes ver los estilos que poseen los objetos de tu diseño, además de copiarlos o exportarlos, así como exportar imágenes rasterizables o generar un código CSS específico para un navegador.

Ahora verás cómo puedes hacerlo en sólo tres sencillos pasos:

1. Abre el panel de Propiedades CSS

Selecciona Ventana > Propiedades CSS para acceder al panel, pero antes asegúrate de asignarle un nombre a cada uno de los elementos de tu diseño en el panel Capas, aunque también puedes hacer clic en las Opciones de Exportación, seleccionando finalmente la casilla Generar CSS para objetos sin nombre.

A: Menú desplegable
B: Opciones de exportación
C: Exportar CSS seleccionado
D: Copiar estilo seleccionado
E: Generar CSS

2. Genera el código

Notarás que cuando seleccionas un objeto, su código CSS aparece en el panel Propiedades, pero si quieres seleccionar más de uno sólo, debes mantener presionada la tecla Mayúscula (Shift). No obstante, si lo que deseas es seleccionar todos los elementos, presiona Ctrl + A (Windows) o Cmd + A (Mac OS).

Luego, en cualquiera de los casos, haz clic en el botón Generar CSS, que se encuentra en la esquina inferior derecha del panel, y verás cómo aparece el código generado.

Mira aquí el ejemplo de un rectángulo redondeado al que se le aplicó un degradado:

Si deseas copiar el código hacia el portapapeles para pegarlo en otro documento, sólo debes hacer clic en el menú desplegable del panel y seleccionar la opción Copiar estilo seleccionado, con lo cual tendrás a tu disposición el estilo de todo el diseño o del objeto que hayas marcado previamente.

3. Exporta

Puedes exportar tanto el estilo de un objeto, como el de todo el conjunto, de forma tal que resulten en un archivo .css. Para ello sólo debes hacer clic en el menú desplegable y seleccionar Exportar todo si se trata del diseño completo, o bien Exportar CSS seleccionado si lo que deseas es obtener el código de un único elemento, el cual debes haber marcado con antelación.

En ambos casos notarás que aparecen las Opciones de exportación para que especifiques o ratifiques el contenido del código que deseas exportar, y aquí tendrás toda una serie de posibilidades para escoger con exactitud cómo deseas hacerlo:

Como puedes ver, tienes la posibilidad de escoger no sólo entre las opciones de aspecto, tamaño y posición, sino que además puedes especificar las correcciones que deben incluirse en el código para uno o varios navegadores, así como la opción de rasterizar la imagen para que pueda desplegarse mejor y verse con más calidad en los dispositivos de salida (pantallas, impresoras, etc).

Conclusiones

El hecho de que puedas exportar los estilos de tus diseños, facilitará tu trabajo y el del desarrollador, quien de seguro también lo agradecerá.

No obstante, y aunque todo esto te aportará la seguridad de que el resultado final del proceso de desarrollo mantendrá una gran fidelidad con lo que diseñaste, no olvides sentarte con el desarrollador a revisar los detalles, pues en el mundo del diseño web el recurso más importante eres tú mismo(a).

Hasta aquí este sencillo tutorial, ¿Lo has puesto ya en práctica? ¿En caso positivo, lo has hecho con diseños complejos?

  • Gabriel Pérez Carballo

    Que pasa que no actualizan el sitio desde hace un mes???

    • Dimitri Lopez

      Hola Gabriel, estamos actualizando el sitio completo y estamos en las fases finales, en los proximos dias estaremos subiendo la version nueva, y contenido que no se a publicado. Gracias por preguntar y por tu interes en el proyecto. Saludos!
      – Dimitri