Exportando CSS con Illustrator

Por experiencia sabemos que uno de los puntos de discordia en cualquier proyecto son los estilos, pues 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. No obstante, Adobe Illustrator nos permite resolver este problema, y hoy vengo a explicarte cómo.

¿Sabías que puedes exportar el código CSS de tus diseños? Así es desde que salió a la luz Illustrator CC, cuyo panel Propiedades CSS nos permite ver, copiar o exportar estilos, así como exportar imágenes rasterizables o generar un código CSS específico para un navegador.

Ahora verás lo sencillo que es:

  1. Abre el panel de Propiedades CSS

Para evitar confusiones, asegúrate de haberle asignado un nombre cada elemento del diseño, y luego selecciona Ventana > Propiedades CSS para acceder al panel:

propiedades

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

  1. Genera el código

Por defecto aparecerá el código CSS del objeto que tienes seleccionado, pero si quieres seleccionar más de uno sólo debes mantener presionada la tecla Mayús. Para seleccionarlos todos presiona Ctrl A (Windows) o Cmd A (Mac OS).

Luego haz clic en el botón Generar CSS que aparece en la esquina inferior derecha del panel, y verás cómo aparece el código generado. Si deseas copiarlo hacia el portapapeles sólo debes hacer clic en el menú desplegable del panel y seleccionar la opción de Copiar estilo seleccionado.

Como ejemplo aquí tienes el código de una composición sencilla que incluye tipografía, imagen y un trazado de fondo al que se le aplicó un degradado:

example

Y ahora mira cómo queda en un navegador:

navegador

  1. Exporta

Ya sólo te queda 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:

exportar

Aquí tienes toda una serie de posibilidades para escoger cómo deseas exportar tu diseño, y una vez que pulsas OK sólo te resta especificar dónde guardarás tu trabajo, el cual resultará en un archivo .css que de seguro el programador agradecerá.

Y ya has terminado, ¿ves qué sencillo? No obstante, siempre recuerda revisar los detalles en el proceso de desarrollo, pues nada es tan preciso como tu mirada a la hora de revisar estilos. Como ya te dije una vez, en el mundo del diseño el recurso más importante eres tú mismo/a. ¡Hasta la próxima!

Share

2 thoughts on “Exportando CSS con Illustrator

  1. Hola, mi pregunta se va un poco del tema, pero no encuentro una seccion mas adecuada… estoy desarrollando un videojuego y me preguntaba si conocen a algun dibujante/diseñador interesado en participar… el arte del juego es en 2D y estilo pixelart.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *