Consellos para traballar con Illustrator. Para deseñadores web que prefiren Photoshop

Consellos para traballar con Illustrator. Aquí tes unha idea tola: deseña o teu próximo proxecto web en Illustrator. Se es un deseñador web principal, é probable que non responda moi ben a esta suxestión. Illustrator simplemente non pode facer todo o que Photoshop pode facer, non?

Non seguramente dese xeito.

Aínda Photoshop converteuse na ferramenta de feito deseño web, Illustrator é máis que capaz de satisfacer as túas necesidades. Grazas ás súas ferramentas de maquetación, adoita ser un programa mellor e máis axeitado para o deseño web.

Dado que a maioría dos profesionais do deseño web non queren pasear por Illustrator buscando probas, compilei unha lista de funcións relacionadas coa web que debes coñecer para comezar a experimentar co deseño web en Illustrator.

Proba algúns destes e garante que comezarás a usar Illustrator como ferramenta estándar no teu fluxo de traballo de deseño web.

1. Primeiro: configura todas as unidades en Píxeles. Consellos para traballar con Illustrator

De forma predeterminada, Illustrator usa métricas unidades para o tamaño de obxectos e puntos para texto. Estas son excelentes opcións para a maioría das situacións de deseño, pero para deseño web probablemente quererás ver píxeles en todas partes. Entón, antes de comezar a traballar en calquera outra cousa, asegúrate de que as túas unidades estean configuradas correctamente.

Para configurar as unidades en píxeles:

1. Abre no menú Editar
2. Seleccione unidades de medida no submenú de configuración.
3. Establece todas as opcións en "píxeles"

2. Cree documentos mediante un perfil de documento web.

 

Cando quere comezar a traballar nun novo deseño, desprácese facilmente pola xanela Novo documento e omita algúns detalles importantes, como dicirlle a Illustrator que planea traballar nun deseño web para que non use cores CMYK. e bordos borrosos do obxecto. Só lembra seleccionar a configuración do perfil de Internet na xanela Novo documento e estarás ben.

3. Activa o aliñamento da cuadrícula de píxeles para os obxectos. Consellos para traballar con Illustrator

Esta función é un salvavidas se algunha vez tivo problemas cos bordos de formas borrosas en Photoshop.

A aliñación da cuadrícula de píxeles axustará os segmentos horizontais e verticais rectos dun obxecto para que se axusten perfectamente á cuadrícula de píxeles, mantendo os segmentos curvos e inclinados suaves. O resultado son formas nítidas e perfectas con píxeles, algo que definitivamente queres no deseño web.

O botón superior ten activado o aliñamento da cuadrícula de píxeles, o que sempre dá como resultado bordos nítidos.

Para activar o aliñamento da cuadrícula de píxeles a nivel de obxecto:

1. Selecciona un obxecto
2. Abre o panel Transformar (Xanela > Transformar).
3. Marque a caixa de verificación "Aliñar á cuadrícula de píxeles" na parte inferior do panel (se non a ves, fai dobre clic no panel para mostrar as opcións)

Nota. O aliñamento da cuadrícula de píxeles está activado de forma predeterminada para todos os obxectos novos creados mediante o perfil do documento web. Non obstante, se estás pegando obxectos doutros ficheiros de Illustrator, terás que axustar manualmente o aliñamento dos píxeles para eles. Consellos para traballar con Illustrator

4. Activa a vista previa de píxeles.

A función de vista previa de píxeles fará que Illustrator se comporte como Photoshop cando escala a túa imaxe por encima do 100 %; en lugar de obter vectores perfectos cada vez, verás os píxeles coma se estiveses a traballar cunha imaxe ráster.

Activar a vista previa de píxeles farache sentir como se estiveses en Photoshop.

Pensa no xenial que é: tes todo o poder dos gráficos vectoriales ao teu alcance e podes ver como se ve o resultado a nivel de píxeles.

Lindo, non?

Activa ou desactiva a vista previa de píxeles

1. Abrir o menú de visualización
2. Seleccione Pixel View.

5. Use as fiestras de obras de arte. Consellos para traballar con Illustrator

Imaxina que dúas cámaras de vídeo están apuntadas ao teu proxecto.

Unha cámara ten un nivel de zoom normal, que mostra o 100 % do teu traballo. A outra cámara ten un nivel de zoom do 400 % e está dirixida a unha icona específica na que estabas traballando.

Do mesmo xeito que un cirurxián, usa a cámara de zoom para facer pequenos cambios de nivel de píxeles na icona, botando unha ollada ocasionalmente á cámara de zoom 100 % para ver o que parece realmente no seu tamaño real.

As fiestras de portada son excelentes cando necesitas traballar con elementos pequenos como iconas; non tes que ampliar e diminuír constantemente para comprobar o aspecto de todo.

Estas son as fiestras de obras de arte: permítenche ver o teu deseño simultaneamente con diferentes niveis de zoom, axustes de cor e outras variacións. Isto é moi útil para o deseño web, especialmente cando traballas con detalles a nivel de píxeles.

Para usar as fiestras de obras de arte:

1. Abre o menú Ventá e selecciona Nova ventá. Illustrator creará unha nova pestana co mesmo documento á vista.
2. Vaia de novo ao menú Ventá, escolla Organizar > Mover todo á xanela. Isto permitirache cambiar tamaño e colocación das fiestras ao lado uns dos outros como consideres oportuno.
3. Experimenta con diferentes niveis de zoom en Windows e comeza a facer algúns cambios para ver como funciona. Consellos para traballar con Illustrator

6. Use símbolos para crear rapidamente botóns, iconas e moito máis.

Cantas veces creaches o mesmo (ou case o mesmo) botón, icona ou widget en Photoshop? Se che gusta o deseño web, probablemente o fagas todos os días.

Illustrator pode axudarche a aforrar tempo e evitar este traballo repetitivo con símbolos.

En esencia, os símbolos son un conxunto infinito de ready-made elementos de deseño, que se pode engadir ao traballo simplemente arrastrando e soltando, e logo modificalo segundo sexa necesario. Isto é ideal para botóns, iconas e outros obxectos estándar que non precisan ser creados desde cero.

Pero hai outra razón pola que os símbolos son poderosos, e chámase instanciación.

Os símbolos non só son cómodos, senón que tamén facilitan a actualización de elementos de deseño repetidos.

 

Esencialmente, sempre que fagas cambios no símbolo orixinal, eses cambios reflíctense inmediatamente en todas as instancias do símbolo que se atopa na túa obra de arte. Necesitas botóns máis grandes no teu sitio web? Só cambia o símbolo. Queres que os campos do formulario teñan un aspecto diferente en cada páxina? Só cambia o símbolo. Enténdese a idea.

Consello: se non queres que isto suceda nunha instancia específica do símbolo como, fai clic co botón dereito do rato no obxecto da túa ilustración e selecciona Romper referencia de símbolos. Isto excluírao das actualizacións automáticas.

Aquí tes un bo vídeo que explica como usar e manipular símbolos:

Usando símbolos en Adobe Illustrator de Adobe TV .

Para usar un símbolo existente:

1. Abre o panel Símbolos desde o menú Ventá.
2. Arrastra o símbolo seleccionado ao teu traballo

Crea un novo símbolo:

1. Crea unha imaxe de símbolo
2. Abre o panel Símbolos desde o menú Ventá.
3. Arrastra unha ilustración ao panel
4. Fai clic en Aceptar no cadro de diálogo para confirmar.

Para editar un símbolo:

1. Abre o panel Símbolos desde o menú Ventá.
2. Fai dobre clic nun símbolo para entrar no modo de edición.
3. Cando remate, fai dobre clic en calquera lugar fóra da imaxe do símbolo para saír do modo de edición.

7. Expande facilmente obxectos coa escala de 9 segmentos. Consellos para traballar con Illustrator

Esta é unha función de simboloxía avanzada que permite definir que partes dun obxecto se estiran durante a escala e cales permanecen sen cambios.

Esquerda: un exemplo de botón estirado con e sen a configuración de zoom de 9 segmentos. Dereita: a configuración de escala de 9 segmentos implica mover 4 guías que indican a Illustrator que partes do obxecto están protexidas e cales se poden escalar.

 

Un exemplo práctico é un botón con esquinas redondeadas; se queres facelo máis longo, non podes estiralo horizontalmente porque iso distorsionará todo o obxecto. Pola contra, terás que mover manualmente os puntos de forma. Coa escala de 9 segmentos, o tramo funciona como pretendías. Consellos para traballar con Illustrator

Para entender realmente como funciona, escoita este estupendo vídeo tutorial de Adobe TV para poñerte ao día rapidamente:

Usando a escala de 9 segmentos con símbolos de Adobe TV .

8. Cantos redondeados por todas partes!

Podes crear un rectángulo redondeado en Photoshop, pero Illustrator permíteche aplicar un efecto de canto redondeado non destrutivo a case calquera obxecto. Que é o efecto non destrutivo? Isto significa que pode acendelo, desactivalo ou cambiar a súa configuración sen afectar ao obxecto orixinal subxacente.

Podes aplicar o efecto de cantos redondeados a case calquera tipo de obxecto e axustalo segundo sexa necesario. Consellos para traballar con Illustrator

Para aplicar o efecto de canto redondeado:

1. Crea un rectángulo ou calquera outro obxecto con esquinas afiadas
2. No menú Efectos, escolla Estilizar > Cantos redondeados.
3. Introduce un raio de esquina e fai clic en Vista previa para ver o que parece.
4. Fai clic en Aceptar para aplicar o efecto.

Para cambiar o efecto de canto redondeado:

1. Selecciona un obxecto con esquinas redondeadas
2. Abre o panel Aparencia desde o menú Ventá.
3. Busca o efecto Cantos redondeados e fai dobre clic nel para cambiar a súa configuración ou fai clic na icona do ollo para activalo ou desactivalo.

9. Creando un recheo rápido cun patrón ráster. Consellos para traballar con Illustrator

Os patróns de fondo sutís son un gran éxito no deseño web, pero moitos deseñadores pensan que non son fáciles de aplicar en Illustrator.

Teño que admitir que non é intuitivo, pero a solución é sinxela.

Para crear un patrón de mapa de bits:

1. Coloca unha imaxe do patrón na túa peza
2. Fai clic en "Inserir" na cinta superior (importante: non funcionará sen ela!)
3. Arrastre un patrón á paleta Mostras
4. Aplique unha mostra a calquera obxecto para enchelo cun patrón

10. Colocación automática de texto arredor de imaxes e obxectos.

Photoshop é coñecido polas súas capacidades de edición de texto moi básicas. Se queres envolver texto nunha imaxe, cómpre crear dous ou tres marcos de texto diferentes e simular o efecto. Consellos para traballar con Illustrator

Afortunadamente, Illustrator te cubriu.

Para envolver texto nunha imaxe:

1. Selecciona a imaxe ou o obxecto ao que queres envolver o texto
2. Abre o menú Obxecto, escolla Texto axustado > Novo.
3. Para establecer a distancia de axuste, abra de novo o menú Axuste de texto e seleccione Opcións de axuste de texto.
4. Move a imaxe sobre o texto para ver o efecto de envolvemento

11. Crea efectos visuais ricos con axustes de aparencia do obxecto. Consellos para traballar con Illustrator

En Illustrator, o panel Apariencia dun obxecto funciona moi parecido aos efectos de capa en Photoshop: pode engadir varios recheos e trazos a un obxecto e, a continuación, xogar cos seus modos de transferencia, opacidade e efectos para obter resultados interesantes.

Este texto é só un único obxecto vectorial, con estilo usando o panel Apariencia e efectos.

O parque infantil é bastante grande: desde sombras, desenfoque e brillo ata texturas, distorsións e 3D. Deste xeito, pode recrear a maioría dos efectos de Photoshop mentres segue a traballar con gráficos vectoriais.

O panel Apariencia é poderoso e divertido; suxíroche que o probes de inmediato ou que vexas o tutorial que aparece a continuación para entender como funciona:

Dominar o panel de aparencia de Adobe TV .

Estás preparado para comezar a experimentar con Illustrator?

A creación de sitios web e interfaces de usuario usando Photoshop converteuse na norma e a maioría dos deseñadores están satisfeitos con esta solución. Consellos para traballar con Illustrator

Pero só porque Photoshop se estendeu tanto non significa que Illustrator non teña nada que ofrecer, todo o contrario. Con ferramentas como o aliñamento da cuadrícula de píxeles, o axuste de texto e a aparencia do obxecto, fai un caso forte.

Combinado con poderoso ferramentas de maquetación e gráficos vectoriales, corte e exportación de imaxes, Illustrator é definitivamente unha opción obvia para os deseñadores web que queren desenvolver sitios web rapidamente.