Ícones com efeito Flat Design

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tutorial Ícones com efeito Flat Design

Mensagem por Holkis 13.11.15 14:59

Ícones com efeito Flat Design Theme
Í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 2tYNykM Criando o documento
Crie um documento com dimensões '500x500'.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design ZdIkWnk

Ícones com efeito Flat Design 2tYNykM Criando o ícone
- Passo:
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)
Ícones com efeito Flat Design 8gYxubv

- Passo:
Selecione a ferramente de colorir e pinte da cor desejada. No meu caso, será azul claro.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design FOy1lAd

- Passo:
Posicione sua render e deixe-a entre 20 à 40 pixels menor que o círculo.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design EdVdaOz

- Passo:
Crie uma nova camada entre a render e o círculo.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design 3PvadSk

- Passo:
Utilize a ferramenta 'Seleção Livre'.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design FjPfFHZ

Nesta camada que acabou de criar, faça uma ligação de ponto à ponto.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design XXkiBQO

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)
Ícones com efeito Flat Design MY4pgnq

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)
Ícones com efeito Flat Design MXXx3rD

- Passo:
Crie uma outra camada entre a sombra e o círculo.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design 8QYe0Hb

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)
Ícones com efeito Flat Design 3TNRziR

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)
Ícones com efeito Flat Design 4XB5xR1

Agora, use a ferramenta de Movimento.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design SmkKzfQ

Posicione a sombra de forma que ela se encaixe com a render e o círculo.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design QqNjUgR

Depois, diminua a opacidade dela para 30%.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design TLb9mqG

O resultado já será o nosso efeito flat.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design KT1u2fO

- 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)
Ícones com efeito Flat Design USRCZ8I

Aumente o tamanho da terceira camada em 10 pixels, depois pinte-a de cinza escuro.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design Txxejc3

Seu resultado será uma borda em volta do ícone.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design GUopdSI

- Passo:
Neste passo, iremos dar um leve contorno de sombra. Para isso, vá em Filtros Artmeiros Sombra e Luz Artmeiros Sombra projetada.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design ZwFVM9S

Configure como a imagem abaixo.
(carregue na imagem para aumentar)
Ícones com efeito Flat Design Mpzzvq6

Ícones com efeito Flat Design 2tYNykM Resultados finais
Ícones com efeito Flat Design BGydayb Ícones com efeito Flat Design 6FZg47U Ícones com efeito Flat Design SZsXLdv



:copyright: Fórum dos Fóruns & @Apollo


Ícones com efeito Flat Design Act_bottom 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

Holkis
Hiper Membro

Membro desde : 21/04/2015
Mensagens : 3550
Pontos : 4277

http://www.holkis.net/ https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos