Illustrator: crie layouts para a web | Alura Cursos Online
Primeiras aulas do curso Illustrator: crie layouts para a web
Começando do zero - Começando do zero
##Começando do zero
Vamos fazer um site para vender as camisetas da Kunstees, desenhando todo o layout para ajudar os clientes a comprarem. Usaremos o Illustrator, portanto a primeira coisa que faremos é abrir o programa.
Se você estiver usando Windows não tem problema. A única diferença do Mac, que é o sistema usado no curso, são os atalhos. Quando eu usar Command no Mac, será Ctrl no Windows. Ao abrir o Illustrator, a primeira tela que veremos será:
Essa é a tela de boas-vindas, que no momento não é útil para nós. Portanto, vamos fechá-la e criar um novo arquivo. Para isso, iremos no menu File > New.
E o Illustrator abre a seguinte janela:
Nós vamos criar um website, que é um conteúdo de web. Isso deve ser indicado de alguma maneira, e será pelo item Profile (ou Perfil) que faremos isso. Basta selecionar a opção web que ele fornece, como abaixo.
Seguindo o formulário, vamos alterar também o tamanho, no campo size. Selecionaremos o maior que tem, que é o 1280 X 800. Esse é um bom tamanho de monitor para trabalharmos.
Feito isso, podemos clicar em OK. O Illustrator abrirá uma folha em branco para trabalharmos.
Se o seu Illustrator estiver diferente do meu, não se preocupe. Basta usar a configuração disponível no canto direito do programa. Deve estar como Essentials para ficar como o meu. Se já estiver em Essentials e mesmo assim estiver diferente, basta selecionar a opção Reset Essentials. Dessa maneira, você verá o programa como estamos usando no curso.
Precisamos desenhar nessa folha em branco, mas não temos ideias do que fazer. Que tipo de site é necessário? Ainda bem que o nosso cliente nos enviou um rascunho do que ele quer, feito no Paint ou PowerPoint.
Agora temos uma ideia do que o cliente precisa: um logo na parte superior, um carrinho de compras, um menu, uma barra de pesquisa, uma chamada com uma foto atrás e os produtos com suas fotos na parte de baixo do site. Começaremos pelo logo, que está disponível nos arquivos da aula. Eu estou com o .zip do logo, que descompactado nos mostra os seguintes arquivos:
Precisamos colocar o logo no arquivo que criamos dentro do Illustrator. Como se trata de incluir um arquivo, usaremos o menu File. Mas, diferente de outros programas, não há o comando Import, mas o comando Place....
Ele nos permitará escolher um arquivo, e usaremos o arquivo logo_kunstees-01.png. Ao clicar em Place, parece que o arquivo não foi aplicado.
A imagem fica automaticamente presa ao cursor com esse comando, e basta clicar no ponto da tela em que ela deve ficar para aplicá-la.
A imagem não ficou centralizada, e agora? Quando você precisa mover qualquer coisa em seu computador, usa o seu cursor para arrastar o objeto. No Illustrator não é diferente, não há segredo. Essa é a primeira ferramenta que vem, que se chama Selection Tool . É a ferramenta de seleção do Illustrator e funciona da mesma forma que o cursor do mouse em outros programas.
Depois de reposicionar o logo, eu achei que ele ficou grande demais. Que tal diminui-lo um pouco? Será que eu preciso salvá-lo em outro tamanho e inserir novamente no Illustrator? Isso não é preciso. A imagem aparece com uma caixa em volta de si assim que a inserimos ou selecionamos.
Quando passamos o cursor em um canto da caixa, ela nos mostra uma seta dupla, permitindo que alteremos as suas dimensões. Vamos diminuir um pouco.
Ficou desproporcional! Para retornar ao tamanho anterior, basta desfazer com Command + Z. Como fazer para diminuir mantendo a proporção? Basta clicar no canto da caixa, apertar Shift e arrastar. Até o tamanho desejado.
Ficou muito melhor! A segunda coisa que precisamos fazer, seguindo o rascunho, é o menu. Ele será composto por 4 ou 5 textos e uma caixa. Do que precisamos quando vamos escrever alguma coisa? De uma caneta! E no Illustrator temos algo parecido para escrever no canvas, que é essa folha em branco. O que usaremos é a Type Tool que está no menu lateral:
Depois de selecionada, clicamos no canvas e digitamos "Menu".
Clicamos fora com a ferramenta de seleção, clicamos novamente na Type Tool e escrevemos "Menu" novamente. Repetimos esse processo mais duas vezes.
É um pouco chato ficar repetindo os comandos. Será que eu não consigo copiar e colar usando a ferramenta de seleção? Clico e arrasto para selecionar um dos textos, para testar.
Depois de selecionar, basta usar Command + C e Command + V para, respectivamente, copiar e colar.
Agora é só alinhar todos os "Menus". Eles estão um pouco pequenos, não dá pra enxergá-los direito. Podemos aumentá-los como fizemos com o logo: selecionando e clicando no canto da caixa. E podemos fazer de uma só vez:
E basta arrastar a caixa até que os textos fiquem com o tamanho adequado.
Agora que está tudo mais legível, fica estranho deixar todos como "Menu". O cliente também mandou o texto final do menu, que também está disponível nos
arquivos da aula.
Não faz sentido criarmos mais 5 caixas de texto. Faz muito mais sentido editar o texto que já está lá. Basta selecionar novamente a ferramenta Type Tool e clicar no texto. Você pode selecionar tudo e colar direto o texto que está no bloco de notas. Ficará assim:
Voltando ao rascunho do layout, vemos que há uma caixa embaixo do logo. E essa caixa é importante, porque logo abaixo entra uma chamada grande e é importante que ela esteja bem posicionada. Para colocar a caixa, precisamos de uma ferramenta que crie formas geométricas – mais especificamente um retângulo. Usaremos a ferramenta chamada Rectangle Tool que o Illustrator tem, cujo atalho é a tecla M.
Com ela selecionada, basta clicar e arrastar no canvas para desenhar o retângulo.
O retângulo está da cor do texto, o que não nos ajuda. Quero que ele seja da cor cinza do logo da Kunstees. Na barra de ferramentas tem um quadrado na cor preta que define a cor dos objetos.
Quando clicamos duas vezes nela, abrimos um menu de cor (Color Picker), que nos permitirá escolher uma nova.
Nela, podemos tentar encontrar o cinza certo.
Quando verificamos o resultado, não parece ser a mesma cor do logo. O que escolhemos parece um pouco mais escuro.
O ideal seria que pudéssemos sugar a cor do logo e aplicar exatamente a mesma no retângulo. Será que há uma ferramenta que faz isso? Sim! É o conta-gotas (Eyedropper Tool, de símbolo .
Basta usá-lo, com o retângulo selecionado, na cor que você deseja copiar. Imediatamente o retângulo mudará de cor.
Agora as cores estão iguais, mas temos mais um problema: o texto não está aparecendo. Pensamos inicialmente que era pela cor do retângulo, mas agora temos que pensar em outra solução. No Illustrator, sempre que colocamos um novo objeto, ou criamos uma nova figura, ou damos place em algo, esse objeto fica acima de tudo que foi feito antes. Tudo que vem depois fica acima.
E como deixar esses objetos embaixo? Quando precisamos mudar a posição dos objetos, horizontal e verticalmente, usamos a ferramenta de seleção. Será que ela também não nos ajuda com esse posicionamento? Quando a usamos e clicamos com o botão direito, vemos o seguinte:
Essa é a opção que nos permite rearrajar os objetos, e mudar a sua ordem. Vamos escolher a opção "Send to back", que significa "Colocar atrás".
Finalmente podemos ver o texto. Se eu quisesse trazer a caixa cinza para a frente de novo, bastaria escolher a opção "Bring to front". Podemos organizar conforme a necessidade. Agora a ideia do menu está mais clara, mas tem uma coisa incômoda para mim. Eu prefiro que as letras de um menu sejam todas maiúsculas, e com a fonte um pouco menor. Começaremos selecionando o texto.
A barra superior serve para nos auxiliar no uso de qualquer ferramenta, e é ela que nos ajudará nesse caso.
A opção Character diz respeito à família da fonte, a regularmostra as opções de destaque (bold, itálico, ambos ou nenhum, que é justamente o regular), e o font size é o que regula o tamanho da fonte. Vou escolher 24 para o font size, porque eu quero só um pouco menor. Não seria prático deletar e reescrever 5 vezes todos os textos em Caps Lock. Se eu tivesse um layout com 20 textos ou 100 textos isso seria muito trabalhoso. Felizmente, há um menu escondido que nos ajudará: o Character panel.
Nele, há mais opções referentes à fonte. Inclusive a opção de deixar todo o texto em caixa-alta:
Após selecionar essa opção, o menu ficará assim:
Agora é preciso repetir o processo para os outros itens. Mas é proveitoso fazer um por um? Lembra que nós fizemos essa alteração sem usar a Type Tool, mas apenas com a ferramenta de seleção? Para cada tipo de objeto essa ferramenta mostrará coisas diferentes no menu superior. Já que é ela que estamos usando, podemos selecionar múltiplos objetos e deixá-los todos em caixa-alta de uma vez. Já é possível aproveitar para colocá-los no mesmo tamanho também.
Quero fazer mais uma mudança: embora eu tenha gostado dessa cor do fundo, prefiro que ela seja a cor da fonte, e que no fundo fique uma cor mais escura. Usando a ferramenta de seleção no retângulo, podemos mudar sua cor em dois lugares: no menu superior mediado pela ferramenta de seleção ou na barra lateral.
Vou escolher a cor mais escura do logo para ser a nova cor de fundo do menu, e aplicá-la com o conta-gotas.
Agora vamos mudar a cor das letras da mesma maneira: selecionaremos todas as caixas de texto (clicando e segurando o Shift) e usaremos o conta-gotas para escolher o cinza mais claro do logo.
A legibilidade não ficou tão boa. Para melhorá-la, vamos mudar a fonte para branco.
Por enquanto temos a barra superior do menu e temos o logo aplicado.
Adiante complementaremos o layout. Até lá!
Importação de Imagens - Preview para o cliente
Preview para o cliente
Já fizemos algumas coisas bem legais: colocamos o logo e alguns textos, e mexemos no tamanho de ambos, bem como inserimos uma barra e aprendemos a colocá-la embaixo de tudo. Vamos continuar nos guiando pelo rascunho, e o próximo item que aparece nele é a chamada, que deve ter uma foto.
Portanto, o próximo passo é inserir a foto da chamada. E isso já aprendemos a fazer quando colocamos o logo da Kunstees. A imagem escolhida está nos arquivos da aula. Depois de baixá-la, basta ir em File > Place e selecionar o arquivo da imagem.
A imagem aparece "grudada" no cursor, e aplicada no canto esquerdo sob a barra do menu ficará assim:
O que nos interessa na foto não é o rosto da pessoa, nem o lustre que aparece atrás, mas a camiseta em si. A posição da imagem também não agrada muito. Vamos tentar centralizá-la e jogá-la para trás dos outros elementos do layout.
Não ficou muito bom. O logo ficou sobre o rosto e o lustre ainda aparece. Mesmo tentando ajustar a posição, o problema persiste. Seria interessante se pudéssemos cortar essa imagem de alguma forma. Devemos pedir para o designer cortar e enviar a imagem de novo? Não! Podemos cortar direto no Illustrator. Para isso, usaremos uma ferramenta de corte, ou algo que permita esconder a parte superior da imagem, como uma máscara. Mas antes, vamos redimensionar a imagem, para que ela ocupe toda a largura do canvas. Para isso, clicamos no canto da imagem, apertamos Shift e arrastamos até o ponto final.
Deixemos agora a camiseta em posição de destaque.
Não vamos realmente recortar a imagem, mas esconder a parte que não nos interessa. Como uma máscara, temos que pensar no formato do que vamos esconder e do que vamos mostrar. Nesse caso, recorreremos novamente à Rectangle Tool (![Rectangle tool] (https://s3.amazonaws.com/caelum-online-public/Illustrator/Imagens/Tools/Recangle-tool.png)). Faz-se o retângulo sobre a parte da imagem que deve aparecer.
E uma vez aplicado, ficará assim:
Esse retângulo branco apenas escondeu minha imagem. Para resolver isso, apertamos o V, que é o atalho da ferramenta de seleção, e clicamos e arrastamos para selecionar as duas imagens. Clicamos então com o botão direito do mouse e selecionamos a opção Make Clipping Mask ("Fazer máscara de recorte").
Agora aparece só o que eu queria:
Suponha que precisemos mandar essa etapa para o cliente. Primeiro precisamos salvar o arquivo, em File > Save ou Command + S. Vou criar uma nova pasta em meu Desktop exclusiva para o projeto, que se chamará Kunstees.
O arquivo se chamará Layout Versão1.ai. Quando clicamos em Save, uma janela de opções aparece. Basta dar OK.
Antes de mandar para o cliente, vamos dar uma olhada no arquivo?
Ele é um arquivo do tipo .ai, e tem 17.2 MB. Não precisa ser tão grande só para o cliente aprovar. Para isso, basta que ele veja uma imagem do arquivo, por exemplo, no formato .jpg ou .png. Podemos usar a função "Salvar como..." ou Save as....
Mas nessa função não existe a opção de transformar o arquivo em imagem. A função que usaremos é o Export.
Aqui sim, temos diversas opções de arquivos de imagem. Selecionaremos o .jpg, e quando aparecer a janela de opções, colocaremos a imagem em um tamanho grande.
No Illustrator, a função Save as... nos permite escolher arquivos editáveis, e a Export, arquivos estáticos. Escolhemos esta apenas quando não queremos mais mexer no resultado, como é o caso desse preview para o cliente.
Agora você e o cliente poderão abrir o preview direto do computador. Até a próxima!
Importação de Imagens - Desenhando figuras
O nosso layout está tomando corpo. A primeira pergunta que me vem quando o vejo é: será que essa chamada será só a foto?
A chamada serve para destacar coisas, que ficam passando, como uma camiseta em promoção. E não queremos que a transição seja automática, queremos que o cliente possa mudar com o clique do mouse. Que tal colocar uma seta de cada lado, para indicar ao usário que ele pode mudar a chamada?
Para fazer a seta, usaremos uma ferramenta. Podemos investigar se na Rectangle Tool temos a forma de seta.
Não temos uma específica que faça setas, mas temos a Pen Tool , cujo atalho é a tecla P, que nos permite desenhar uma. Basta clicar ponto a ponto, que a ferramenta desenha as linhas.
Depois de definir a seta, basta apertar Esc para sair da ferramenta e não aplicar a quarta linha.
Eu não queria que essa seta fosse preenchida, especialmente na cor branca. Para mudar, vou usar minha ferramenta de seleção e ir à barra lateral para mudar a cor.
Estou procurando por uma opção que deixe o preenchimento transparente, mas não estou encontrando. Fechando o Color Picker, vemos que há uma opção none na barra de ferramentas.
Basta selecionar o Fill do objeto e clicar em none, que o preenchimento ficará transparente.
A seta ficou assim:
Eu gostaria que ela ficasse vermelha, para chamar atenção. Para isso, usarei novamente o conta-gotas para selecionar o vermelho do logo da Kunstees.
Mas, novamente, a seta ficou preenchida. Eu queria que só o fio (Stroke) ficasse vermelho. Olhando a barra lateral de ferramentas com mais atenção, vemos uma seta de troca (Swap), que troca a cor do preenchimento (Fill) com o do traço (stroke).
Após a troca, o preenchimento fica transparente e o traço fica vermelho:
E a seta fica assim:
Está um pouco difícil de enxergá-la. Vamos dar um zoom , usando o Z e clicando na parte da qual queremos nos aproximar. Para reposicionar a visualização, basta segurar a barra de espaço para que apareça esse ícone , clicar e arrastar, da mesma maneira que fazemos em um tablet ou smartphone.
A linha da seta está muito fina, tanto que precisamos usar o zoom para vê-la melhor. Vou usar a ferramenta de seleção para mudar isso. Ao clicar na seta, o menu superior nos mostra as seguintes opções:
O que precisamos mudar é o peso (Weight) do traço, na opção Stroke Weight. Vamos deixar o traço com 5 pontos.
E a seta ficará assim:
Eu gostaria que a ponta (Cap) do traço fosse arredondada. E é possível deixá-la assim abrindo o menu Stroke panel.
Nele, há três opções de ponta do traço, e escolheremos a mais arrendondada.
Seta com ponta arredondada Podemos voltar à visualização anterior. Bastar apertar Z + Alt e clicar com o mouse. Para ajustar a posição, basta usar a barra de espaço e arrastar.
Como o traço dela está mais visível, ela pode ser menor. Vamos diminuí-la com a ferramenta de seleção, sem esquecer de pressionar Shift para não perder as proporções.
A chamada vai correr só para um lado? É preciso criar uma seta para o outro lado também. Ainda com a ferramenta de seleção, basta copiar e colar.
Entretanto, a segunda seta ainda aponta para a esquerda. Temos que virá-la, de alguma forma. Clicando com o botão direito, devemos seguir o seguinte caminho: Transform > Reflect, que espelha a imagem.
Ao escolher essa opção, o Illustrator abre o seguinte menu:
Selecionaremos a opção Vertical e damos OK. Agora basta posicionar a segunda seta adequadamente.
Pode ser que o cliente seja distraído e fique clicando nas setas, se prendendo em um looping de imagens. É preciso mostrar a ela quantas são as imagens da chamada. Faremos isso com bolinhas na part de baixo da chamada.
Não desenharemos as bolinhas à mão livre, vamos usar uma ferramenta: a Elipse Tool (![Elipse Tool]). Basta clicar e segurar na Rectangle Tool para que ela apareça dentre as opções.
Ao clicar e arrastar, o que aparece é uma forma oval.
Como obter um círculo perfeito? Como em outras ocasiões em que queremos manter a proporção, basta segurar o Shift.
Com as configurações atuais, o círculo ficará assim:
Mas esse stroke não combina com o propósito do círculo. Mas basta usar o color swap para corrigir isso. Ficará assim:
Uma bolinha não passará a informação que eu preciso. Colocaremos três delas para informar ao usuário que há um progresso no passar das imagens. Vamos copiar, colar e tentar alinhar as bolinhas.
Mas há um jeito mais fácil. Se você selecionar um objeto e mantiver o mouse sobre ele, basta apertar Alt, clicar e arrastar, o Illustrator duplica esse objeto para você.
Essa bolinhas não podem ter todas a mesma cor. Uma delas precisa estar destacada para indicar em que parte do carrossel de imagens o usuário está. Vamos manter a bolinha do meio vermelha e tornar as outras duas da cor mais escura do logo da Kunstees.
Vamos agora diminuí-las e posicioná-las no canto inferior direito da imagem.
Agora temos uma indicação clara de quantas imagens são e em que parte do carrossel estamos. Até a próxima!
Sobre o curso Illustrator: crie layouts para a web
O curso Illustrator: crie layouts para a web possui 141 minutos de vídeos, em um total de 35 atividades. Gostou? Conheça nossos outros cursos de UI - User Interface em UX & Design, ou leia nossos artigos de UX & Design.