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.
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:
Después de establecer un filtro, haga clic en Aceptar en el panel Aplicar filtro SVG.
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.
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:
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.
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 […]
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 […]
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 […]
Cuando tenga texto en su proyecto de Adobe XD, puede comenzar a cambiar las propiedades del texto. Estas propiedades incluyen Familia de fuentes, Tamaño de fuente, Grosor de fuente, Alineación, Espaciado de caracteres (interletraje y seguimiento), Interlineado (interlineado), Relleno, Borde (trazo), Sombra (sombra paralela) y Desenfoque de fondo. Así que revisemos cómo se aplican esas propiedades. Acerca de la legibilidad y la fuente […]
Puede utilizar InDesign para crear y modificar gráficos de códigos QR. Los códigos QR son una forma de código de barras que puede almacenar información como palabras, números, URL u otras formas de datos. El usuario escanea el código QR usando su cámara y software en un dispositivo, como un teléfono inteligente, y el software hace uso […]
Al igual que en Adobe Illustrator, las mesas de trabajo de Photoshop brindan la capacidad de crear páginas o pantallas separadas dentro de un documento. Esto puede resultar especialmente útil si está creando pantallas para una aplicación móvil o un folleto pequeño. Puede pensar en una mesa de trabajo como un tipo especial de grupo de capas creado mediante el panel Capas. Su […]
Envolver texto en Adobe Illustrator CC no es lo mismo que envolver un regalo, ¡es más fácil! Un ajuste de texto obliga al texto a ajustarse a un gráfico, como se muestra en esta figura. Esta característica puede agregar un poco de creatividad a cualquier pieza. El gráfico está obligando al texto a envolverlo. Primero, crea […]
Al diseñar en Adobe Illustrator CC, a menudo necesita que una forma tenga un tamaño exacto (por ejemplo, 2 x 3 pulgadas). Después de crear una forma, la mejor manera de cambiar su tamaño a medidas exactas es usar el panel Transformar, que se muestra en esta figura. Seleccione el objeto y luego elija Ventana → Transformar a […]
Aprenda a aplicar transparencia a gráficos SVG en Illustrator. Explore cómo generar archivos SVG con fondos transparentes y aplicar efectos de transparencia.
Una vez que ha importado sus imágenes a Adobe XD, no tiene mucho control de edición, pero puede cambiar el tamaño y rotar las imágenes como lo haría con cualquier otra forma. También puede redondear fácilmente las esquinas de una imagen importada utilizando los widgets de esquina. Enmascarar sus imágenes mediante la definición de una forma cerrada […]
