Como transformar rapidamente ícones chatos em obras-primas originais

Publicados: 2022-03-11

Os ícones são parte integrante dos nossos designs. São pistas visuais para indicar diversas ações e podem dar uma identidade única a um produto. Mas muitas vezes escolhemos celebrar sua importância baixando os mesmos conjuntos de ícones e fazendo com que cada ícone de cada site pareça mais ou menos o mesmo. Que maneira de tratar algo de tamanha importância.

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

Princípios de design de materiais do Google

Como diz o Google, “o material é uma metáfora”. Ele empresta 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íveis e podem ser aplicados rapidamente para melhorar o apelo das interfaces e a experiência do usuário.

1. Use formas geométricas simples e cores fortes

A tendência do flat design inspirou o Material Design, que também se baseia em formas planas básicas. Selecione cuidadosamente qual forma melhor representa o elemento que o ícone está retratando.

2. Adicione profundidade com sombreamento sutil

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

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

3. Use sombras de cores para substituir sombras projetadas

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

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

Aplicaremos uma versão simplificada 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

Confira o conjunto completo de ícones gratuitos do Google aqui.

Vamos começar.

1. Ícone de parafuso

Quebre o ícone original em dois e faça a parte superior parecer levantada. Você pode conseguir isso criando um efeito de sombra na interseção das duas formas. Use três tons de amarelo - mais claro na parte superior, um mais escuro na parte inferior e mantenha o tom mais escuro para a sombra.

2. Ícone de bate-papo

No ícone original, temos uma sugestão de efeito de sombra no espaço entre as duas bolhas, é onde você criará uma sombra.

Na forma inferior, selecione o ponto que forma o ângulo reto na lacuna e mova-o para cima para a esquerda até formar um ângulo reto no canto superior esquerdo.

Duplique a bolha superior e mova a cópia para baixo e para a direita. Selecione a cópia e a forma de bolha inferior, use o “Pathfinder” para criar uma divisão e mantenha apenas a interseção com sua cópia anterior.

Agora você pode aplicar três tons de azul e dar o mais claro em cima, o mais escuro no meio e o segundo mais escuro na parte de baixo.

3. Ícone de Marca de Verificação

Vamos criar um efeito de papel dobrado.

Duplique o ícone e remova os dois pontos extras no canto superior direito e, em seguida, na extremidade esquerda para obter duas peças.

Duplique a dobra esquerda e mova-a para cima da direita.

Cruze as duas formas para criar o efeito de sombra. Em seguida, aplique três tons de cor, mantendo o mais escuro para a sombra, o segundo mais escuro para a peça longa e o tom mais claro para o topo.

4. Ícone de bandeira

Comece arredondando as bordas e, em seguida, extraia a base da bandeira.

Para criar um efeito de dobra, trace duas linhas que se cruzam na diagonal. Usando o “Pathfinder”, divida a forma da bandeira com as linhas e aplique três tons de verde à bandeira, mantendo a base cinza.

5. Ícone de coração

Duplique o ícone do coração.

Isole a metade esquerda da forma.

Trace uma linha diagonal para baixo, vindo do ponto superior direito.

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

6. Ícone de Montanhas

A lacuna vazia dentro do ícone original indica onde podemos colocar uma sombra.

Crie as duas formas triangulares de cada escolha.

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

Aplique três tons de marrom, mantendo o mais claro à esquerda, o segundo mais claro no triângulo grande e o mais escuro na sombra do meio. Aplique algum raio de 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 o ponto superior do meio para cima até parecer um diamante.

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

Selecione as duas formas inferiores e aplique a ferramenta “Divide” do painel “Pathfinder”.

Das formas cruzadas resultantes, mantenha apenas as duas peças inferiores e exclua quaisquer pontos extras.

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

9. Ícone de letra

Com a “Direct Selection Tool (A)”, escolha o segundo ponto mais alto da forma do envelope.

Adicione um ponto no segmento à sua direita usando a “Ferramenta Caneta”.

Agora que você tem um ponto extra, você pode remodelar esse espaço negativo para parecer um papel levantando os dois pontos superiores e movendo-os para a direita e para a esquerda, como mostrado.

Selecione tudo e aplique uma divisão no painel “Pathfinder”. Separe a forma de papel superior do envelope e duplique a parte do envelope em cima do papel para cortar a forma da sombra antes de aplicar três tons de azul.

10. Ícone do Bolo

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

Reduza sua largura movendo as bordas esquerda e direita para dentro.

Mova a forma resultante para 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 ao lado da base estreita do bolo que você criou anteriormente.

Complete seu bolo aplicando um laranja claro na cobertura e na vela, um tom mais escuro na base e um laranja ainda mais escuro para a forma da chama e a borda da sombra.

Melhore a aparência do seu conjunto de ícones

A criação de ícones com o estilo do Material pode ser feita com simplicidade. Você só precisa de uma boa combinação de formas geométricas pensativas, tons de cores fortes e um efeito de sombra.

A boa notícia é que você nem precisa criar todos os ícones do zero, como fizemos neste tutorial. Você pode começar com ícones simples e gratuitos existentes e aplicar as técnicas simples que acabou de aprender.

Deixe-nos saber o que você pensa! Por favor, deixe seus pensamentos, comentários e feedback abaixo.

• • •