Hoja de referencia de Adobe Illustrator CC para una familia hoy

Muchos de los cambios más dramáticos en la forma en que se utiliza Illustrator se están produciendo en el ámbito de la traducción de imágenes vectoriales a la web, y el formato SVG subestimado es el vínculo clave en ese proceso. Los archivos SVG mantienen las preciadas características de escalabilidad de las ilustraciones vectoriales y son compatibles casi universalmente en sitios web y entornos de desarrollo web. Cuando prepara ilustraciones vectoriales para la web, es importante evitar los efectos estándar de Illustrator y, en su lugar, utilizar filtros SVG.

Illustrator viene con un conjunto decente pero minimalista de filtros SVG, pero aquí hay algunos consejos sobre cómo encontrar y agregar filtros SVG, así como recursos para crear sus propios filtros SVG. Para aquellos que trabajan con desarrolladores web y de aplicaciones, haga sus vidas más fáciles y productivas consultando la hoja de trucos para entregar el código SVG.

Cómo aplicar filtros SVG en Illustrator

Cuando crea archivos SVG para pantallas en Illustrator y desea aplicar efectos (como sombras paralelas), debe aplicarlos como filtros SVG. De esa manera, sus archivos SVG conservan una escalabilidad infinita sin distorsión.

Los siguientes pasos lo guían a través de la aplicación de un filtro SVG a los gráficos en Illustrator:

Seleccione los objetos a los que está aplicando el filtro.

Elija Efecto → Filtros SVG.

Seleccione un filtro de la lista que aparece.
La mayoría de los filtros tienen nombres descriptivos. Por ejemplo, los que tienen sombra en el nombre son sombras paralelas, los que tienen gaussiano en el nombre son desenfoques gaussianos. El flujo de trabajo es un poco extraño y indirecto, pero primero debe seleccionar un filtro para acceder a todas las opciones disponibles para aplicar uno.

Para cambiar el filtro seleccionado:

• Mantenga seleccionado el objeto al que se aplicó el filtro y abra el panel Apariencia eligiendo Ventana → Apariencia.
• En el panel Apariencia, haga clic en el filtro SVG que aparece en la sección Relleno del panel. Se abre el panel Aplicar filtro SVG.
• En el panel Aplicar filtro SVG, cambie el filtro aplicado.
• Para ver cómo se verá el filtro, seleccione la casilla de verificación Vista previa, como se muestra en la figura.
  

Después de establecer un filtro, haga clic en Aceptar en el panel Aplicar filtro SVG.

Cómo agregar filtros SVG a Illustrator

El conjunto de filtros SVG de Illustrator es minimalista, pero puede mejorarlo diseñando sus propios filtros o descargando conjuntos preempaquetados de filtros SVG de fuentes en línea. Diseñar filtros implica codificar, pero es factible si se siente cómodo con HTML. Recomiendo el tutorial en w3Schools para crear filtros SVG. O puede comprar conjuntos de filtros en línea, e incluso encontrar algunos buenos conjuntos de filtros SVG gratuitos en Creatingo .

Después de comprar o crear sus propios filtros SVG, así es como los instala en Illustrator:

Elija Efecto → Filtros SVG → Importar filtro SVG.

En el cuadro de diálogo que se abre, navegue y haga doble clic en el archivo de filtros SVG que creó o descargó de forma gratuita.
El archivo que está buscando debe ser un archivo SVG (se incluyen varios filtros en un solo archivo SVG).
Sus nuevos filtros ahora están disponibles en el submenú Filtros SVG.

Elija Efecto → Filtros SVG para aplicar sus nuevos filtros a los objetos seleccionados.

Cómo transferir código SVG de Illustrator a un desarrollador

A menudo, los gráficos SVG que crea en Illustrator se entregan a diseñadores de juegos, animadores, infografías u otros resultados, donde los desarrolladores trabajarán con el código detrás del gráfico SVG. Como ilustrador, no necesita saber cómo crear ese código, pero es posible que deba saber cómo obtenerlo y entregárselo a un desarrollador. Así es cómo.

El camino para exportar sus gráficos SVG como código se ejecuta a través de las funciones Guardar de Illustrator. El menú Guardar tiene opciones (no fáciles de encontrar) que exportan su archivo como código SVG. Es probable que desee estar en comunicación en tiempo real con el desarrollador de su pantalla mientras genera ese código porque varias opciones están determinadas por cómo se usará ese código:

Elija Archivo → Guardar (o Guardar como si está volviendo a guardar un archivo).

En el cuadro de diálogo que se abre, seleccione SVG en el menú Formato.
Ignore la opción de archivo SVGZ, que es para un archivo comprimido que no se muestra en los navegadores.

Haga clic en Guardar para abrir el cuadro de diálogo Opciones de SVG.

Elija siempre SVG 1.1 en el menú desplegable Perfiles SVG. Otras versiones están obsoletas.

Si tiene imágenes incrustadas o vinculadas en su archivo SVG, elija Incrustar en el menú desplegable Ubicaciones de imágenes. Sin embargo, primero consulte con su desarrollador web sobre esta opción.

Seleccione Conservar las capacidades de edición de Illustrator para que el archivo sea editable en Illustrator.
Esta opción aumenta el tamaño del archivo, pero le permite trabajar con un solo archivo SVG que puede editar, actualizar y compartir con desarrolladores web.

Si se muestra el botón Más opciones, haga clic en él para acceder a las opciones avanzadas. y haga sus selecciones.
Esencialmente, las diferentes opciones generan CSS con su archivo que define propiedades de las siguientes maneras. Consulte con su compañero de equipo de desarrolladores web sobre cómo definir estas propiedades CSS:

• Atributos de presentación incrusta el estilo en el código SVG. Esta opción es la más sencilla y la predeterminada. Úselo si no está colaborando con un desarrollador web o de aplicaciones.
• Las dos opciones de atributos de estilo se basan en CSS para administrar el estilo siempre que sea posible.
• Style Elements genera selectores de estilo de clase para diseñar.
• La opción Incluir estilos no utilizados genera código que probablemente aumenta el tamaño del archivo SVG sin agregar valor funcional.

Deseleccione las cinco casillas de verificación en la parte inferior del cuadro de diálogo Opciones de SVG, a menos que su socio desarrollador solicite que las seleccione.
Estas opciones son para aplicaciones altamente especializadas.

Para generar código SVG en función de las selecciones que realice en el cuadro de diálogo Opción SVG, haga clic en el botón Código SVG .
El código SVG generado se muestra en el editor de texto de su sistema operativo. Puede guardar ese código como un archivo de texto usando el editor de texto de su sistema operativo y entregar el archivo a un desarrollador.

Una vez que haya generado el código, haga clic en Aceptar para guardar su archivo.
Puede volver a abrir y editar este archivo en Illustrator.