Flat Design – Quais as Melhores Cores, Fontes e como Fazer a Sombra no Photoshop

Nesse post você vai aprender como criar o efeito de Sombra do Flat Design no Photoshop, esse que você acabou de ver ai em cima. Mas antes, é bom entender melhor o que é Flat Design e o porque ele caiu no gosto da maioria dos designers. Será que ele veio pra ficar?

De maneira rápida vamos conversar um pouco pra saber no que essa técnica consiste e quais são suas principais características.

Para melhorar sua navegação interna no post, resolvi criar um menu com os principais temas abordados:

O que é Flat Desgin

Flat Design - Sombra Flat no Photoshop

O Flat Design é um estilo gráfico que preza pela simplicidadeclareza, trazendo sempre uma mensagem direta e de fácil entendimento.

Com forte influência do minimalismo, não existem bordas, degrades, reflexos e outros mil detalhes realistas, muito pelo contrário… O estilo acredita que quanto mais simples e direta for a imagem, melhor será transmitida a mensagem.

Observe ao lado essa diferença entre os dois ícones:

A tradução do termo por si só já explica bem o conceito:

Flat Design (em português: Projeto Plano, Design Plano)

Com isso o Flat se baseia em uso de formas vetoriais, responsivas e minimalistas, trazendo uma identidade visual leve e com foco na transmissão real da mensagem.

Grandes empresas que aderiram o Flat Design

Grandes marcas também se renderam ao estilo e alteraram suas identidades visuais. Confira a lista com algumas gigantes que entraram na onda Flat:

Pepsi

 

Google Chrome

 

Suite de Programas da Adobe

YouTube

 

American Airlines

 

eBay

 

Lista apurada por Falkon Digital.

Além de outras gigantes de diferentes ramos, como por exemplo a maior emissora de televisão do Brasil (Rede Globo) e a Microsoft com seu sistema operacional Windows.

 


O estilo é focado em 2 pilares:

  1. Cor e;
  2. Tipografia.

1. Cor

As cores mais utilizadas no Flat Design são fortes e vibrantes, utilizando bastante os tons e a saturação das cores.

Tem um site bem bacana que pode te auxiliar na hora de escolher a cor perfeita para seu projeto Flat. Estou falando do Flat UI Colors.

Para selecionar a cor basta clicar sobre a cor desejada, ela será copiada e agora resta apenas você colocar o código em sua biblioteca de cores.

 

Outro exemplo bacana são essas paletas de cores que a Printi postou em seu blog, confere aí:

Paleta de Cores Flat Design

 

Para facilitar sua vida, vou postar os códigos de cada cor. Da esquerda pra direita, da tonalidade cima, para baixo.

  • #4ec8af
  • #239f85
  • #39ca74
  • #30ad63
  • #60ade0
  • #559ac5
  • #ae7cc2
  • #8d48ab
  • #35495d
  • #566471
  • #aab7b7
  • #98a3a3
  • #eff3f3
  • #bdc3c7
  • #e54d42
  • #bf3930
  • #e99755
  • #d15419
  • #f0c330
  • #f19b2c

 

Se você tiver afim de dar um ar retrô para sua image, utilize os seguintes tons:

  • #a4c6c2
  • #147b81
  • #1482ca
  • #75606f
  • #e9866e
  • #155290

Por conter uma menor saturação que as cores principais, uma boa dica é misturar com o branco as cores retrô para dar uma suavizada em seu projeto.

2. Tipografia

Tipografia para o Flat DesignA tipografia é peça fundamental no Flat, ela deve ser clara e direta, assim como as ilustrações.

Tudo deve girar em um consenso, encontrar o ponto certo para se atingir a harmonia do projeto é de suma importância.

A fonte não deve ser extravagante nem muito detalhada, deste modo ela estaria destoando da principal característica do estilo, se lembra qual é? A simplicidade.

A fonte Futura pode ser um bom exemplo de fonte moderna, simples e que se encaixa dentro dos padrões Flat.

E para facilitar sua vida novamente, segue uma seleção com 26 fontes grátis pra download:

26 Fontes para Flat Design

1 – Manteka

 

2 – Sintony – Free Google Web Font

 

3 – Bellota

 

4 – Corbert Regular

 

5 – Frontage Typeface

 

6 – Aleo | Free Font Family

 

7 – Graystroke Free Font

 

8 – Hemigraphy Free Font

 

9 – Laika Free

 

10 – Seagle Free Font

 

11 – Alex Brush

 

12 – Aller

 

13 – Amble

 

14 – Code

 

15 – Exo

 

16 – Museo Slab

 

17 – Quicksand

 

18 – Sina Nova

 

19 – Sofia Pro

 

20 – Source Sans Pro

 

21 – Free Langdon Font

 

22 – Linux Libertine

 

23 – Museo Sans 500

 

24 – Nexa Free Font

 

25 – Nougatine

 

26 – Chunkfive

 

Seleção de fontes feita por Smashing Hub.

Vídeo Aula: Como fazer a Sombra Flat Design no Photoshop

Enfim, chegou a hora de abrir seu Photoshop para aprender a maneira mais simples de criar a tradicional sombra Flat Design.

Em menos de 2 minutos você vai conseguir aplicar esse efeito:

 

Preparado? Aperte o Play e bom aprendizado!

Qualquer comentário sobre o post ou dúvida que tenha ficado sobre a vídeo aula, pode deixar nos comentários logo abaixo que estarei lendo e respondendo todo mundo! =)

Curso Profissão Photoshop: já conhece?

Você sabia que é possível trabalhar com o Photoshop? Exatamente, você pode fazer dele a sua profissão!

Eu falo isso por experiência própria, hoje eu ganho minha vida fazendo edições… E foi pensando em repassar todo o meu conhecimento que eu criei o curso Profissão Photoshop.

Lá eu compartilho todas as minhas técnicas de serviço e como você pode começar ou se aprimorar na área.

Você pode trabalhar com o Photoshop de 3 maneira:

  1. Tendo seu próprio negócio
  2. Trabalhando em gráficas e agências da área
  3. Trabalhando em qualquer outro serviçoparalelamente com o Photoshop também

Clique aqui e conheça todos os detalhes sobre o curso Profissão Photoshop! ?

 

7 Comentários





  1. Obrigada pelo blog, Alisson! Estou aprendendo desenho digital e suas dicas me ajudam muito. Bom trabalho!

    Responder

  2. Pessoal, o curso é simplesmente fantástico. Super indico. Compre sem medo de ser feliz!!!!

    Responder

  3. Olá.
    Parabéns pelo post. bem “flat! rs
    gostei das suas dicas, gostaria inclusive de saber se você sabe como ou onde adquirir uma paleta pro photoshop com esse padrão de cores? pode ser no estilo .aco pra add às amostras ou como style.

    de já. Grato.

    abraço;

    Responder

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *