[TUTORIAL] Ícones com efeito Flat Design
Página 1 de 1 • Compartilhe
[TUTORIAL] Ícones com efeito Flat Design
![]() | Ícones com efeito Flat Design |
Este tutorial irá ensinar como criar um ícone moderno que está sendo muito usado, principalmente em celulares Android. O flat design é, basicamente, uma sombra projetada da imagem principal.
Programa utilizado: GIMP
--> Tutorias gráficos <--
Ícones com efeito Flat Design
Ícones com efeito Flat Design
![]() | Criando o documento |
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design ZdIkWnk](https://i.imgur.com/ZdIkWnk.jpg)
![[TUTORIAL] Ícones com efeito Flat Design ZdIkWnk](https://i.imgur.com/ZdIkWnk.jpg)
![]() | Criando o ícone |
Selecione a ferramenta 'Seleção Elíptica'. Dê dois cliques no centro da tela para abrir as configurações da ferramenta e ajustar as medidas exatas.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design 8gYxubv](https://i.imgur.com/8gYxubv.jpg)
![[TUTORIAL] Ícones com efeito Flat Design 8gYxubv](https://i.imgur.com/8gYxubv.jpg)
2º - Passo:
Selecione a ferramente de colorir e pinte da cor desejada. No meu caso, será azul claro.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design FOy1lAd](https://i.imgur.com/fOy1lAd.jpg)
![[TUTORIAL] Ícones com efeito Flat Design FOy1lAd](https://i.imgur.com/fOy1lAd.jpg)
3º - Passo:
Posicione sua render e deixe-a entre 20 à 40 pixels menor que o círculo.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design EdVdaOz](https://i.imgur.com/EdVdaOz.jpg)
![[TUTORIAL] Ícones com efeito Flat Design EdVdaOz](https://i.imgur.com/EdVdaOz.jpg)
4º - Passo:
Crie uma nova camada entre a render e o círculo.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design 3PvadSk](https://i.imgur.com/3PvadSk.jpg)
![[TUTORIAL] Ícones com efeito Flat Design 3PvadSk](https://i.imgur.com/3PvadSk.jpg)
5º - Passo:
Utilize a ferramenta 'Seleção Livre'.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design FjPfFHZ](https://i.imgur.com/FjPfFHZ.jpg)
![[TUTORIAL] Ícones com efeito Flat Design FjPfFHZ](https://i.imgur.com/FjPfFHZ.jpg)
Nesta camada que acabou de criar, faça uma ligação de ponto à ponto.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design XXkiBQO](https://i.imgur.com/XXkiBQO.jpg)
![[TUTORIAL] Ícones com efeito Flat Design XXkiBQO](https://i.imgur.com/XXkiBQO.jpg)
Atenção: Esta é a parte que você deverá ter cuidado, pois será como a sombra irá ficar.
Após feita a seleção, pinte-a de preto.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design MY4pgnq](https://i.imgur.com/mY4pgnq.jpg)
![[TUTORIAL] Ícones com efeito Flat Design MY4pgnq](https://i.imgur.com/mY4pgnq.jpg)
Faça isso com todos os pontos possíveis em que a sombra apareça e/ou seja possível.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design MXXx3rD](https://i.imgur.com/mXXx3rD.jpg)
![[TUTORIAL] Ícones com efeito Flat Design MXXx3rD](https://i.imgur.com/mXXx3rD.jpg)
6º - Passo:
Crie uma outra camada entre a sombra e o círculo.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design 8QYe0Hb](https://i.imgur.com/8QYe0Hb.jpg)
![[TUTORIAL] Ícones com efeito Flat Design 8QYe0Hb](https://i.imgur.com/8QYe0Hb.jpg)
Agora, clique com o botão direito do mouse na camada do círculo e depois em 'Alfa para seleção'. Após isso, selecione a camada da sombra e aperte 'Ctrl+C'.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design 3TNRziR](https://i.imgur.com/3TNRziR.jpg)
![[TUTORIAL] Ícones com efeito Flat Design 3TNRziR](https://i.imgur.com/3TNRziR.jpg)
Tire a opacidade da camada da sombra e selecione a camada feita entre a sombra e o circulo. Então aperte'Ctrl+V'.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design 4XB5xR1](https://i.imgur.com/4XB5xR1.jpg)
![[TUTORIAL] Ícones com efeito Flat Design 4XB5xR1](https://i.imgur.com/4XB5xR1.jpg)
Agora, use a ferramenta de Movimento.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design SmkKzfQ](https://i.imgur.com/SmkKzfQ.jpg)
![[TUTORIAL] Ícones com efeito Flat Design SmkKzfQ](https://i.imgur.com/SmkKzfQ.jpg)
Posicione a sombra de forma que ela se encaixe com a render e o círculo.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design QqNjUgR](https://i.imgur.com/qqNjUgR.jpg)
![[TUTORIAL] Ícones com efeito Flat Design QqNjUgR](https://i.imgur.com/qqNjUgR.jpg)
Depois, diminua a opacidade dela para 30%.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design TLb9mqG](https://i.imgur.com/tLb9mqG.jpg)
![[TUTORIAL] Ícones com efeito Flat Design TLb9mqG](https://i.imgur.com/tLb9mqG.jpg)
O resultado já será o nosso efeito flat.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design KT1u2fO](https://i.imgur.com/KT1u2fO.jpg)
![[TUTORIAL] Ícones com efeito Flat Design KT1u2fO](https://i.imgur.com/KT1u2fO.jpg)
7º - Passo:
Duplique a camada do círculo três vezes e coloque uma por cima e outra por baixo dele. A primeira, pinte de branco é coloque a opacidade dela em 20%. Você terá um resultado assim:
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design USRCZ8I](https://i.imgur.com/USRCZ8I.jpg)
![[TUTORIAL] Ícones com efeito Flat Design USRCZ8I](https://i.imgur.com/USRCZ8I.jpg)
Aumente o tamanho da terceira camada em 10 pixels, depois pinte-a de cinza escuro.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design Txxejc3](https://i.imgur.com/txxejc3.jpg)
![[TUTORIAL] Ícones com efeito Flat Design Txxejc3](https://i.imgur.com/txxejc3.jpg)
Seu resultado será uma borda em volta do ícone.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design GUopdSI](https://i.imgur.com/GUopdSI.jpg)
![[TUTORIAL] Ícones com efeito Flat Design GUopdSI](https://i.imgur.com/GUopdSI.jpg)
8º - Passo:
Neste passo, iremos dar um leve contorno de sombra. Para isso, vá em Filtros


(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design ZwFVM9S](https://i.imgur.com/ZwFVM9S.jpg)
![[TUTORIAL] Ícones com efeito Flat Design ZwFVM9S](https://i.imgur.com/ZwFVM9S.jpg)
Configure como a imagem abaixo.
(carregue na imagem para aumentar)
![[TUTORIAL] Ícones com efeito Flat Design Mpzzvq6](https://i.imgur.com/Mpzzvq6.jpg)
![[TUTORIAL] Ícones com efeito Flat Design Mpzzvq6](https://i.imgur.com/Mpzzvq6.jpg)
![]() | Resultados finais |
![[TUTORIAL] Ícones com efeito Flat Design BGydayb](https://i.imgur.com/bGydayb.png)
![[TUTORIAL] Ícones com efeito Flat Design 6FZg47U](https://i.imgur.com/6FZg47U.png)
![[TUTORIAL] Ícones com efeito Flat Design SZsXLdv](https://i.imgur.com/SZsXLdv.png)
© Fórum dos Fóruns & @Apollo
![]() | Se surgir alguma dúvida relacionada com este tutorial, crie um tópico na categoria 'Outras questões' com o seguinte título: Ícones com efeito Flat Design |
Holkis- ⭑ Membro Entusiasta ⭑
-
Membro desde : 21/04/2015
Mensagens : 3547
Pontos : 4267

» [TUTORIAL] Efeito de luz ou reflexo
» [TUTORIAL] Efeito Dispersão
» [TUTORIAL] Efeito Sharingan
» Efeito de ícones + texto
» Efeito nos ícones do fórum
» [TUTORIAL] Efeito Dispersão
» [TUTORIAL] Efeito Sharingan
» Efeito de ícones + texto
» Efeito nos ícones do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos