Nesse Tutorial apresentaremos uma forma de criar ícones no Adobe Illustrator, essa técnica permite usar qualquer foto de referência para desenhar formas e pegar cores, permitindo ilustrar praticamente qualquer ícone.

01. Criar novo documento

Frame_01

Vá até File e escolha a opção New ou aperte <Ctrl+N> para criar um novo documento. Na opção profile escolha Video and Film e em Size escolha HDTV 720.

02. Esconder a grade de transparência

Frame_02_HideTranspGrid

Você pode esconder a grade de transparência em View > Hide Transparency Grid. Isso deixará o fundo do seu Artboard branco.

03. Inserir uma referência

Frame_03_Referencia

Vá até o Google Images e digite Iphone. Você pode abrir qualquer foto, clicar com o botão direito do mouse e usar a opção Copiar Imagem. Volte para o Illustrator, cole a foto (Ctrl+V) e reposicione ela melhor. Depois abra os Layers (Atalho = F7) e clicando 2x ao lado do nome do Layer você abrirá o Layer Options, ligue o botão template para transformar esse layer numa referência.

06. Criando o corpo do telefone

Frame_04_Rectangulo

Usando a ferramenta Rounded Rectangle Tool clique e arraste na tela para criar um Retângulo com as bordas arrendondadas. Uma dica é não soltar o botão do mouse e usar as setas do teclado para manipular o arredondamento das bordas. Ainda com o botão do mouse pressionado você pode usar a barra de espaço para mover o retângulo para posicioná-lo melhor. Solte o botão do mouse quando estiver bom.

05. Escondendo os preenchimentos

Frame_04_CtrlY

Como o retângulo provavelmente estará com uma cor de preenchimento você não enxergará a referência, mas se usar o atalho <Ctrl+Y> você esconderá todos os preenchimentos e poderá desenhar todas as formas todas. Depois que terminar poderá usar novamente o atalho para voltar a ver os preenchimentos. Nesse modo (Outline) você conseguirá mover os objetos clicando nas linhas dos objetos.

06. Alto Falante

Frame_05_AutoFalante

Também com a ferramenta Rounded Rectangle Tool você pode desenhar o alto falante do telefone. Uma dica é apertar a seta da direita quando estiver com o mouse pressionado. Isso irá arredondar completamente as laterais do retângulo.

07. Câmera

Frame_06_Camera

Para a câmera do telefone você pode usar a ferramenta Elipse Tool. Depois que tiver começado a desenhar a Elipse, pressione o Shift para manter o circulo proporcional.

08. Botão de Menu

Frame_07_BtnBaixo

O botão do menu pode ser feito com essas duas últimas formas que usamos. Uma elipse para o circulo maior e um retângulo arredondado para o centro do botão.

09. Tela

Frame_08_Tela

A tela do telefone pode ser feita com um Rectangle Tool clicando de uma extremidade a outra na tela da referência.

10. Ícones

Frame_09_Icone01

Para os ícones podemos usar um Rounded Rectangle Tool novamente.

11. Duplicando o Ícone

Frame_10_IconeDP

Com o <Alt> pressionado no teclado você pode usar a ferramenta de mover para arrastar o ícone para a direita e criar uma duplicata desse objeto. Outro modo seria usar o <Ctrl+C> e <Ctrl+V> para copiar e colar a forma. Mas usando o <Alt> permitirá usar o <Ctrl+D> para duplicar mais formas automaticamente.

12. Ctrl + D

Frame_11_CtrlD

Quando você usa o <Alt> para criar a cópia de algo, logo depois dessa ação você pode usar o <Ctrl+D> para continuar duplicando infinitamente esse objeto na mesma distância e direção usada.

13. Outros Ícones

Frame_12_CtrlD

Você pode repetir o mesmo processo agora com os quatro ícones selecionados, logo após essa ação pode usar o Ctrl+D para continuar a criar mais retângulos. Provavelmente algum ajuste de posição será necessário, mas o maior trabalho foi simplificado.

Frame_13_SelIcones

Aqueles ícones que sobrarem você pode selecioná-los e deletá-los.

Frame_15_Delete

14. Capturando as cores

Frame_16_ContaGotas

Com a ferramenta Eyedropper Tool (conta gotas) selecionada você pode pressionar o <Ctrl> para ele mudar para a seta de seleção e selecionar um objeto. Soltando o <Ctrl> ele volta a ser o conta gotas e você pode clicar na foto para pegar uma cor para esse objeto. Procure pegar cores que estejam próximas ou dentro dos objetos.

Você só irá ver as cores depois que usar o <Ctrl+Y> para voltar a ver as cores de preenchimento

Frame_17_Cor

15. Contorno do botão

Frame_18_InvertStroke

O interior do botão do menu provavelmente vai estar preenchido, mas você pode usar a opção de inverter as cores de preenchimento para a cor de contorno. Assim ele ficará “vazado” no meio.

16. Finalizando

Frame_19_DelRef

Para finalizar você pode jogar na lixeira seu layer de referência e manter apenas os vetores.

Frame_20_Fim

E pronto! Você tem um ícone de um Iphone.

Agora imagina colocar fotos de outros objetos como referência e usar as mesmas técnicas. Acho também que ficaria legal animar esse ícone no After Effects, mas isso pode ficar para um próximo tutorial. 😀

Gostou? Compartilha!