Consejos para trabajar con Illustrator. Para diseñadores web que prefieren Photoshop

Consejos para trabajar con Illustrator. Aquí tienes una idea loca: diseña tu próximo proyecto web en Illustrator. Si es diseñador web principal, es probable que no responda muy bien a esta sugerencia. Illustrator simplemente no puede hacer todo lo que Photoshop puede hacer, ¿verdad?

No exactamente

Aunque Photoshop se ha convertido en la herramienta de facto diseño web, Illustrator es más que capaz de satisfacer sus necesidades. Gracias a sus herramientas de diseño, suele ser un programa mejor y más adecuado para el diseño web.

Dado que la mayoría de los profesionales del diseño web no quieren deambular por Illustrator buscando evidencia, he compilado una lista de características relacionadas con la web que necesita conocer para comenzar a experimentar con el diseño web en Illustrator.

Pruebe algunos de estos y le garantizo que comenzará a utilizar Illustrator como herramienta estándar en su flujo de trabajo de diseño web.

1. Lo primero es lo primero: configure todas las unidades en Píxeles. Consejos para trabajar con Illustrator

Por defecto, Illustrator usa métricas. unidades para tamaños de objetos y puntos para texto. Éstas son excelentes configuraciones para la mayoría de situaciones de diseño, pero para diseño web probablemente querrás ver píxeles por todas partes. Entonces, antes de comenzar a trabajar en cualquier otra cosa, asegúrese de que sus unidades estén configuradas correctamente.

Para configurar las unidades en píxeles:

1. Abrir en el menú Editar
2. Seleccione unidades de medida en el submenú de configuración.
3. Establece todas las opciones en "píxeles"

2. Cree documentos utilizando un perfil de documento web.

 

Cuando desee comenzar a trabajar en un nuevo diseño, desplácese fácilmente por la ventana Nuevo documento y omita algunos detalles importantes, como decirle a Illustrator que planea trabajar en un diseño web para no usar colores CMYK. y bordes borrosos del objeto. Sólo recuerde seleccionar la configuración del perfil de Internet en la ventana Nuevo documento y estará bien.

3. Habilite la alineación de la cuadrícula de píxeles para los objetos. Consejos para trabajar con Illustrator

Esta función le salvará la vida si alguna vez ha tenido problemas con los bordes de formas borrosas en Photoshop.

La Alineación de cuadrícula de píxeles ajustará los segmentos rectos horizontales y verticales de un objeto para que se ajusten perfectamente a la cuadrícula de píxeles, mientras mantiene suaves los segmentos curvos e inclinados. El resultado son formas nítidas y con píxeles perfectos, algo que definitivamente deseas en el diseño web.

El botón superior tiene habilitada la alineación de la cuadrícula de píxeles, lo que siempre da como resultado bordes nítidos.

Para habilitar la alineación de la cuadrícula de píxeles a nivel de objeto:

1. Seleccionar objeto
2. Abra el panel Transformar (Ventana > Transformar).
3. Marque la casilla de verificación "Alinear con la cuadrícula de píxeles" en la parte inferior del panel (si no la ve, haga doble clic en el panel para mostrar las opciones)

Nota. La alineación de la cuadrícula de píxeles está habilitada de forma predeterminada para todos los objetos nuevos creados utilizando el perfil de documento web. Sin embargo, si está pegando objetos de otros archivos de Illustrator, deberá ajustar manualmente la alineación de píxeles. Consejos para trabajar con Illustrator

4. Active la vista previa de píxeles.

La función Vista previa de píxeles hará que Illustrator se comporte como Photoshop al escalar su imagen por encima del 100%; en lugar de obtener vectores perfectos cada vez, verá los píxeles como si estuviera trabajando con una imagen rasterizada.

Activar la vista previa de píxeles te hará sentir como si estuvieras en Photoshop.

Piensa en lo genial que es: tienes todo el poder de los gráficos vectoriales a tu alcance y puedes ver cómo se ve el resultado a nivel de píxeles.

Genial, ¿no?

Activar o desactivar la vista previa de píxeles

1. Abrir menú de vista
2. Seleccione Vista de píxeles.

5. Utilice ventanas de ilustraciones. Consejos para trabajar con Illustrator

Imagine que dos cámaras de video apuntan a su proyecto.

Una cámara tiene un nivel de zoom normal, mostrando el 100% de tu trabajo. La otra cámara tiene un nivel de zoom del 400% y apunta a un ícono específico en el que estabas trabajando.

Como un cirujano, utiliza la cámara con zoom para realizar pequeños cambios a nivel de píxeles en el ícono, y de vez en cuando mira la cámara con zoom del 100% para ver cómo se ve realmente en su tamaño real.

Las ventanas de portada son excelentes cuando necesitas trabajar con elementos pequeños como íconos; no tienes que acercarte y alejarte constantemente para comprobar cómo se ve todo.

Estas son ventanas de ilustraciones: le permiten ver su diseño simultáneamente con diferentes niveles de zoom, configuraciones de color y otras variaciones. Esto es muy útil para el diseño web, especialmente cuando se trabaja con detalles a nivel de píxeles.

Para utilizar ventanas de ilustraciones:

1. Abra el menú Ventana, luego seleccione Nueva ventana. Illustrator creará una nueva pestaña con el mismo documento a la vista.
2. Vaya nuevamente al menú Ventana, elija Organizar > Mover todo a la ventana. Esto le permitirá cambiar Tamaño y ubicación de las ventanas. uno al lado del otro como mejor le parezca.
3. Experimente con diferentes niveles de zoom en Windows y comience a realizar algunos cambios para ver cómo funciona. Consejos para trabajar con Illustrator

6. Utilice símbolos para crear rápidamente botones, íconos y más.

¿Cuántas veces has creado el mismo (o casi el mismo) botón, icono o widget en Photoshop? Si te gusta el diseño web, probablemente lo hagas todos los días.

Illustrator puede ayudarle a ahorrar tiempo y evitar este trabajo repetitivo con símbolos.

En esencia, los símbolos son un conjunto interminable de elementos ya preparados. elementos de diseño, que se puede agregar al trabajo simplemente arrastrando y soltando, y luego modificando según sea necesario. Esto es ideal para botones, íconos y otros objetos estándar que no necesitan crearse desde cero.

Pero hay otra razón por la que los símbolos son poderosos y se llama creación de instancias.

Los símbolos no sólo son convenientes, sino que también facilitan la actualización de elementos de diseño repetidos.

 

Básicamente, cada vez que realiza cambios en el símbolo original, esos cambios se reflejan inmediatamente en todas las instancias del símbolo que se encuentran en su obra de arte. ¿Necesita botones más grandes en su sitio web? Simplemente cambia el símbolo. ¿Quieres que los campos de tu formulario se vean diferentes en cada página? Simplemente cambia el símbolo. Entiendes la idea.

Consejo: Si no desea que esto suceda con una instancia específica del símbolo as, haga clic derecho en el objeto en su ilustración y seleccione Romper referencia de símbolo. Esto lo excluirá de las actualizaciones automáticas.

Aquí hay un buen video que explica cómo usar y manipular símbolos:

Usando símbolos en Adobe Illustrator de televisión de adobe .

Para utilizar un símbolo existente:

1. Abra el panel Símbolos desde el menú Ventana.
2. Arrastra el símbolo seleccionado a tu trabajo.

Crea un nuevo símbolo:

1. Crear una imagen de símbolo
2. Abra el panel Símbolos desde el menú Ventana.
3. Arrastra una ilustración al panel.
4. Haga clic en Aceptar en el cuadro de diálogo para confirmar.

Para editar un símbolo:

1. Abra el panel Símbolos desde el menú Ventana.
2. Haga doble clic en un símbolo para ingresar al modo de edición.
3. Cuando termine, haga doble clic en cualquier lugar fuera de la imagen del símbolo para salir del modo de edición.

7. Amplíe objetos fácilmente con una escala de 9 segmentos. Consejos para trabajar con Illustrator

Esta es una característica de simbología avanzada que le permite definir qué partes de un objeto se estiran durante el escalado y cuáles permanecen sin cambios.

Izquierda: un ejemplo de un botón alargado con y sin la configuración de zoom de 9 segmentos. Derecha: la configuración de escala de 9 segmentos implica mover 4 guías que le indican a Illustrator qué partes del objeto están protegidas y qué partes se pueden escalar.

 

Un ejemplo práctico es un botón con esquinas redondeadas; si desea alargarlo, no puede simplemente estirarlo horizontalmente porque eso distorsionaría todo el objeto. En su lugar, tendrás que mover manualmente los puntos de la forma. Con una escala de 9 segmentos, el estiramiento funciona según lo previsto. Consejos para trabajar con Illustrator

