Como criar um conjunto de ícones do Editor de texto no Adobe Illustrator

No tutorial de hoje, vamos abordar outro projeto de ícone, no qual vamos gradualmente aprender como criar um conjunto de elementos de editor de texto, usando algumas das formas básicas e ferramentas encontradas no bom e velho Illustrator.

Então, se isso soa como algo no seu beco, certifique-se de pegar uma xícara de suco de feijão mágico e vamos começar!

E não se esqueça, você sempre pode expandir o pacote dirigindo-se ao GraphicRiver, onde você encontrará uma grande variedade de ícones de interface do usuário .

1. Como configurar um novo arquivo de projeto

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

• Número de pranchas de pintura: 24
• Espaçamento: 20 px
• Colunas: 4
• Largura: 32 px
• Altura: 32 px
• Unidades: Pixels

E na guia Avançado :

• Modo de cor: RGB
• Efeitos Raster: Tela (72ppi)
• Modo de visualização: padrão

2. Como configurar uma grade personalizada

Como vamos criar os ícones usando um fluxo de trabalho perfeito para pixels, queremos configurar um pouco de grade para que possamos ter controle total sobre nossas formas.

Passo 1

Vá para o submenu Editar> Preferências> Guias e grade e ajuste as seguintes configurações:

• Linha de grade a cada: 1 px
• Subdivisões: 1

Dica rápida: você pode aprender mais sobre grades lendo este artigo detalhado sobre Como funciona o Grid System do Illustrator .

Passo 2

Depois de configurar nossa grade personalizada, tudo o que precisamos fazer para garantir que as formas fiquem nítidas é ativar as opções Snap to Grid e Snap to Pixel encontradas nomenu View , que serão transformadas em Snap to Pixel cada vez você entra no modo Pixel Preview (se você estiver usando uma versão mais antiga do software).

Agora, se você é novo em todo o “fluxo de trabalho perfeito para pixels”, recomendo fortemente que você use o tutorial Como criar um trabalho artístico Pixel-Perfect , que o ajudará a ampliar suas habilidades técnicas rapidamente.

3. Como configurar as camadas

Com o novo documento criado, seria uma boa ideia estruturar nosso projeto usando algumas camadas para separar as grades de referência dos ícones reais. Se você estiver familiarizado com meus tutoriais anteriores, perceberá que, com esse, estamos adotando uma abordagem um pouco diferente, já que estamos baseando o projeto em Artboards, em vez de Layers, devido à alta contagem de ícones.

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

• camada 1: grades de referência
• camada 2: ícones

4. Como criar as grades de referência

As grades de referência (ou grades de base) são um conjunto de superfícies de referência precisamente delimitadas, que nos permitem construir nossos ícones, concentrando-nos em tamanho e consistência.

Geralmente, o tamanho das grades determina o tamanho dos ícones reais, e eles sempre devem ser a primeira decisão que você faz quando você começar um novo projeto, desde que você sempre vai querer começar a partir o menor tamanho possível e construir sobre isso.

Agora, no nosso caso, nós vamos estar criando o pacote de ícone usando apenas um tamanho, mais exatamente 32 x 32 px, que é no lado menor da escala.

Passo 1

Certifique-se de que você está na camada certa (que seria o primeiro) e então pegue a Rectangle Tool (M) e criar um 32x32 px laranja (#F15A24) que nós centralizam quadrado alinhar a primeira prancheta e usar para definir a dimensão global dos nossos ícones.

Passo 2

Adicione um menor ( 28 x 28 px) ( #FFFFFF ), que vamos posicionar em cima da forma anterior, uma vez que ele atuará como nossa área de desenho ativa, dando-nos umpreenchimento total de 2 px para trabalhar.

Passo 3

Selecione e agrupe os dois quadrados usando o atalho de teclado Control-G e, em seguida, crie as grades restantes usando 23 cópias ( Control-C> Control-F ) que posicionaremos em cada um dos Artboards vazios. Tome seu tempo, e uma vez que você terminar, certifique-se de bloquear a camada atual antes de passar para a próxima seção.

5. Como criar o ícone do Justify

Supondo que você tenha conseguido criar e posicionar as pequenas grades de referência, vá para a próxima camada (que seria a segunda), e vamos lançar o projeto criando o primeiro ícone do conjunto.

Passo 1

Comece criando a linha horizontal inferior usando um traço de 2 px de espessura , o qual coloriremos usando # 252A2D e, em seguida, posicionar a uma distância de 2 px do centro da borda inferior da área de desenho ativa.

Passo 2

Termine o ícone adicionando as linhas restantes usando duas cópias ( Control-C> Control-F duas vezes) da que acabamos de criar, que empilhamos verticalmente a uma distância de 4 px do original. Quando terminar, selecione e agrupe todos os três juntos usando o atalho de teclado Control-G antes de passar para a próxima grade de referência.

6. Como criar o ícone de alinhamento à esquerda

Assim que terminarmos de trabalhar no segundo ícone, poderemos passar para a próxima área de desenho ativa, onde montaremos rapidamente o próximo.

Passo 1

Uma vez que alguns dos ícones próximos são baseados sobre o que acabamos de terminar o trabalho na, vamos fazer uma cópia (Ctrl-C) que será em seguida Cole (Control-F) para o grid de referência atual, certificando-se de clicar na prancheta subjacente primeiro para torná-la ativa.

Passo 2

Isolar o curso médio clicando duas vezes nele e então encurtar o seu comprimento de 24 px para 16 px — você pode fazer isso selecionando o seu ponto de ancoragem certo usando a Direct Selection Tool (A) e em seguida, empurrando-o para a esquerda por 8 px usando a ferramenta mover (clique direito > transformar > Mover > Horizontal > - 8 px).

Quando terminar, pressione a tecla Escape para sair do modo de isolamento e faça uma cópia ( Control-C ) do ícone resultante antes de passar para a próxima grade.

7. Como criar o ícone de alinhamento certo

Em seguida, vamos criar rapidamente o ícone de alinhamento à direita, portanto, verifique se você está no Artboard certo (que seria o terceiro) e vamos começar.

Passo 1

Cole uma cópia do ícone que acabamos de finalizar na área de desenho ativa vazia usando o atalho de teclado Control-F .

Passo 2

Ajuste a cópia que acabamos de criar, refletindo-a verticalmente usando a ferramenta Reflect ( clique com o botão direito do mouse> Transform> Reflect> Vertical ). Assim que estiver pronto, não esqueça de fazer uma cópia ( Control-C ) do ícone resultante, antes de passar para o próximo.

8. Como criar o ícone Alinhar ao centro

Como nenhum editor de texto está completo sem uma opção de alinhamento central, adicionaremos rapidamente um nos seguintes momentos.

Passo 1

Cole uma cópia do ícone anterior no quarto Artboard usando oatalho de teclado Control-F para colocá-lo exatamente na mesma posição.

Passo 2

Isolar a meio curso da cópia que você acabou de criar clicando duas vezes sobre ele, e, em seguida, centrar alinhá-lo à prancheta subjacente usando o Align do painel Horizontal Align Centro de opção. Quando terminar, saia rapidamente do modo de isolamento pressionando a tecla Escape .

9. Como criar o ícone de aumento de recuo

Siga para a segunda linha e, em seguida, amplie a primeira prancheta, onde começaremos a trabalhar no próximo ícone.

Passo 1

Crie as formas principais do ícone usando uma cópia ( Control-C) da justificação, a qual colaremos ( Control-F ) na área de desenho ativa atual e depois ajustamos isolando e encurtando o comprimento de seus traços intermediários e inferiores a partir de 24 px a 12 px usando a ferramenta Mover ( pontos de ancoragem à esquerda selecionados> clique com o botão direito do mouse> Transformar> Mover> Horizontal> 12 px ).

Passo 2

Adicione a forma principal para a seta voltada para a direita usando um retângulo de 8 x 12 px , o qual coloriremosusando # 252A2D e então posicionar no lado esquerdo da área de desenho ativa, como visto na imagem de referência.

Passo 3

Finalize o ícone, transformando a forma que acabamos de criar em uma seta, primeiro adicionando um novo ponto de ancoragem ao centro de sua borda direita usando a ferramenta Adicionar Ponto de Ancoragem (+) e, em seguida, removendo suas partes superior e inferior usando a ferramenta Excluir Ponto de Ancoragem (-) . Quando terminar, saia do modo de isolamento e faça uma cópia ( Control-C ) de todo o ícone antes de passar para o próximo Artboard.

10. Como criar o ícone de recuo de redução

Supondo que você tenha terminado de trabalhar no ícone anterior, posicione-se no vizinho Artboard, onde criaremos sua versão alternativa.

Passo 1

Use o atalho de teclado Control-F para colar uma cópia do ícone de recuo de aumento na área de desenho ativa atual.

Passo 2

Clique duas vezes na pequena seta para isolá-la e, em seguida, ajuste-a rapidamente, refletindo-a verticalmente usando aferramenta Reflect ( clique com o botão direito do mouse> Transform> Reflect> Vertical ). Quando terminar, não se esqueça de sair do modo de isolamento usando a tecla Escapeantes de passar para o próximo ícone.

11. Como criar o espaço Adicionar antes do parágrafo

Assim que terminar de trabalhar no ícone de recuo de redução, podemos passar para a próxima área de desenho ativa, onde criaremos nosso próximo item.

Passo 1

Crie as formas principais do ícone usando uma cópia ( Control-C) da justificação, a qual colaremos ( Control-F ) no Artboard atual, certificando-se de centralizá-lo na borda inferior da área de desenho ativa.

Passo 2

Desagrupe a cópia que acabamos de colar ( clique com o botão direito do mouse> Desagrupar ou Shift-Control-G ) e, em seguida, ajuste-a removendo sua linha superior de Traçadoselecionando-a e, em seguida, pressionando Excluir .

Passo 3

Termine o ícone atual adicionando a seta para baixo. Vamos criá-lo usando um retângulo de 12 x 8 px ( # 252A2D ), que será ajustado adicionando um novo ponto de ancoragem ao centro de sua borda inferior usando a ferramenta Adicionar ponto de ancoragem (+) e removendo os inferiores usando a ferramenta Excluir Ponto de Ancoragem (-) . Quando terminar, selecione e agrupe ( Control-G ) todas as três formas juntas antes de passar para a próxima.

12. Como criar o espaço Adicionar após o ícone do parágrafo

Em seguida, criaremos rapidamente uma versão alternativa do ícone que acabamos de concluir.

Passo 1

Crie uma cópia ( Control-C ) do ícone anterior, que colaremos (Control-F ) na área de desenho ativa vazia, como visto na imagem de referência.

Passo 2

Desagrupe a cópia que acabamos de criar ( clique com o botão direito do mouse> Desagrupar ou Shift-Control-G ) e, em seguida, ajuste o ícone invertendo a posição dos Strokes com a seta conforme visto na imagem de referência, certificando-se de selecionar e agrupar ( Control-G ) antes de passar para o próximo.

13. Como criar o tipo de ícone da ferramenta

Supondo que você já tenha passado para a terceira linha, vamos começar a trabalhar na próxima categoria, que tem a ver com formatação de texto.

Passo 1

Crie a seção superior do ícone usando um retângulo de 20 x 6 pxcom um traço de 4 px de espessura , o qual coloriremosusando # 252A2D e, em seguida, alinhar no centro a borda superior da área de desenho ativa.

Passo 2

Abra o caminho da forma que acabamos de criar, adicionando um novo ponto de ancoragem ao centro de sua borda inferior usando a ferramenta Adicionar Ponto de Ancoragem (+) e, em seguida, selecionando e removendo-o imediatamente, pressionando Excluir .

Passo 3

Adicione a seção central usando uma linha de traçado vertical de20 px de altura e 8 px de espessura ( nº 252A2D ), a qual será centralizada alinhada com a forma anterior, como visto na imagem de referência.

Passo 4

Termine o ícone criando a seção inferior usando uma linha detraçado de 16 px de largura e 4 px de espessura ( nº 252A2D), a qual será centralizada alinhada à borda inferior da área de desenho ativa. Leve o seu tempo, e quando terminar, selecione e agrupe ( Control-G ) todas as três formas juntas antes de passar para a próxima.

14. Como criar o ícone negrito

Em seguida, vamos criar rapidamente um dos ícones mais usados ​​em todo o histórico do editor de texto, portanto, certifique-se de posicionar-se no próximo Artboard e pular direto para ele.

Passo 1

Crie a seção inferior do ícone usando um quadrado de 12 x 12 pxcom um traço de 4 px de espessura , que coloriremosusando # 252A2D e, em seguida, centralize o alinhamento na borda inferior da área de desenho ativa.

Passo 2

Ajuste rapidamente a forma que acabamos de criar configurando o raio de seus cantos direitos para 6 px a partir daspropriedades de retângulo do painel de transformação .

Passo 3

Finalize o ícone atual adicionando a seção superior usando umquadrado de 8 x 8 px com um traçado de 4 px de espessura ( # 252A2D ), que será ajustado definindo o raio dos cantos direitos como 4 px de dentro do Retângulo do painel de transformação .Quando terminar, posicione a forma resultante como visto na imagem de referência, certificando-se de selecioná-las e agrupá-las depois usando o atalho de teclado Control-G .

15. Como criar o ícone de sublinhado

Como de costume, vá até o próximo Artboard, onde veremos como montar o ícone de sublinhado.

Passo 1

Comece criando a seção inferior usando uma linha de traçado de24 px de largura e 4 px de espessura , a qual coloriremosusando # 252A2D e, em seguida, alinhar no centro a borda inferior da área de desenho ativa.

Passo 2

Crie a forma principal para a letra "U" usando um retângulo de 12 x 14 px com um traçado de 4 px de espessura ( # 252A2D ), que será centralizado na borda superior da área de desenho ativa para que seu caminho se sobreponha.

Passo 3

Comece a ajustar a forma definindo o raio dos cantos inferiores como 6 px a partir das propriedades de retângulo do painel detransformação .

Passo 4

Termine o ícone abrindo o caminho da forma que ajustamos anteriormente, adicionando um novo ponto de ancoragem ao centro de sua borda superior usando a ferramenta Adicionar ponto de ancoragem (+) e, em seguida, selecionando e removendo-o imediatamente pressionando Apagar . Quando terminar, não esqueça de selecionar e agrupar as duas formas usando o atalho de teclado Control-G .

16. Como criar o ícone itálico

Estamos agora no último ícone da linha atual, portanto, supondo que você já tenha se posicionado no Artboard, vamos criar o próximo item.

Passo 1

Criar o fundo e secções superiores do “I” letra moldada utilizando dois 16 px largas 4 px grossas curso linhas ( # 252A2D ), o que irá posicionar como pode ser visto na imagem de referência.

Passo 2

Termine o ícone atual adicionando a linha diagonal conectando as duas seções horizontais usando um traço de 4 px de espessura( # 252A2D ). Como sempre, quando terminar, selecione e agrupe ( Control-G ) todas as três formas juntas antes de passar para a próxima.

17. Como criar o Bring to Front Icon

Supondo que você tenha movido outra linha, aumente o zoom em seu primeiro Artboard e vamos criar nosso próximo ícone.

Passo 1

Comece criando a forma frontal usando um quadrado de 12 x 12 px com um traço de 4 px de espessura , o qual coloriremosusando # 252A2D e, em seguida, alinhar ao canto superior esquerdo da área de desenho ativa.

Passo 2

Crie a forma de fundo usando outro quadrado de 12 x 12 px com um traço de 4 px de espessura ( # 252A2D ), que será alinhado ao canto inferior direito da área de desenho ativa.

Passo 3

Ajuste a forma do quadrado que acabamos de criar adicionando um novo ponto de ancoragem onde seus caminhos cruzam os do primeiro usando a ferramenta Add Anchor Point (A) , certificando-se de reposicionar o seu canto como visto no imagem de referência.

Passo 4

Termine o ícone adicionando um preenchimento à forma resultante, que criaremos usando uma cópia ( Control-C ) que será colada no lugar ( Control-F ) e, em seguida, ajustar movendo seu traço com seu preenchimento ( Shift-X) ).Quando terminar, selecione e agrupe ( Control-G ) as duas formas juntas, fazendo o mesmo para todo o ícone depois.

18. Como criar o ícone Enviar para trás

Até agora, você já sabe o que fazer, então pule no próximo Artboard e vamos continuar trabalhando no próximo item.

Passo 1

Crie a forma de volta usando um quadrado de 12 x 12 px com umtraço de 4 px de espessura ( # 252A2D ), que será alinhado ao canto superior esquerdo da área de desenho ativa.

Passo 2

Finalize o ícone atual adicionando a forma frontal usando outroquadrado de 12 x 12 px com um traçado de 4 px de espessura (# 252A2D ) e uma forma de preenchimento de 12 x 12 px ( # 252A2D ), que agruparemos ( Control-G ) e em seguida, alinhe no canto inferior direito da área de desenho ativa. Quando terminar, selecione e agrupe ( Control-G ) todas as formas juntas antes de passar para a próxima.

19. Como criar o ícone Inserir cabeçalho

Certifique-se de posicionar-se no Artboard vizinho vazio e, em seguida, vamos começar a trabalhar no nosso próximo ícone.

Passo 1

Crie a seção superior usando um retângulo de 20 x 6 px com umtraço de 4 px de espessura , o qual coloriremos usando # 252A2D e, em seguida, alinhar no centro a borda superior da área de desenho ativa.

Passo 2

Adicione a forma principal para a seção inferior usando umretângulo de 20 x 8 px com um traço de 4 px de espessura ( # 252A2D ), o qual posicionaremos de forma que seu caminho inferior sobreponha a borda da área de desenho ativa, como visto na imagem de referência .

Passo 3

Abra o caminho da forma que acabamos de criar, adicionando um novo ponto de ancoragem ao centro de sua borda inferior usando a ferramenta Adicionar Ponto de Ancoragem (+) e, em seguida, selecionando e removendo-o imediatamente, pressionando Excluir .

Passo 4

Termine o ícone adicionando o pequeno segmento de preenchimento usando um retângulo de 12 x 4 px ( # 252A2D), que será centralizado e alinhado à borda inferior da área de desenho ativa. Quando terminar, selecione e agrupe todas as formas de composição usando o atalho de teclado Control-G .

20. Como criar o ícone do rodapé de inserção

Em seguida, vamos criar rapidamente outra versão do ícone do cabeçalho, portanto, certifique-se de posicionar-se na próxima área de desenho ativa e vamos começar.

Passo 1

Crie uma cópia ( Control-C ) do ícone anterior, que depois colamos no Artboard atual usando o atalho de teclado Control-F .

Passo 2

Termine o ícone atual refletindo horizontalmente a cópia que acabamos de criar ( clique com o botão direito do mouse> Transform> Reflect> Horizontal ), certificando-se de centralizá-la novamente depois.

21. Como criar o ícone de lista

Nosso próximo item é obrigatório para qualquer bom editor de texto, então suba para a próxima linha e vamos pular direto para ela.

Passo 1

Crie o marcador superior usando um quadrado de 4 x 4 px , quecoloriremos usando # 252A2D e, em seguida, alinhe-o à borda esquerda da área de desenho ativa, posicionando-o a uma distância de 2 px do seu topo.

Passo 2

Adicione o item da lista usando uma linha de traço de 16 px delargura e 4 px de espessura ( # 252A2D ), que posicionaremos ao lado do marcador como visto na imagem de referência, certificando-se de selecionar e agrupar ( Control-G ) os dois juntos antes de mover para o próximo passo.

Passo 3

Termine o ícone criando duas cópias ( Control-C> Control-Fduas vezes) das formas que acabamos de agrupar, as quais empilhamos verticalmente abaixo a uma distância de 4 px do original. Uma vez que você tenha suas formas no lugar, não esqueça de selecionar e agrupar todas elas usando o atalho de teclado Control-G .

22. Como criar o ícone Sublist

Agora temos um ícone de lista, mas que tal passarmos para o próximo Artboard e criarmos um subnível?

Passo 1

Comece criando uma cópia ( Control-C ) do ícone anterior, que colamos na área de desenho ativa atual usando o atalho de teclado Control-F .

Passo 2

Finalize o ícone atual isolando os itens da lista central e inferior e, em seguida, ajustando seu comprimento para que seus marcadores se alinhem ao superior, como visto na imagem de referência. Não tenha pressa e, quando terminar, saia do modo de isolamento pressionando a tecla Escape .

23. Como criar o ícone Inserir quebra de página

O número 19 da lista de itens é o ícone de quebra de página, que criaremos em um piscar de olhos.

Passo 1

Comece por criar a linha central usando um 24 px de largura 4 pxde espessura curso , que vamos colorir usando # 252A2D e, em seguida, centro alinhar à prancheta subjacente.

Passo 2

Adicione as formas principais das páginas usando dois retângulos de 12 x 6 px com um traçado de 4 px de espessura ( # 252A2D ), que posicionaremos nas bordas superior e inferior da área de desenho ativa, como visto na imagem de referência.

Passo 3

Finalize o ícone abrindo os caminhos das formas que acabamos de criar, adicionando um novo ponto de ancoragem ao centro de suas bordas externas e, em seguida, selecionando e removendo-as imediatamente usando a tecla Delete . Quando terminar, selecione e agrupe as três formas usando o atalho de tecladoControl-G .

24. Como criar o ícone de redimensionamento

Em seguida, temos outra ferramenta simples, porém útil, que na maioria das vezes é negligenciada, mas não hoje.

Passo 1

Crie o corpo principal do ícone usando um quadrado de 20 x 20 px com um traço de 4 px de espessura ( # 252A2D ), que será alinhado ao Artboard subjacente.

Passo 2

Termine o ícone atual criando um quadrado menor de 12 x 12 pxcom um traço de 4 px de espessura ( # 252A2D ), que será alinhado ao canto inferior direito da área de desenho ativa.Quando terminar, não esqueça de selecionar e agrupar ( Control-G ) os dois juntos antes de passar para o próximo.

25. Como criar o ícone de formas

Agora estamos na sexta e última fileira de ícones, portanto, supondo que você já tenha se posicionado no primeiro de seus pranchetas, vamos criar nosso próximo item.

Passo 1

Comece criando um círculo de 16 x 16 px com um traçado de 4 px de espessura , o qual coloriremos usando # 252A2D e, em seguida, alinhar ao canto superior esquerdo da área de desenho ativa.

Passo 2

Adicione um quadrado menor de 12 x 12 px com um traço de 4 px de espessura ( # 252A2D ), que posicionaremos no círculo conforme visto na imagem de referência.

Passo 3

Finalize o ícone atual adicionando um conjunto de novos pontos de ancoragem às bordas do quadrado onde os dois caminhos se sobrepõem usando a ferramenta Adicionar ponto de ancoragem (+) e, em seguida, selecionando e removendo seu canto usando a tecla Delete . Como sempre, não esqueça de selecionar e agrupar ( Control-G ) as duas formas juntas assim que estiver pronto.

26. Como criar o ícone do gráfico

Se você gosta de gráficos, ficará feliz em saber que vamos construir um dos nossos nos seguintes momentos.

Passo 1

Crie a seção inferior do ícone usando uma linha de traçado de24 px de largura e 4 px de espessura ( nº 252A2D ), a qual será centralizada alinhada à borda inferior da área de desenho ativa.

Passo 2

Adicione os segmentos do gráfico vertical usando três Strokes de 16 px de altura e 4 px de espessura ( # 252A2D ), os quais posicionaremos 4 px um do outro na horizontal e, em seguida, centralizá-los na borda superior da área de desenho ativa.

Passo 3

Termine o gráfico, ajustando o comprimento de seus segmentos verticais externos, como visto na imagem de referência. Não tenha pressa e, quando terminar, selecione e agrupe ( Control-G) todas as formas de composição do ícone antes de passar para a próxima.

27. Como criar o ícone da tabela

O próximo item da nossa lista é aquele que você provavelmente usa bastante, então certifique-se de posicionar-se no próximo Artboard, e vamos aprender rapidamente como criá-lo.

Passo 1

Comece a trabalhar na seção superior criando um quadrado de 8 x 8 px com um traçado de 4 px de espessura ( # 252A2D ), que será alinhado ao canto superior esquerdo da área de desenho ativa.

Passo 2

Adicione um maior 12 x 8 px um com o mesmo traço de 4 px deespessura ( # 252A2D ), que vamos posicionar no lado direito da praça para que seus contornos se sobreponham.

Passo 3

Crie a forma à esquerda para a seção inferior do ícone usando um retângulo de 8 x 12 px com um traço de 4 px de espessura (# 252A2D ), que será alinhado ao canto inferior esquerdo da área de desenho ativa.

Passo 4

Termine o ícone atual adicionando um quadrado de 12 x 12 pxcom um traço de 4 px de espessura ( # 252A2D ) no canto inferior direito da área de desenho ativa, certificando-se de selecionar e agrupar todas as quatro formas juntas usando ocontrole. G atalho de teclado.

28. Como criar o ícone da régua

Nós estamos agora no nosso último ícone, então vá até o Artboard restante, e vamos encerrar as coisas!

Passo 1

Crie a seção superior da régua usando um retângulo de 20 x 6 pxcom um traço de 4 px de espessura ( nº 252A2D ), que será centralizado alinhado à borda superior da área de desenho ativa.

Passo 2

Termine o ícone e, com ele, o próprio projeto, adicionando umretângulo de 6 x 20 px com um traçado de 4 px de espessura (# 252A2D ), que será centralizado na borda esquerda da área de desenho ativa. Como sempre, quando terminar, não esqueça de selecionar e agrupar ( Control-G ) as duas formas juntas antes de pressionar o botão salvar.

Bom trabalho!

Pode ter sido mais longo do que o habitual, mas se você chegou ao fim, agora você deve ter um pequeno e prático conjunto de ícones que você pode colocar em uso em qualquer projeto futuro.

Como sempre, espero que você tenha conseguido acompanhar cada passo e aprendido algo novo e útil ao longo do caminho.

Dito isto, se você tiver alguma dúvida, sinta-se à vontade para publicá-las na seção de comentários e eu entrarei em contato com você o mais breve possível!