Hoja de referencia de Adobe Illustrator CC para una familia hoy

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.
    Hoja de referencia de Adobe Illustrator CC para una familia hoy

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.


Cómo utilizar Kuler para buscar y compartir temas de color en Photoshop CS6

Cómo utilizar Kuler para buscar y compartir temas de color en Photoshop CS6

Aprende a utilizar Kuler para buscar y compartir temas de color en Photoshop CS6, una herramienta esencial para tus proyectos gráficos.

Mostrar y ocultar guías y cuadrículas de InDesign CS5

Mostrar y ocultar guías y cuadrículas de InDesign CS5

Aprenda cómo utilizar las cuadrículas y guías de InDesign CS5 para alinear elementos de manera efectiva. Maximice su diseño utilizando las funcionalidades avanzadas de esta herramienta de diseño gráfico.

Formas y polígonos en InDesign

Formas y polígonos en InDesign

Descubre cómo utilizar las herramientas de dibujo en InDesign para crear formas y polígonos con precisión. Aprende técnicas esenciales y tips para mejorar tus publicaciones.

Cómo crear y guardar una ruta en el panel de rutas en Photoshop CS6

Cómo crear y guardar una ruta en el panel de rutas en Photoshop CS6

Aprende cómo crear y guardar rutas en Adobe Photoshop CS6. Descubre la importancia de convertir tu ruta de trabajo en una ruta guardada para evitar pérdidas.

Cómo guardar un estilo de párrafo en Adobe InDesign Creative Suite 6

Cómo guardar un estilo de párrafo en Adobe InDesign Creative Suite 6

Aprenda a crear y guardar estilos de párrafo en Adobe InDesign CS6 para optimizar su flujo de trabajo y facilitar la edición de su contenido.

Cómo cambiar el ancho y el tipo de un trazo en Illustrator CC

Cómo cambiar el ancho y el tipo de un trazo en Illustrator CC

Aprende a cambiar el ancho y el tipo de trazo en Illustrator CC con este tutorial completo que incluye la personalización de tapas, uniones y líneas discontinuas.

Ver comentarios en documentos PDF de Acrobat CS5

Ver comentarios en documentos PDF de Acrobat CS5

Aprende a ver y administrar los comentarios en documentos PDF utilizando Adobe Acrobat Creative Suite 5. Descubre los métodos más efectivos y eficaces para colaborar con revisores.

Captura de pantalla de una sección de un archivo PDF

Captura de pantalla de una sección de un archivo PDF

Puede utilizar la herramienta Instantánea en Adobe Acrobat CS5 para seleccionar tanto texto como imágenes y crear una imagen de un área determinada dentro de un archivo PDF. El resultado se conoce comúnmente como una captura de pantalla de una sección dentro de un archivo PDF. El resultado es una imagen y su texto no es […]

Medición, recuento y análisis de píxeles en Photoshop CC

Medición, recuento y análisis de píxeles en Photoshop CC

Diseñado para investigadores y científicos, las capacidades de medición en Photoshop CC son bastante poderosas. Puede medir casi cualquier cosa y contar el número de lo que sea en una imagen técnica, tal vez desde un microscopio o telescopio. Si conoce el tamaño exacto de cualquier elemento en una imagen, puede descubrir casi cualquier cosa […]

Las herramientas Licuar en Adobe CS5 Illustrator

Las herramientas Licuar en Adobe CS5 Illustrator

Cuando utiliza las herramientas Licuar en Adobe Creative Suite 5 (Adobe CS5) Illustrator, puede doblar objetos (hacerlos ondulados, pegajosos o puntiagudos) creando distorsiones simples o complejas. Las herramientas Licuar pueden lograr todo tipo de distorsiones creativas o extravagantes (dependiendo de cómo se mire) en sus objetos. Usted […]