Os ícones são parte integrante do nosso design. São pistas visuais que indicam diversas ações e podem conferir ao produto uma identidade única. Porém, muitas vezes optamos por celebrar sua importância baixando os mesmos conjuntos de ícones e tornando cada ícone de cada site igual ao anterior. Que maneira de tratar algo tão importante!

Para resolver esse problema, criei um guia para ajudar os designers a adicionar profundidade visual a seus ícones e torná-los exclusivos para o produto que representam. Este tutorial é amplamente inspirado no guia do Google Material Design.

Os princípios do design de materiais do Google

Como diz Google , 'O material é uma metáfora.' Ele pega emprestadas dicas visuais do mundo físico e cria uma nova linguagem visual para padronizar todas as suas interfaces. Os princípios do Material Design são acessível e isso pode ser aplicado rapidamente para melhorar o apelo visual e a experiência do usuário em várias interfaces.

1. Use formas geométricas simples e cores marcantes

A tendência de design “plano” do Material Design, que também se baseia em formas planas, selecionou cuidadosamente a forma que melhor representou o elemento que o ícone está representando. Selecione cuidadosamente a forma que melhor representa o elemento que o ícone está retratando.

2. Adicione profundidade com sombras sutis

Uma sombra projetada é uma boa maneira de enganar os olhos e dar ao seu projeto uma sensação de profundidade, porque simula o efeito da luz em um objeto.

Observe que a luz natural geralmente é simulada como vindo do canto superior esquerdo.

3. Use tons de cores para substituir sombras projetadas

Cada cor é usada em vários matizes para simular a profundidade visual. Por exemplo, no ícone do Gmail, você pode ver diferentes tons de vermelho que são usados ​​para a forma de M, e um tom mais escuro para cinza é usado embaixo para a aba do envelope.

Como você pode fazer isso: demonstrações passo a passo

Aplicaremos uma versão mais simples do estilo Material Design e, para cada ícone, usaremos apenas três tons da mesma cor e manteremos as sombras planas e curtas, em vez do efeito comum de 'sombra longa'.

Recursos

• Baixe os dez ícones com os quais trabalharemos a seguir Aqui .
• Confira todo o conjunto de ícones gratuitos do Google Aqui .

Vamos começar.

1. Ícone de relâmpago

Divida o ícone em dois e faça o topo parecer elevado. Você pode conseguir isso criando um efeito de sombra na interseção de ambas as formas. Use três tons de amarelo - o mais claro no topo, o mais escuro na parte inferior e mantenha o que é ainda mais escuro para a sombra.

2. Ícone de bate-papo

No ícone original, temos um pouco do efeito de sombra no espaço entre as duas bolhas, e é aí que você criará uma sombra.

Na forma abaixo, selecione o ponto no ângulo direito no espaço e mova-o para a esquerda até formar um ângulo direito no canto superior esquerdo.

Duplique a bolha acima e mova a cópia para baixo e para a direita. Selecione a cópia e a forma de bolha abaixo dela, use o Pathfinder para criar uma fatia e mantenha apenas uma interseção com a cópia anterior.

Agora você pode aplicar os três tons de azul e colocar o mais claro no topo, um mais escuro no meio e o segundo mais escuro embaixo.

3. Ícone de marca de verificação

Vamos criar um efeito de papel dobrado. Duplique o ícone e remova as duas pontas extras no canto superior direito, depois o lado esquerdo do outro lado para remover mais duas peças.

Duplique a dobra à esquerda e mova-a sobre a direita.

Cruze as duas formas para criar um efeito de sombra. Em seguida, aplique os três tons de cor, deixando o mais escuro para a sombra, o segundo mais escuro para a peça mais longa e o mais claro para o topo. ### 4. Ícone de bandeira

Comece arredondando as bordas e remova a base da bandeira.

Crie um efeito de dobra, desenhe duas linhas que se cruzam na diagonal. Use o “Pathfinder”, divida a forma da bandeira com as linhas e aplique três tons de verde à bandeira, deixando o cinza base.

5. Ícone de coração

Duplique o ícone de coração.

Isole a metade esquerda da forma.

Desenhe uma linha diagonal para baixo a partir do ponto superior direito.

Sobreponha a forma resultante com o coração e mova-o para a direita para subtrair a forma da sombra. Aplique seus três tons de rosa.

6. Ícone de montanhas

O espaço vazio dentro do ícone original indica onde podemos colocar uma sombra.

Crie duas formas de triângulo de cada pico.

Mova uma cópia do menor para a direita e extraia a interseção resultante como a forma de sombra.

Aplique três tons de marrom, tendo o mais claro à esquerda, o segundo mais claro para o maior triângulo e o mais escuro para a sombra no meio. Aplique um pequeno raio no canto para suavizar o resultado.

7. Ícone de Pessoas

Selecione e duplique a parte inferior da pessoa à esquerda. Alinhe essa cópia com a pessoa à direita. Agora, selecione as três formas sobrepostas e aplique a ferramenta 'Divide' do painel 'Pathfinder'. Agora, implemente as cores para finalizar.

8. Ícone Quadrado Flutuante

Selecione a forma inferior e mova a ponta do meio superior para cima até que se pareça com um diamante.

Duplique a forma superior do diamante e mova a cópia para baixo 10 ou 20 px.

Selecione as duas formas inferiores e aplique a ferramenta 'Divide' no painel 'Pathfinder'.

Das formas que se cruzam resultantes, apenas mantenha as duas peças inferiores e apague todos os pontos extras.

Termine aplicando três tons de vermelho enquanto atribui o mais escuro no meio.

9. Ícone de carta

Com a ferramenta “Seleção direta (A)”, escolha o segundo ponto mais alto da forma da letra.

Adicione um ponto no segmento à sua direita usando a ferramenta 'Caneta'.

Agora que você tem um ponto extra, pode remodelar esse espaço negativo para torná-lo parecido com papel, levantando os dois pontos superiores e movendo-os para a direita e esquerda, conforme mostrado.

Selecione tudo e aplique uma forma divisória no painel 'Pathfinder'. Separe a forma do papel superior do envelope e, em seguida, duplique a parte superior do envelope na parte superior do papel para cortar a forma da sombra antes de aplicar três tons de azul.

10. Ícone de Bolo

Isole uma versão duplicada da parte inferior do bolo.

Ele reduz sua largura movendo as bordas esquerda e direita para dentro.

Mova a forma resultante em cima do ícone original e estenda os pontos mais altos para sobrepor a forma de glacê.

Crie uma divisão de todas as formas sobrepostas com o “Pathfinder” e remova os pontos extras próximos à base estreita do bolo que você criou anteriormente.

Complete o seu bolo aplicando uma laranja clara na cobertura e na vela, um tom mais escuro na base e ainda um laranja mais escuro no formato da chama e na sombra da borda.

Melhore a aparência do seu conjunto de ícones

A criação de ícones com o estilo Material pode ser realizada com simplicidade. Você só precisa de uma boa combinação de formas geométricas bem pensadas, tons de cores ricas e efeitos de sombra projetada.

A boa notícia é que você não precisa criar todos os ícones do zero, como fizemos neste tutorial. Você pode começar a partir de ícones planos livres existentes e aplicar as técnicas simples que acabou de aprender.

Eu realmente gostaria de ver o que você cria. Sinta-se à vontade para compartilhar seus comentários e ícones personalizados.