Para comprender realmente cómo funciona, escuche este excelente video tutorial de Adobe TV para ponerse al día rápidamente:

Usar escala de 9 segmentos con símbolos de televisión de adobe .

8. ¡Esquinas redondeadas por todas partes!

Puedes crear un rectángulo redondeado en Photoshop, pero Illustrator te permite aplicar un efecto de esquina redondeada no destructivo a casi cualquier objeto. ¿Qué es el efecto no destructivo? Esto significa que puede activarlo, desactivarlo o cambiar su configuración sin afectar el objeto original subyacente.

Puedes aplicar el efecto de esquinas redondeadas a casi cualquier tipo de objeto y ajustarlo según sea necesario. Consejos para trabajar con Illustrator

Para aplicar el efecto de esquina redondeada:

1. Crea un rectángulo o cualquier otro objeto con esquinas afiladas.
2. En el menú Efectos, elija Estilizar > Esquinas redondeadas.
3. Ingrese un radio de esquina y haga clic en Vista previa para ver cómo se ve.
4. Haga clic en Aceptar para aplicar el efecto.

Para cambiar el efecto de esquina redondeada:

1. Seleccione un objeto con esquinas redondeadas
2. Abra el panel Apariencia desde el menú Ventana.
3. Busque el efecto Esquinas redondeadas y haga doble clic en él para cambiar su configuración, o haga clic en el icono del ojo para activarlo o desactivarlo.

9. Crear un relleno rápido con un patrón rasterizado. Consejos para trabajar con Illustrator

Los patrones de fondo sutiles son un gran éxito en el diseño web, pero muchos diseñadores piensan que no son fáciles de aplicar en Illustrator.

Debo admitir que no es intuitivo, pero la solución es sencilla.

Para crear un patrón de mapa de bits:

1. Coloca una imagen del patrón en tu pieza.
2. Haga clic en "Insertar" en la cinta superior (importante: ¡no funcionará sin ella!)
3. Arrastre un patrón a la paleta Muestras
4. Aplicar una muestra a cualquier objeto para rellenarlo con un patrón.

10. Colocación automática de texto alrededor de imágenes y objetos.

Photoshop es conocido por sus capacidades muy básicas de edición de texto. Si desea ajustar texto alrededor de una imagen, debe crear dos o tres marcos de texto diferentes y simular el efecto. Consejos para trabajar con Illustrator

Afortunadamente, Illustrator lo tiene cubierto.

Para ajustar texto alrededor de una imagen:

1. Seleccione la imagen u objeto alrededor del cual desea ajustar el texto
2. Abra el menú Objeto, elija Ajustar texto > Nuevo.
3. Para establecer la distancia de ajuste, abra el menú Ajuste de texto nuevamente y seleccione Opciones de ajuste de texto.
4. Mueve la imagen sobre el texto para ver el efecto envolvente.

11. Cree ricos efectos visuales con la configuración de apariencia de los objetos. Consejos para trabajar con Illustrator

En Illustrator, el panel Apariencia de un objeto funciona de manera muy similar a los efectos de capa en Photoshop: puede agregar múltiples rellenos y trazos a un objeto y luego jugar con sus modos de transferencia, opacidad y efectos para obtener resultados interesantes.

Este texto es solo un objeto vectorial, diseñado usando el panel Apariencia y Efectos.

El campo de juego es bastante grande: desde sombras paralelas, desenfoque y brillo hasta texturas, distorsión y 3D. De esta manera puedes recrear la mayoría de los efectos de Photoshop mientras sigues trabajando con gráficos vectoriales.

El panel Apariencia es poderoso y divertido. Te animo a que lo pruebes de inmediato o mires el tutorial a continuación para comprender cómo funciona:

Dominar el panel de apariencia de televisión de adobe .

¿Estás listo para empezar a experimentar con Illustrator?

La creación de sitios web e interfaces de usuario con Photoshop se ha convertido en la norma y la mayoría de los diseñadores están contentos con esta solución. Consejos para trabajar con Illustrator

Pero sólo porque Photoshop se haya extendido tanto no significa que Illustrator no tenga nada que ofrecer, sino todo lo contrario. Con herramientas como la alineación de la cuadrícula de píxeles, el ajuste de texto y la apariencia de los objetos, es un caso sólido.

Combinado con potente herramientas de diseño y gráficos vectoriales, corte y exportación de imágenes, Illustrator es definitivamente una opción obvia para los diseñadores web que desean desarrollar sitios web rápidamente.