30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Como Criar um Pacote Launcher de Ícones do Android no Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

No tutorial de hoje, vamos fazer algumas pequenas alterações em nosso programa regular e abordar um assunto que eu queria fazer há muito tempo. Se você ainda não descobriu o título, vamos criar cinco ícones simples que você pode transformar em launcher de ícones do Android para futuros aplicativos que você pode criar ou estar envolvido na criação.

Quanto ao processo, vamos utilizar sua seleção básica de formas geométricas combinada com o painel Align e algumas outras ferramentas com as quais você provavelmente já trabalha todos os dias.

Dito isto, pegue uma dose fresca de café e vamos começar.

Ah, e não se esqueça de que você sempre pode expandir o projeto indo até o GraphicRiver, onde você vai encontrar inúmeros pacotes de ícones incríveis do Android, apenas esperando para serem clicados.

1. Como Configurar um Novo Documento

Como eu suponho que você já tem o Illustrator instalado e em execução em segundo plano, abra-o e vamos configurar um Novo Documento (File > New ou Control-N) utilizando as seguintes configurações:

  • Number of Artboards: 1
  • Width: 800 px
  • Height: 600 px
  • Units: Pixels

E da aba Advanced:

  • Color Mode: RGB
  • Raster Effects: Screen (72ppi)
  • Preview Mode: Default
setting up a new document

Dica rápida: alguns de vocês devem ter notado que a opção Align New Objects to Pixel Grid está faltando, porque estou executando a nova versão CC 2017 do software, onde grandes mudanças foram feitas na forma como o Illustrator lida com a maneira que as formas se encaixam na Pixel Grid subjacente.

2. Como Configurar uma Grade Personalizada

Como vamos criar os ícones utilizando um fluxo de trabalho perfeito para pixels, queremos configurar uma boa pequena Grade para que possamos ter controle total sobre nossas formas—isso se estivermos executando a versão mais antiga do software.

Passo 1

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

  • Gridline every: 1 px
  • Subdivisions: 1
setting up a custom grid

Dica rápida: você pode aprender mais sobre grades lendo este artigo detalhado sobre como o Sistema de Grade do Illustrator funciona.

Passo 2

Depois de configurar a nossa grade personalizada, tudo o que precisamos fazer para garantir que as formas fiquem nítidas é ativar a opção Snap to Grid no menu View, que vai ser transformada em Snap to Pixel cada vez que você entrar no modo Pixel Preview.

Agora, se você é novo em todo o "fluxo de trabalho perfeito para pixels", recomendo muito que você utilize meu tutorial sobre como criar o trabalho de arte com pixel perfeito, o que vai ajudar você a ampliar suas habilidades técnicas rapidamente.

3. Como Configurar as Camadas

Com o Novo Documento criado, seria uma boa ideia estruturar o nosso projeto utilizando algumas camadas, pois desta forma podemos manter um fluxo de trabalho estável concentrando-nos em um ícone por vez.

Dito isso, abra o painel Layers e crie um total de seis camadas, que vão ser renomeadas da seguinte forma:

  • camada 1: grades de referência
  • camada 2: bateria
  • camada 3: configurações
  • camada 4: mensagens
  • camada 5: alarme
  • camada 6: fotos
setting up the layers

4. Como Criar as Grades de Referência

As References Grid (ou Base Grids) são um conjunto de superfícies de referência delimitadas com precisão, que nos permitem construir nossos ícones, concentrando-nos no tamanho e na consistência.

Normalmente, o tamanho das grades determina o tamanho dos ícones de fato, e eles sempre devem ser a primeira  decisão que você toma quando inicia um novo projeto, já que você sempre vai desejar começar do menor tamanho possível e construir sobre isso.

Agora, como vamos criar os ícones com a intenção de utilizá-los no SO Android de fato, vamos ter que seguir a diretriz de Tamanho e Formato recomendada e configurar uma grade personalizada de 96 x 96 px com um preenchimento total de 4 px.

Passo 1

Comece bloqueando todas, exceto a camada da grade de referência, e depois pegue a Ferramenta Rectangle (M) e crie um quadrado laranja (#F15A24) de 96 x 96 px, que vai ajudar a definir o tamanho geral de nossos ícones.

creating the main shape for the reference grid

Passo 2

Adicione um outro menor de 88 x 88 px (#FFFFFF), que vai atuar como nossa área de desenho ativa, dando-nos isso em torno de 4 px de padding.

creating the main shape for the active drawing area

Passo 3

Agrupe os dois quadrados que compõem a grade de referência utilizando o atalho de teclado Control-G e depois crie três cópias a uma distância de 24 px uma da outra, alinhando-as ao centro da Prancheta.

Quando terminar, bloqueie a camada atual e passe para a próxima, onde vamos começar a trabalhar no primeiro ícone.

creating and positioning all the reference grids

5. Como Criar o Ícone de Bateria

Vamos começar o projeto criando o ícone da bateria, que pode ser utilizado para um aplicativo de economia de energia ou até mesmo um indicador de status, já que é bastante básico.

Dito isso, verifique se você está na camada correta (que seria a segunda) e amplie a primeira grade de referência para começar.

Passo 1

Comece criando o plano de fundo do ícone utilizando um círculo de 88 x 88 px, que vamos colorir utilizando #00C853, centralizando-o à área de desenho ativa subjacente depois.

creating and positioning the main shape for the battery icons background

Dica rápida: como o Google era bom o suficiente para mostrar uma diretriz de Material de Design para cores, acabei misturando e combinando alguns valores, que utilizei para os planos de fundo.

Passo 2

Crie o corpo principal da bateria utilizando um retângulo de 24 x 40 px, que vamos colorir utilizando branco (#FFFFFF) e depois centralize ao círculo maior, a uma distância de 20 px da borda inferior.

creating and positioning the main shape for the battery icons body

Passo 3

Transforme a forma que acabamos de criar em um contorno, invertendo o Preenchimento com seu Traço (Shift-X) e depois definindo sua Weight (espessura) para 4 px e seu Corner (canto) para Round Join, tudo a partir do painel Stroke.

turning the battery icons body into an outline using the stroke panel

Passo 4

Crie a primeira barra indicadora de estado, utilizando um retângulo de 12 x 4 px (#FFFFFF) ou um traço de 12 px de largura (#FFFFFF) com uma Espessura de 4 px, que vamos centralizar ao corpo da bateria, deixando uma espaço de 4 px.

creating and positioning the battery icons first state indicator bar

Passo 5

Adicione mais duas barras indicadoras, que vão ser empilhadas verticalmente a uma distância de 4 px uma da outra, agrupando-as (Control-G) depois.

adding the remaining state indicator bar to the battery icon

Passo 6

Termine o ícone adicionando o limite superior, que vamos criar utilizando um retângulo menor de 8 x 4 px (#FFFFFF) que vai ser centralizado ao corpo da bateria, a uma distância de 6 px (4 px para o preenchimento + 2 px para a metade superior do traço).

Quando terminar, não se esqueça de selecionar e agrupar (Control-G) todas as formas de composição da bateria, fazendo o mesmo para todas as partes de composição do ícone também.

finishing off the battery icon

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

Supondo que você tenha conseguido terminar o primeiro ícone, bloqueie sua camada e depois siga para a próxima (que seria a terceira) e vamos começar a trabalhar nas configurações.

Passo 1

Como fizemos com o ícone anterior, comece criando seu plano de fundo utilizando um círculo de 88 x 88 px, que vamos colorir utilizando #2196F3, centralizando-o à área de desenho ativa subjacente depois.

creating and positioning the main shape for the settings icons background

Passo 2

Comece a trabalhar no controle deslizante central criando um retângulo de 4 x 32 px ou um traço de 32 px de altura com uma Espessura de 4 px, que vamos colorir utilizando branco (#FFFFFF) e vamos centralizar ao círculo maior, a uma distância de 18 px a partir da sua borda superior.

creating and positionign the main shape for the settings icons center slider

Passo 3

Crie o indicador de estado do controle deslizante utilizando um retângulo de 12 x 4 px (#FFFFFF), que vai ser centralizado à forma criada anteriormente, a uma distância de 4 px da borda inferior.

creating and positioning the main shape for the center sliders state indicator

Passo 4

Adicione a parte inferior do controle deslizante utilizando o retângulo de 4 x 12 px (#FFFFFF), que vamos posicionar logo abaixo da barra indicadora de estado, selecionando e agrupando (Control-G) todas as três formas juntas depois.

creating and positioning the main shape for the center sliders lower section

Passo 5

Crie a parte superior do controle deslizante esquerdo utilizando um retângulo menor de 4 x 12 px (#FFFFFF), que vamos alinhar à borda superior do controle deslizante central, posicionando-o a uma distância de 12 px dele.

creating and positioning the main shape for the left sliders upper section

Passo 6

Adicione o indicador de estado do controle deslizante criando um retângulo de 12 x 4 px (#FFFFFF), que vamos empilhar verticalmente na forma criada anteriormente, a uma distância de 4 px da borda inferior.

creating and positioning the main shape for the left sliders state indicator

Passo 7

Termine o controle deslizante esquerdo adicionando a parte inferior que vamos criar utilizando um retângulo de 4 x 32 px (#FFFFFF) que posicionaremos abaixo do indicador.

Quando terminar, selecione as três formas e agrupe-as (Control-G), como fizemos com o controle deslizante central.

finishing off the settings icons left slider

Passo 8

Termine o ícone criando uma cópia (Control-C> Control-F) do controle deslizante esquerdo, que vamos posicionar no lado direito do círculo, a uma distância de 4 px do controle deslizante central.

Quando terminar, não se esqueça de selecionar e agrupar (Control-G) todas as suas partes de composição para que elas não fiquem separadas por acidente.

finishing off the settings icon

7. Como Criar o Ícone de Mensagens

Supondo que você já tenha passado para a próxima camada (que seria a quarta), aumente o zoom na terceira grade de referência e vamos começar.

Passo 1

Crie o plano de fundo do ícone utilizando um círculo de 88 x 88 px, que vamos colorir utilizando #7C4DFF e depois centralize à área de desenho ativa subjacente.

creating and positioning the main shape for the messaging icons background

Passo 2

Crie a forma principal para a caixa de mensagens esquerda utilizando um retângulo de 32 x 24 px, que vamos colorir utilizando branco (#FFFFFF) e depois posicione a uma distância de 20 px da borda esquerda e superior da área de desenho ativa.

creating and positioning the main shape for the messaging icons left text box

Passo 3

Comece a ajustar a forma que acabamos de criar, primeiro ativando o modo Pixel Preview (Alt-Control-Y) e depois adicionando um novo ponto de ancoragem à sua borda inferior, a uma distância de 10 px à sua esquerda clicando com o botão esquerdo do mouse com a ajuda da Ferramenta Add Anchor Point.

Quando terminar, não se esqueça de sair do modo Pixel Preview utilizando o atalho de teclado Alt-Control-Y.

adding a new anchor point to the bottom edge of the messaging icons left text box

Passo 4

Continue ajustando o retângulo selecionando seu ponto de ancoragem inferior esquerdo com a Ferramenta Direct Selection (A) e depois empurrando-o até a base em 8 px com a ajuda da Ferramenta Move (clique com o botão direito do mouse > Transform > Move > Vertical > 8 px).

adjusting the shape of the messaging icons left text box

Passo 5

Transforme a forma resultante em um contorno, invertendo o Preenchimento com seu Traço (Shift-X) e depois definindo sua Espessura para 4 px e seu Corner para Round Join.

turning the messaging icons left text box into an outline

Passo 6

Adicione a linha de texto menor criando um retângulo de 10 x 4 px, que vamos colorir utilizando branco (#FFFFFF) e depois posicione-o dentro da pequena caixa de mensagem, alinhando-o ao canto superior esquerdo, deixando um espaço de 4 px em torno dele.

creating and positioning the first text line onto the messaging icons left text box

Passo 7

Adicione a linha de texto maior utilizando um retângulo de 20 x 4 px (#FFFFFF) que vai ser alinhado à esquerda para o criado anteriormente, a uma distância de 4 px da borda inferior.

Quando terminar, não se esqueça de selecionar e agrupar todas as formas da caixa de texto utilizando o atalho do teclado Control-G.

creating and positioning the second text line onto the messaging icons left text box

Passo 8

Crie uma cópia (Control-C > Control-F) do contorno da caixa de texto e reflita (clique com o botão direito do mouse > Transform > Reflect > Vertical) e posicione-a no lado direito do círculo, a uma distância de 18 px das bordas direita e inferior da área de desenho ativa.

creating and positioning the messaging icons second text box

Passo 9

Termine o ícone, removendo a parte sobreposta da caixa de texto (destacada com vermelho) para que você acabe com um espaço de 4 px entre ela e o contorno da esquerda. Para fazer isto, simplesmente adicione um novo ponto de ancoragem à sua borda superior e esquerda e remova todos os outros.

Quando terminar, selecione todas as partes de composição do ícone e agrupe-as utilizando o atalho de teclado Control-G.

finishing off the messaging icon

8. Como Criar o Ícone de Alarme

Como você provavelmente já conhece o exercício, bloqueie a camada e siga em frente até a próxima camada (que seria a quinta) e vamos começar a trabalhar em nosso ícone de alarme.

Passo 1

Crie um círculo de 88 x 88 px, que vai ser colorido utilizando #FFC107, centralizando-o à área de desenho ativa subjacente.

creating and positioning the main shape for the alarm icons background

Passo 2

Crie o corpo principal do alarme utilizando um círculo de 40 x 40 px, que vamos colorir utilizando branco (#FFFFFF) e depois centralize-o à área de desenho ativa, a uma distância de 20 px da borda inferior.

creating and positioning the main shape for the alarm icons body

Passo 3

Transforme a forma que acabamos de criar em um contorno, invertendo o Preenchimento com seu Traçado e depois definindo sua Espessura em 4 px a partir do painel Stroke.

turning the alarm icons main body into an outline

Passo 4

Selecione a Ferramenta Pen (P) e desenhe os ponteiros do relógio utilizando um Traço de 4 px de espessura com a cor definida para branco (#FFFFFF) e o Corner para Round Join, deixando um espaço de 4 px entre os pontos de ancoragem finais e o círculo maior.

drawing in the little hands inside the alarm clocks main body

Passo 5

Mova alguns pixels em direção ao topo e crie um retângulo de 8 x 6 px (#FFFFFF), que vai ser centralizado na parte superior do círculo maior, posicionando-o de forma que ele acabe se sobrepondo à metade superior do Traço.

creating and positioning the main shape for the alarm clocks upper section

Passo 6

Adicione um retângulo de 16 x 4 px (#FFFFFF) em cima daquele que acabamos de criar, selecionando e agrupando (Control-G) todos eles depois.

finishing off the alarm clocks top section

Passo 7

Termine o ícone desenhando nos dois pequenos segmentos de linha diagonal utilizando um Traço de 4 px com a cor definida para branco (#FFFFFF). Quando terminar, selecione e agrupe (Control-G) todas as formas de composição do alarme juntas, fazendo o mesmo para todo o ícone depois.

finishing off the alarm clock icon

9. Como Criar o Ícone de Fotos

Vá para a sexta e última camada e vamos terminar o projeto criando o ícone de fotos.

Passo 1

Utilizando um círculo de 88 x 88 px (#FF6F00), crie o plano de fundo do ícone, que vai ser centralizado à área de desenho ativa subjacente.

creating and positioning the main shape for the photos icons background

Passo 2

Crie o corpo principal da foto utilizando um retângulo de 36 x 36 px, que vamos colorir utilizando branco (#FFFFFF) e depois centralize à área de desenho ativa subjacente, a uma distância de 20 px da borda superior.

creating and positioning the main shape for the photos icons body

Passo 3

Transforme a forma que acabamos de criar em um contorno, invertendo o seu Preenchimento com seu Traçado (Shift-X) e depois definindo sua Espessura para 4 px e seu Corner para Round Join a partir do painel Stroke.

turning the photos icons main body into an outline

Passo 4

Utilizando a Ferramenta Pen (P) desenhe na linha divisora horizontal utilizando um Traço de 4 px de espessura (#FFFFFF), que vamos posicionar dentro da forma criada anteriormente, a uma distância de 4 px da borda inferior.

adding the horizontal divider line to the lower body of the photos icon

Passo 5

Utilizando o mesmo Traço de 4 px de espessura (#FFFFFF) com um Round Join, comece a desenhar a primeira montanha posicionando o seu primeiro ponto de ancoragem na borda esquerda da foto, a uma distância de 10 px da linha divisória horizontal que acabamos de criar.

Adicione a segunda âncora a uma distância de 10 px horizontal e vertical a partir da primeira. Termine a montanha adicionando a terceira e última âncora na linha divisora horizontal, enquanto mantém pressionada a tecla Shift para desenhar uma linha diagonal perfeita.

drawing the photos icons first mountain

Passo 6

Desenhe a segunda montanha menor, utilizando o mesmo Traço de 4 px de espessura (#FFFFFF) e, depois de concluído, selecione e agrupe todas as formas de composição da foto utilizando o atalho de teclado Control-G.

drawing the photos icons second mountain

Passo 7

Crie a parte inferior do ícone utilizando um retângulo de 28 x 6 px, que vamos colorir utilizando branco (#FFFFFF) e depois centralize à parte inferior do contorno da foto, a uma distância de 4 px.

creating and positioning the main shape for the lower section of the photos icon

Passo 8

Finalize o ícone, transformando a forma que acabamos de criar em um contorno de 4 px de espessura (#FFFFFF) com um Round Join e depois ajuste-o adicionando um novo ponto de ancoragem ao centro de sua borda superior, que vamos remover para abrir o caminho (destacado com vermelho).

Selecione a forma resultante e o restante dos elementos de composição da foto e agrupe-os (Control-G) fazendo o mesmo com as partes de composição do ícone.

finishing off the photos icon

Está Terminado!

Espero que você tenha conseguido acompanhar cada passo e, o mais importante, tenha aprendido algo novo e útil durante o processo. Dito isto, vejo vocês na próxima!

Final Design
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.