Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Como Criar 10 Ícones Comuns e Suas Variações no Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called 10 Years of Envato Tuts+!.
10 Mistakes New Artists Make and How You Can Avoid Them

Portuguese (Português) translation by Adriana Takagi (you can also view the original English article)

Final product image
What You'll Be Creating

Hoje é especial, já que estamos comemorando dez anos de excelência e quão melhor fazer isso do que oferecendo um tutorial especial onde você aprenderá como criar um conjunto de dez ícones de UI indispensáveis, usando as formas e ferramentas mais básicas que o Illustrator tem para oferecer.

Se você está procurando por mais ícones, em diferentes estilos, vá até o GraphicRiver.

Dito isto, pegue um gole rápido desse café fresco, e vamos trabalhar.

1. Como Configurar um Novo Arquivo de Projeto

Supondo que você já tenha o Illustrator instalado e executando em segundo plano, abra ele e vamos configurar um Novo Documento (File > New ou Control-N) usando as seguintes configurações:

  • Number of Artboards (Número de Áreas de Trabalho): 20
  • Spacing (Espaçamento): 20 px
  • Width (Largura): 64 px 
  • Height (Altura): 64 px
  • Units (Unidades): Pixels

E da aba Advanced (Avançado):

  • Color Mode (Modo de cor): RGB
  • Raster Effects (Efeitos de Rasteirização): Screen (72ppi)
  • Preview Mode (Modo de Visualização): Default(Padrão)
setting up a new document

2. Como Configurar uma Grade Personalizada

Como vamos estar criando os ícones usando um fluxo de trabalho de pixel perfeito, vamos querer configurar uma boa pequena grade, assim podemos ter total controle sobre as nossas formas.

Passo 1

Vá para o submenu Edit > Preferences > Guides & Grid, e ajuste as seguintes configurações:

  • Gridline every (Linha de grade a cada): 1 px
  • Subdivisions (Subdivisões): 1
setting up a custom grid

Dica rápida: você pode aprender mais sobre grades lendo esta parte detalhada em Como o Sistema de Grades do Illustrator funciona

Passo 2

Depois de configurarmos nossa grade personalizada, tudo que precisamos fazer para garantir que as nossas formas pareçam nítidas é ativar as opções Snap to Grid e Snap to Pixel encontradas sob o menu View, que vai transformar em Snap to Pixel a cada momento que você entrar no modo de Visualização de Pixel (se você está utilizando uma versão anterior do software). 

Agora, se você é novo em todo o "Fluxo de Trabalho de Pixel Perfeito", eu recomendo muito que você passe pelo meu tutorial Como Criar uma Arte de Pixel Perfeito, que vai ajudar você a ampliar a suas habilidades técnicas muito rápido. 

3. Como Configurar as Camadas

Com o novo documento criado, seria uma boa ideia para estruturar nosso projeto usando algumas camadas para separar os ícones reais das redes de referência. Se você estiver familiarizado com meus tutoriais anteriores, você notará que com este levaremos uma abordagem ligeiramente diferente, desde que nós está baseando o projeto em pranchetas em vez de camadas devido a contagem elevada de ícone.

Dito isto, abra o painel Layers, e crie um total de seis camadas, que vamos renomear do seguinte modo: 

  • camada 1: grades de referência (reference grids) 
  • camada 2: ícones (icons)
setting up the layers

4. Como Criar as Grades de Referência

As grades de referência (ou grades base) são um par de precisamente delimitado de referência, que nos permitem construir nossos ícones, centrando-se no tamanho e consistência.

Normalmente, o tamanho das grades determina o tamanho dos ícones reais, e eles devem sempre ser a primeira decisão que você faz ao iniciar um novo projeto, já que você sempre quer começar do menor tamanho possível e construir sobre isso.

Agora, em nosso caso, vamos estar criando o pacote de ícone usando apenas um tamanho, mais exatamente 128 x 128 px, que é bastante grande. 

Passo 1

Comece a bloquear todas as camadas, exceto a "grades de referência", e depois pegue a Ferramenta Rectangle (M) e crie um quadrado laranja de 128 x 128 px (#F15A24), que vai ajudar a definir o tamanho global dos nossos ícones. 

creating the reference grids main shape

Passo 2

Adicione um outro menor de 120 x 120 px (#FFFFFF) que vamos posicionar em cima da forma anterior, já que ele vai atuar como a nossa área ativa de desenho, desta forma nos dando um preenchimento completo de 4 px para trabalhar. 

creative the active drawing areas main shape

Passo 3

Selecione e agrupe os dois quadrados juntos usando o atalho de teclado Control-G, centralizando-os depois para a Área de Trabalho subjacente.  Crie as grades restantes usando quatro cópias (Control-C > Control-F) a uma distância horizontal de 40 px uma da outra, bloqueando a camada atual antes de passar para a próxima parte. 

adding the remaining reference grids

5. Como criar os ícones de navegação

Assumindo que você conseguiu criar com sucesso as pequenas grades de referência, siga para a próxima camada (que seria a segunda), e vamos dar início ao projeto criando o primeiro grupo de ícone, que vai nos ajudar a navegar melhor.

Passo 1

Comece a trabalhar no ícone de retornar, criando seu corpo principal utilizando um círculo de 48 x 48 px, que vamos colorir utilizando #DCEEFF e depois centralize para a primeira Área de Trabalho.

creating and positioning the main shape for the back buttons main body

Passo 2

Dê a forma de que acabamos de criar um traço usando o método Stroke, criando uma cópia dele (Control-C), que vamos colar em frente (Control-F) e depois ajuste primeiro mudando sua cor para #629CF9 e depois invertendo o seu Preenchimento com o Traço (Shift-X). Defina a Espessura do contorno resultante para 8 px, selecionando e agrupando todas as formas de composição da parte atual, depois utilizando o atalho de teclado Control-G.

adding the outline to the back buttons main body

Passo 3

Comece a trabalhar na pequena seta virada para a esquerda através da criação de seu corpo principal utilizando um Traço de 24 px de largura e 8 px de espessura (#629CF9) com um Round Cap, que vamos centralizar à Área de Trabalho subjacente maior.

creating and positioning the main shape for the body of the back buttons arrow

Passo 4

Termine o ícone desenhando a cabeça da seta utilizando um Curso de 8 px de Espessura  (#629CF9) com um Round Cap e Join. Não tenha pressa e, depois de terminar, selecione e agrupe os dois juntos (Control-G), fazendo o mesmo para todas as formas de composição do ícone antes de passar para o próximo.

finishing off the back button

Passo 5

Crie o ícone avançar utilizando uma cópia (Control-C) do que acabamos de trabalhar, que vamos colar (Control-F) na segunda Área de Trabalho e, depois, ajuste-o refletindo verticalmente (clique com o botão direito do mouse > Transform > Reflect > Vertical).

creating and positioning the main shapes for the forward button

Passo 6

Crie o ícone de rolagem para cima utilizando uma cópia (Control-C) do ícone anterior, que vamos colar (Control-F) na próxima Área de Trabalho e depois ajuste rotacionando-a - 90º utilizando a ferramenta Rotate (clique com o botão direito do mouse > Transform > Rotate > -90º).

creating and positioning the main shapes for the up button

Passo 7

Adicione o ícone de rolagem para baixo utilizando uma cópia (Control-C) daquele que acabamos de criar, que vamos colar (Control-F) na quarta Área de Trabalho e depois ajuste refletindo horizontalmente (clique com o botão direito do mouse > Transform > Reflect > Horizontal).

creating and positioning the main shapes for the down button

Passo 8

Comece a trabalhar no ícone de atualização através da criação de seu corpo principal utilizando um círculo de 36 x 36 px com um Traço de 8 px de espessura (#629CF9), que vamos centralizar a borda inferior da área de desenho ativa.

creating and positioning the main shape for the refresh buttons main body

Passo 9

Abra o círculo através da remoção de sua quarta parte superior esquerda, certificando-se de definir o caminho resultante do Cap e Rodada de dentro do painel Stroke.

opening up the path of the refresh buttons main body

Passo 10

Crie a cabeça da seta utilizando um retângulo de 18 x 24 px, que vamos colorir utilizando #DCEEFF e depois posicione-a como visto na imagem de referência.

creating and positioning the main shape for the refresh buttons arrow head

Passo 11

Gire o retângulo para uma seta voltada para a esquerda, adicionando um novo ponto de ancoragem ao centro da sua borda esquerda, utilizando a Ferramenta Add Anchor Point (+) e depois remova o lado esquerdo externo clicando neles utilizando a Ferramenta Delete Anchor Point (-).

adjusting the shape of the refresh buttons arrow head

Passo 12

Termine a seta e, com ela o ícone em si, dando à forma resultante um contorno de 8 px (#629CF9) com um Round Join , selecionando e agrupando (Control-G) os dois juntos e fazendo o mesmo para o conjunto ícone depois.

finishing off the refresh button

6. Como Criar os Ícones de Busca e Ampliação

Supondo que você tenha terminado de trabalhar no primeiro grupo de ícones, vá para a próxima Área de Trabalho e vamos começar a trabalhar no nosso próximo grupo.

Passo 1

Crie a parte da lente do ícone de busca utilizando um círculo de 40 x 40 px (#DCEEFF) com um contorno de 8 px (# 629CF9), que vamos agrupar (Control-G) e depois vamos alinhar no canto superior esquerdo da área de desenho ativo.

creating and positioning the main shapes for the search icons lens

Passo 2

Pegue um torque e desenhe a parte da alça utilizando um Traço de 8 px de espessura  (#629CF9) com um Round Cap, utilizando a imagem de referência como guia principal.

adding the handle section to the search icons lens

Passo 3

Termine o ícone reduzindo o comprimento de sua alça selecionando o ponto de ancoragem superior utilizando a Ferramenta Direct Selection (A) e arrastando-o para baixo em diagonal enquanto mantém pressionada a tecla Shift para manter uma linha reta. Não tenha pressa e, depois de terminar, selecione e agrupe (Control-G) todas as suas formas de composição antes de passar para o próximo ícone.

finishing off the search icon

Passo 4

Crie o ícone de zoom utilizando uma cópia (Control-C) daquele que acabamos de trabalhar, que vamos colar (Control-F) na próxima Área de Trabalho, adicionando o sinal de mais ao centro da sua parte da lente utilizando dois Traços de 16 px de comprimento e 8 px de espessura (#629CF9) com um Round Cap. Não tenha pressa, e assim que terminar, selecione e agrupe (Control-G) todas as suas formas de composição antes de passar para a próxima.

adding the plus sign to the zoom in buttons lens

Passo 5

Adicione o ícone de redução do zoom utilizando uma cópia (Control-C) daquele que acabamos de criar, que vamos colar (Control-F) na próxima Área de Trabalho e depois ajuste clicando duas vezes no sinal de mais para isolá-lo. Em seguida, desagrupe (clique com o botão direito do mouse > Ungroup) e remova seu Traço vertical.

creating the zoom out button

7. Como Criar os Ícones de Visibilidade

Agora estamos no nosso terceiro grupo de ícones, então certifique-se de se posicionar na próxima Área de Trabalho (que seria a nona) e vamos começar.

Passo 1

Crie o corpo principal do ícone de alternância de visibilidade utilizando uma elipse de 48 x 32 px , que vamos colorir utilizando #DCEEFF e depois centralize à Área de Trabalho subjacente.

creating and positioning the main shape for the toggle on visibility button

Passo 2

Ajuste a forma que acabamos de criar puxando seus pontos de ancoragem esquerdo e direito utilizando a Ferramenta Anchor Point (Shift-C) para transformar a elipse em uma forma mais semelhante a um olho.

adjusting the shape of the toggle on visibility button

Passo 3

Dê a forma resultante um contorno de 8 px de espessura (#629CF9) com um Round Cap, selecionando e agrupando os dois juntos depois utilizando o atalho de teclado Control-G.

adding the outline to the toggle on visibility button

Passo 4

Adicione a parte da pupila utilizando um círculo de 16 x 16 px, que vamos colorir utilizando #629CF9 e depois centralize para as duas formas que acabamos de agrupar.

adding the pupil section to the toggle on visibility button

Passo 5

Conclua o ícone adicionando um pequeno reflexo utilizando um círculo de 8 x 8 px, que vamos colorir utilizando #DCEEFF e depois alinhe ao canto superior direito da pupila, agrupando (Control-G) os dois juntos depois. Não tenha pressa, e assim que terminar, selecione e agrupe (Control-G) todas as suas formas de composição antes de passar para a próxima.

finishing off the toggle on visibility button

Passo 6

Criar o ícone de visibilidade desativada utilizando uma cópia (Control-C) do que acabamos de terminar de trabalhar, que vamos colar para a décimo Área de Trabalho e depois ajustar desenhando a linha diagonal utilizando um Traço de 8 px de espessura (#629CF9), selecionando e agrupando (Control-G) todos juntos depois.

creating the toggle off visibility button

8. Como Criar Ícones de Compartilhamento de Arquivos

Vamos ser honestos, nenhum pacote de ícones de UI verdadeiro está completo sem um conjunto de ícones de compartilhamento de arquivos, então vamos nos certificar de adicionar um conjunto ao nosso.

Passo 1

Comece a trabalhar no ícone de upload criando as formas principais para a parte da sua caixa utilizando um retângulo de 48 x 12 px (#DCEEFF) com um contorno de 8 px de espessura (#629CF9), que vamos agrupar (Control-G) e depois vamos centralizar para a borda inferior da área de desenho ativo.

creating and positioning the main shapes for the upload buttons box section

Passo 2

Adicione os pequenos segmentos que se prolongam através de dois Traços de 8 px de altura e 8 px de espessura (#629CF9) com um Round Cap, que vamos posicionar para os lados das formas criadas anteriormente, selecionando-as e depois criando um grupo maior (Control-G).

adding the side segments to the upload buttons box section

Passo 3

Adicione a seta voltada para cima utilizando uma cópia (Control-C) daquele que já criamos para os ícones de navegação, que vamos colar (Control-F) na Área de Trabalho atual e depois centralize para a borda superior da área de desenho ativo. Depois de ter a seta posicionada, selecione e agrupe todas as formas de composição do ícone utilizando o atalho de teclado Control-G.

finishing off the upload button

Passo 4

Crie o ícone de download utilizando uma cópia (Control-C) daquele em que acabamos de trabalhar, que vamos colar na próxima Área de Trabalho e depois ajuste refletindo horizontalmente sua pequena flecha (clique com o botão direito do mouse > Transform > Reflect > Horizontal).

creating the download button

9. Como Criar o Ícone de Informação

Se você é como eu, você provavelmente é uma daquelas pessoas que realmente não gostam do próximo item, uma vez que as interfaces devem ser fáceis de usar, mas, no fundo, sabem que às vezes é um mal necessário.

Passo 1

Crie o corpo principal do ícone utilizando um círculo de 48 x 48 px (#DCEEFF) com um contorno de 8 px de espessura (#629CF9), que vamos agrupar (Control-G) e depois vamos alinhar à 13º Área de Trabalho.

creating and positioning the main shapes for the information prompt buttons main body

Passo 2

Crie o ponto pequeno do ponto de exclamação utilizando um círculo de 8 x 8 px , o qual vamos colorir utilizando #629CF9 e depois vamos centralizar para as formas maiores, posicionando-a a uma distância de 4 px da borda inferior do contorno.

adding the little dot to the information prompt buttons main body

Passo 3

Termine o símbolo, e com ele o próprio ícone, adicionando o segmento de linha utilizando um Traço de 12 px de altura e 8 px de espessura (#629CF9), que vamos posicionar acima do ponto, a uma distância de apenas 4 px. Selecione e agrupe (Control-G) as duas formas juntas, fazendo o mesmo para todo o ícone, antes de passar para o próximo.

finishing off the information prompt button

10. Como Criar o Ícone de Compartilhamento

Compartilhar é uma dessas coisas que torna a Internet um ótimo lugar para viver sua existência digital, então vou compartilhar com você uma abordagem simples sobre como criar seu próprio ícone compartilhável.

Passo 1

Crie as partes principais do ícone utilizando três círculos de 16 x 16 px (#DCEEFF) com um contorno de 8 px de espessura (#629CF9), que vamos agrupar individualmente (Control-G) e depois vamos posicionar como visto na imagem de referência.

creating and positioning the main shapes for the share buttons main sections

Passo 2

Desenhe a linha de segmento que conecta as três partes utilizando um contorno de 8 px de espessura (#629CF9) com um Round Cap e Join . Não tenha pressa e depois de terminar, envie o caminho resultante para baixo, clicando com o botão direito do mouse > Arrange > Send to Back, selecionando e agrupando todas as formas de composição do ícone utilizando o atalho de teclado Control-G.

finishing off the sharing button

11. Como Criar os Ícones de Alternância de Estado

Nós adoramos ligar e desligar as coisas, então por que não passar alguns momentos e ver como podemos criar o nosso próprio indicador alternância de estado.

Passo 1

Comece a trabalhar no ícone de alternância criando seu corpo principal utilizando um retângulo arredondado de 48 x 32 px (#DCEEFF) com um Corner Radius de 16 px e um contorno de 8 px de espessura (#629CF9), que agruparemos (Control-G) e  depois centralize para a próxima Área de Trabalho.

creating and positioning the main shapes for the toggle off buttons main body

Passo 2

Adicione o indicador de estado utilizando um círculo de 16 x 16 px, que vamos colorir utilizando #629CF9 e depois centralize às formas maiores, posicionando-a a uma distância de 4 px da borda esquerda do contorno. Depois de terminar, selecione e agrupe (Control-G) as três formas, antes de passar para o próximo ícone.

finishing off the toggle off button

Passo 3

Crie o alternador de estado utilizando uma cópia (Control-C) daquele em que acabamos de trabalhar, que vamos colar na próxima Área de Trabalho (Control-F) e depois ajuste refletindo-a verticalmente (clique com o botão direito do mouse > Transform > Reflect > Vertical).

creating the toggle on button

12. Como Criar o Ícone do Menu Hambúrguer

O próximo item na nossa lista é um daqueles ícones que se tornaram instantaneamente um jogador desafiador, uma vez que ele foi utilizado e totalmente compreendido, já que foi adotado de imediato como um símbolo universal.

Passo 1

Comece a trabalhar na parte central do menu, criando um círculo de 8 x 8 px , que vamos colorir utilizando #629CF9 e depois vamos centralizar à borda esquerda da área de desenho ativa.

creating the main circle for the menu buttons center section

Passo 2

Adicione o segmento de barra utilizando um Traço de 36 px de largura e 8 px de espessura (#629CF9) com um Round Cap, que vamos centralizar ao lado direito da área de desenho ativa. Não tenha pressa e, uma vez que você tenha o caminho no lugar, selecione ele e o círculo e agrupe-os utilizando o atalho de teclado Control-G.

adding the bar segment to the menu buttons center section

Passo 3

Conclua o ícone adicionando as partes superior e inferior utilizando duas cópias (Control-C > Control-F duas vezes) das formas que acabamos de agrupar, que vamos posicionar a uma distância de 8 px do original. Depois de terminar, selecione e agrupe (Control-G) todas as suas partes de composição antes de passar para o próximo ícone.

finishing off the burger menu button

13. Como Criar o Ícone de Configurações

Seja ele rodas dentadas ou controles deslizantes, todos podemos concordar que o ícone de configurações é um item imprescindível em qualquer pacote de UI, uma vez que os ajustes são uma das coisas que sempre gostamos de fazer, se você sabe o que quero dizer.

Passo 1

Comece a criar os segmentos deslizantes do ícone com três Traços de 48 px de largura e 8 px de espessura (#629CF9) com um Round Cap, que vamos empilhar verticalmente a uma distância de 16 px uma da outra, centralizando-os à Área de Trabalho subjacente vazia depois.

creating and positioning the main shapes for the settings buttons bar segments

Passo 2

Finalize o ícone adicionando os botões de ajuste utilizando três círculos de 12 x 12 px (#DCEEFF) com um contorno de 8 px de espessura (#629CF9), que vamos agrupar individualmente (Control-G) e depois posicionar os controles deslizantes como visto na imagem de referência. Depois de terminar, não se esqueça de selecionar e agrupar (Control-G) todas as formas de composição do ícone antes de passar para o próximo.

finishing off the settings button

14. Como Criar Ícones de Like

Agora estamos no nosso último grupo de ícones e como é melhor terminar o pacote do que adicionando os estados de coração pequeno.

Passo 1

Comece a trabalhar na parte superior do botão de like, criando um círculo de 28 x 28 px , que vamos colorir utilizando #DCEEFF e depois posicione 8 px da borda superior da área de desenho ativo e 4 px da sua esquerda.

creating and positioning the main shape for the like buttons upper body

Passo 2

Crie um outro círculo de 28 x 28 px (#DCEEFF), que vamos posicionar no lado oposto da área de desenho ativo, certificando-se de manter as mesmas lacunas. Uma vez que você tem as duas formas no lugar, selecione e una elas em um único objeto maior utilizando o Unite Shape Mode do Pathfinder.

uniting the composing shapes of the like buttons upper body into a single larger shape

Passo 3

Ative o modo de Pixel View (Alt-Shift-Y) e ajuste a forma resultante, selecionando e removendo a metade inferior e depois encaixando o ponto de ancoragem do centro superior de volta para a Pixel Grid.

adjusting the shape of the like buttons upper body

Passo 4

Pegue a Ferramenta Pen (P) e desenhe a parte inferior do corpo do coração, certificando-se de suavizar os pontos de ancoragem laterais utilizando os Converter os pontos de ancoragem selecionados para suavizar. Não tenha pressa e ajuste a forma, selecionando e reposicionando alguns dos pontos finais de suas alças, como visto na imagem de referência, desligando o modo de Pixel Preview (Alt-Control-Y) antes de  passar para o próximo passo depois de terminar.

adjusting the shape of the like buttons lower body

Passo 5

Termine o ícone dando a forma resultante um contorno de 8 px de espessura (#629CF9) com um Round Join, certificando-se de selecionar e agrupar (Control-G) os dois antes de passar para o próximo.

finishing off the like button

Passo 6

Crie o ícone final utilizando uma cópia do que acabamos de terminar de trabalhar, que vamos posicionar na última Área de Trabalho e depois se transformar em um botão de dislike, adicionando à barra diagonal utilizando um Traço de 8 px de espessura  (#629CF9) com um Round Cap. Depois de terminar, selecione e agrupe (Control-G) todas as suas formas de composição antes de salvar o projeto.

creating the dislike button

Bom trabalho! Nosso Pequeno Pacote de UI Está Finalizado!

Como sempre, espero que você tenha tenha gostado deste tutorial passo a passo e, o mais importante, tenha aprendido algo moderno e útil ao longo do caminho!

finished project preview
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.