Dicas para trabalhar com o Illustrator. Para web designers que preferem Photoshop

Dicas para trabalhar com o Illustrator. Aqui está uma ideia maluca: crie seu próximo projeto web no Illustrator. Se você é um web designer primário, é provável que não responda muito bem a esta sugestão. O Illustrator simplesmente não pode fazer tudo o que o Photoshop pode fazer, certo?

Não exatamente.

Embora Photoshop se tornou a ferramenta de fato web design, o Illustrator é mais do que capaz de atender às suas necessidades. Graças às suas ferramentas de layout, muitas vezes é um programa melhor e mais adequado para web design.

Como a maioria dos profissionais de web design não quer passear pelo Illustrator em busca de evidências, compilei uma lista de recursos relacionados à web que você precisa conhecer para começar a experimentar web design no Illustrator.

Experimente alguns deles e garanto que você começará a usar o Illustrator como ferramenta padrão em seu fluxo de trabalho de web design.

1. Comecemos pelo princípio: defina todas as unidades como Pixels. Dicas para trabalhar com o Illustrator

Por padrão, o Illustrator usa métricas unidades para tamanhos de objetos e pontos para texto. Estas são ótimas configurações para a maioria das situações de projeto, mas para Designer de Web você provavelmente desejará ver pixels em todos os lugares. Portanto, antes de começar a trabalhar em qualquer outra coisa, certifique-se de que suas unidades estejam configuradas corretamente.

Para definir as unidades como pixels:

1. Abrir no menu Editar
2. Selecione unidades de medida no submenu de configurações.
3. Defina todas as opções para "pixels"

2. Crie documentos usando um perfil de documento da web.

 

Quando quiser começar a trabalhar em um novo design, role facilmente pela janela Novo documento e pule alguns detalhes importantes, como informar ao Illustrator que você planeja trabalhar em um web design para não usar cores CMYK. e bordas desfocadas do objeto. Lembre-se de selecionar a configuração do perfil da Internet na janela Novo documento e você ficará bem.

3. Ative o alinhamento da grade de pixels para objetos. Dicas para trabalhar com o Illustrator

Esse recurso salva vidas se você já teve problemas com bordas desfocadas no Photoshop.

O alinhamento da grade de pixels ajustará os segmentos retos horizontais e verticais de um objeto para se ajustarem perfeitamente à grade de pixels, enquanto mantém os segmentos curvos e inclinados suaves. O resultado são formas nítidas e com pixels perfeitos – algo que você definitivamente deseja em web design.

O botão superior possui o alinhamento da grade de pixels ativado, o que sempre resulta em bordas nítidas.

Para ativar o alinhamento da grade de pixels no nível do objeto:

1. Selecione o objeto
2. Abra o painel Transformar (Janela > Transformar).
3. Marque a caixa de seleção "Alinhar à grade de pixels" na parte inferior do painel (se não a vir, clique duas vezes no painel para mostrar as opções)

Observação. O alinhamento da grade de pixels é ativado por padrão para todos os novos objetos criados usando o perfil de documento da web. No entanto, se estiver colando objetos de outros arquivos do Illustrator, você precisará ajustar manualmente o alinhamento de pixels deles. Dicas para trabalhar com o Illustrator

4. Ative a visualização de pixels.

O recurso Pixel-Preview fará com que o Illustrator se comporte exatamente como o Photoshop ao dimensionar sua imagem acima de 100% - em vez de obter vetores perfeitos todas as vezes, você verá os pixels como se estivesse trabalhando com uma imagem raster.

Ativar a visualização de pixels fará com que você se sinta no Photoshop.

Pense em como isso é legal - você tem todo o poder dos gráficos vetoriais ao seu alcance e pode ver como fica o resultado no nível do pixel.

Legal, não é?

Ativar ou desativar a visualização de pixels

1. Abrir menu de visualização
2. Selecione Visualização de pixels.

5. Use janelas de arte. Dicas para trabalhar com o Illustrator

Imagine que duas câmeras de vídeo estão apontadas para o seu projeto.

Uma câmera possui nível de zoom normal, mostrando 100% do seu trabalho. A outra câmera tem um nível de zoom de 400% e é direcionada para um ícone específico no qual você estava trabalhando.

Como um cirurgião, você usa a câmera com zoom para fazer pequenas alterações no nível de pixel no ícone, ocasionalmente olhando para a câmera com zoom de 100% para ver como ela realmente se parece em seu tamanho real.

As janelas de cobertura são ótimas quando você precisa trabalhar com pequenos elementos, como ícones – você não precisa aumentar e diminuir o zoom constantemente para verificar a aparência de tudo.

Estas são janelas de arte – elas permitem que você visualize seu design simultaneamente com diferentes níveis de zoom, configurações de cores e outras variações. Isso é muito útil para web design, especialmente quando você trabalha com detalhes em nível de pixel.

Para usar janelas de arte:

1. Abra o menu Janela e selecione Nova janela. O Illustrator criará uma nova guia com o mesmo documento em visualização.
2. Vá para o menu Janela novamente, escolha Organizar > Mover tudo para janela. Isso permitirá que você altere tamanho e posicionamento das janelas um ao lado do outro como achar melhor.
3. Experimente diferentes níveis de zoom nas janelas e comece a fazer algumas alterações para ver como funciona. Dicas para trabalhar com o Illustrator

6. Use símbolos para criar rapidamente botões, ícones e muito mais.

Quantas vezes você criou o mesmo (ou quase o mesmo) botão, ícone ou widget no Photoshop? Se você gosta de web design, provavelmente faz isso todos os dias.

O Illustrator pode ajudar você a economizar tempo e evitar esse trabalho repetitivo com símbolos.

Em essência, os símbolos são um conjunto infinito de símbolos prontos elementos de design, que pode ser adicionado ao trabalho simplesmente arrastando e soltando e depois modificado conforme necessário. Isto é ideal para botões, ícones e outros objetos padrão que não precisam ser criados do zero.

Mas há outra razão pela qual os símbolos são poderosos: ela é chamada de instanciação.

Os símbolos não são apenas convenientes, mas também facilitam a atualização de elementos de design repetidos.

 

Essencialmente, sempre que você fizer alterações no símbolo original, essas alterações serão imediatamente refletidas em todas as instâncias do símbolo encontradas em seu trabalho artístico. Você precisa de botões maiores em seu site? Basta mudar o símbolo. Você deseja que os campos do seu formulário tenham uma aparência diferente em cada página? Basta mudar o símbolo. Você entendeu a ideia.

Dica: Se você não quiser que isso aconteça com uma instância específica do símbolo as, clique com o botão direito no objeto em sua ilustração e selecione Quebrar referência de símbolo. Isso o excluirá das atualizações automáticas.

Aqui está um bom vídeo explicando como usar e manipular símbolos:

Usando símbolos no Adobe Illustrator de Adobe TV .

Para usar um símbolo existente:

1. Abra o painel Símbolos no menu Janela.
2. Arraste o símbolo selecionado para o seu trabalho

Crie um novo símbolo:

1. Crie uma imagem de símbolo
2. Abra o painel Símbolos no menu Janela.
3. Arraste uma ilustração para o painel
4. Clique em OK na caixa de diálogo para confirmar.

Para editar um símbolo:

1. Abra o painel Símbolos no menu Janela.
2. Clique duas vezes em um símbolo para entrar no modo de edição.
3. Quando terminar, clique duas vezes em qualquer lugar fora da imagem do símbolo para sair do modo de edição.

7. Expanda objetos facilmente com escala de 9 segmentos. Dicas para trabalhar com o Illustrator

Este é um recurso de simbologia avançado que permite definir quais partes de um objeto são esticadas durante o dimensionamento e quais permanecem inalteradas.

Esquerda: um exemplo de botão esticado com e sem configuração de zoom de 9 segmentos. Direita: A configuração de dimensionamento de 9 segmentos envolve mover 4 guias que informam ao Illustrator quais partes do objeto estão protegidas e quais partes podem ser dimensionadas.

 

Um exemplo prático é um botão com cantos arredondados - se quiser torná-lo mais longo, não pode simplesmente esticá-lo horizontalmente porque isso distorcerá todo o objeto. Em vez disso, você terá que mover manualmente os pontos da forma. Com escala de 9 segmentos, o alongamento funciona conforme planejado. Dicas para trabalhar com o Illustrator

Para realmente entender como funciona, ouça este excelente tutorial em vídeo da Adobe TV para se atualizar rapidamente:

Usando escala de 9 segmentos com símbolos de Adobe TV .

8. Cantos arredondados em todos os lugares!

Você pode criar um retângulo arredondado no Photoshop, mas o Illustrator permite aplicar um efeito de canto arredondado não destrutivo a quase qualquer objeto. O que é efeito não destrutivo? Isso significa que você pode ativá-lo, desativá-lo ou alterar suas configurações sem afetar o objeto original subjacente.

Você pode aplicar o efeito de cantos arredondados a quase qualquer tipo de objeto e ajustá-lo conforme necessário. Dicas para trabalhar com o Illustrator

Para aplicar o efeito de canto arredondado:

1. Crie um retângulo ou qualquer outro objeto com cantos agudos
2. No menu Efeitos, escolha Estilizar > Cantos arredondados.
3. Insira um raio de canto e clique em Visualizar para ver como fica.
4. Clique em OK para aplicar o efeito.

Para alterar o efeito de canto arredondado:

1. Selecione um objeto com cantos arredondados
2. Abra o painel Aparência no menu Janela.
3. Encontre o efeito Cantos arredondados e clique duas vezes nele para alterar suas configurações ou clique no ícone do olho para ativá-lo ou desativá-lo.

9. Criando um preenchimento rápido com um padrão raster. Dicas para trabalhar com o Illustrator

Padrões de fundo sutis são um grande sucesso em web design, mas muitos designers acham que não são fáceis de aplicar no Illustrator.

Confesso que não é intuitivo, mas a solução é simples.

Para criar um padrão de bitmap:

1. Coloque uma foto do padrão em sua peça
2. Clique em "Inserir" na faixa superior (importante - não funcionará sem ela!)
3. Arraste um padrão para a paleta Swatches
4. Aplique uma amostra a qualquer objeto para preenchê-lo com um padrão

10. Colocação automática de texto em torno de imagens e objetos.

O Photoshop é conhecido por seus recursos básicos de edição de texto. Se quiser quebrar o texto em torno de uma imagem, você precisa criar dois ou três quadros de texto diferentes e simular o efeito. Dicas para trabalhar com o Illustrator

Felizmente, o Illustrator ajuda você.

Para quebrar o texto em torno de uma imagem:

1. Selecione a imagem ou objeto em torno do qual deseja quebrar o texto
2. Abra o menu Objeto, escolha Quebrar texto > Novo.
3. Para definir a distância de quebra automática, abra o menu Quebra automática de texto novamente e selecione Opções de quebra automática de texto.
4. Mova a imagem sobre o texto para ver o efeito de quebra automática

11. Crie efeitos visuais ricos com configurações de aparência de objeto. Dicas para trabalhar com o Illustrator

No Illustrator, o painel Aparência de um objeto funciona de forma semelhante aos efeitos de camada no Photoshop – você pode adicionar vários preenchimentos e traços a um objeto e, em seguida, brincar com seus modos de transferência, opacidade e efeitos para obter resultados interessantes.

Este texto é apenas um único objeto vetorial, estilizado usando o painel Aparência e Efeitos.

O playground é bastante amplo - desde sombras projetadas, desfoque e brilho até texturização, distorção e 3D. Dessa forma, você pode recriar a maioria dos efeitos do Photoshop enquanto trabalha com gráficos vetoriais.

O painel Aparência é poderoso e divertido. Recomendo que você experimente agora mesmo ou assista ao tutorial abaixo para entender como funciona:

Dominando o Painel de Aparência de Adobe TV .

Você está pronto para começar a experimentar o Illustrator?

A criação de sites e interfaces de usuário usando o Photoshop agora se tornou a norma e a maioria dos designers está satisfeita com esta solução. Dicas para trabalhar com o Illustrator

Mas só porque o Photoshop se tornou tão difundido não significa que o Illustrator não tenha nada a oferecer – muito pelo contrário. Com ferramentas como alinhamento de grade de pixels, quebra automática de texto e aparência de objeto, isso é um argumento forte.

Combinado com poderoso ferramentas de layout e gráficos vetoriais, fatiamento e exportação de imagens, o Illustrator é definitivamente uma escolha óbvia para web designers que desejam desenvolver sites rapidamente.