Noções de Design GráficoUnidade I - Introdução ao Design              Gráfico                          Prof. Nécio de Lima...
ObjetivoDiferenciar e adequar combinação de coresconforme critérios de psicologia das cores        Página da disciplina na...
Cor tem um impacto                                emocional• A cor da lagosta é usada como base para  toda a página.• O ve...
Harmonia das cores• Cores harmoniosas são aquelas que funcionam bem  em conjunto ou justapostas, e que produzem um  esquem...
Roda de cor ou círculo                      cromático• Ferramenta que serve de base para todas as demais  ferramentas de c...
Cores complementares       • Uma harmonia complementar é         intrinsecamente uma harmonia de         contraste.       ...
Esquema de cores que                  combinam• Esquemas de cores são mais que  simplesmente coleções de cores.   – Um esq...
Escolha uma cor base               Prof. Nécio Veras
Esquemas de cores• Há vários esquemas de cores:  monocromático, análogo, complementar,  triádico, tetrádico, etc.• Eles sã...
Esquema triádico• Um dos mais usados.• Usa 3 cores igualmente  espaçadas em torno da roda  de cores.• Qualquer uma delas p...
Prática simples...• Crie uma paleta de 3 cores baseada na  logomarca a seguir. Dica: Escolha uma cor base e construa sua p...
Prof. Nécio Veras
Cores representadas em                   Hexadecimal• Valores de cores em haxadecimal possuem 6  caracteres como: #572266....
Kuler        Prof. Nécio Veras
Prof. Nécio Veras
Prof. Nécio Veras
Mais claro ou mais escuro• Se as cores de um site estiverem muito escuras é possível  clareá-las.• Saturação é o termo par...
Mudança de saturação no         site Agora o site ficou “sem graça”.                                   Prof. Nécio Veras
Esquema de cores                       tetrádico• Quando o site está “sem graça” significa que as cores  estão muito clara...
Novas versões do site                Prof. Nécio Veras
Testando layouts e cores                 Prof. Nécio Veras
Referências importantes                   sobre cores• http://www.amopintar.com/harmonia-das-cores• http://kuler.adobe.com...
Exercícios             Prof. Nécio Veras
ReferênciasEsta apresentação foi baseada nos materiaisdidáticos de:  –   Prof. Régis Pires (Curso de Introdução ao Web    ...
Upcoming SlideShare
Loading in...5
×

Design Gráfico - Cores

2,786

Published on

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
2,786
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
68
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Design Gráfico - Cores

  1. 1. Noções de Design GráficoUnidade I - Introdução ao Design Gráfico Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
  2. 2. ObjetivoDiferenciar e adequar combinação de coresconforme critérios de psicologia das cores Página da disciplina na Web Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
  3. 3. Cor tem um impacto emocional• A cor da lagosta é usada como base para toda a página.• O vermelho intenso captura a atenção.• A textura de madeira serve de fundo para o conteúdo, dando a sensação de tábua de corte.• Dá fome.• Representa muito bem o conteúdo. Prof. Nécio Veras
  4. 4. Harmonia das cores• Cores harmoniosas são aquelas que funcionam bem em conjunto ou justapostas, e que produzem um esquema de cores atrativo.• O círculo cromático ou roda das cores pode ser utilizado de forma a ajudar na escolha das cores e combinações harmônicas. Prof. Nécio Veras
  5. 5. Roda de cor ou círculo cromático• Ferramenta que serve de base para todas as demais ferramentas de cores no mundo do design.• Diagrama circular que mostra diferentes cores e o relacionamento entre essas cores.• A roda é baseada em: – 3 cores primárias: vermelho, verde e azul. – 3 cores secundárias: amarelo, ciano e magenta. – 6 cores formadas pelas misturas das duas. Prof. Nécio Veras
  6. 6. Cores complementares • Uma harmonia complementar é intrinsecamente uma harmonia de contraste. • Escolha uma cor dominante, e utilize a complementar para acentos e toques de destaque. • Exemplo: utilizar uma cor para fundo e a outra para destacar os elementos de importância. Prof. Nécio Veras
  7. 7. Esquema de cores que combinam• Esquemas de cores são mais que simplesmente coleções de cores. – Um esquema de cores é um certo grupo de cores que combinam entre si. – Todo bom esquema de cores começa com uma única cor, chamada de cor base. Prof. Nécio Veras
  8. 8. Escolha uma cor base Prof. Nécio Veras
  9. 9. Esquemas de cores• Há vários esquemas de cores: monocromático, análogo, complementar, triádico, tetrádico, etc.• Eles são meios simples de selecionar diferentes tipos de paletas para usar em seu site.• São ferramentas importantes de design. Prof. Nécio Veras
  10. 10. Esquema triádico• Um dos mais usados.• Usa 3 cores igualmente espaçadas em torno da roda de cores.• Qualquer uma delas pode ser a cor base. Prof. Nécio Veras
  11. 11. Prática simples...• Crie uma paleta de 3 cores baseada na logomarca a seguir. Dica: Escolha uma cor base e construa sua paleta a partir dela. Prof. Nécio Veras
  12. 12. Prof. Nécio Veras
  13. 13. Cores representadas em Hexadecimal• Valores de cores em haxadecimal possuem 6 caracteres como: #572266.• Esse valor diz ao navegador quanto de vermelho, verde e azul deve ser exibido.• Há programas que permitem selecionar uma cor na roda de cores e transformá-la em hexa. ▫ Exemplo: Kuler - kuler.adobe.com• Kuler não tem somente um conversor de cores para hexa, mas permite observar paletas de outras pessoas e exportar suas próprias paletas. Prof. Nécio Veras
  14. 14. Kuler Prof. Nécio Veras
  15. 15. Prof. Nécio Veras
  16. 16. Prof. Nécio Veras
  17. 17. Mais claro ou mais escuro• Se as cores de um site estiverem muito escuras é possível clareá-las.• Saturação é o termo para dizer que uma cor está mais clara ou escura.• Quanto mais próximo do centro da roda de cores, mais escura é a cor. Prof. Nécio Veras
  18. 18. Mudança de saturação no site Agora o site ficou “sem graça”. Prof. Nécio Veras
  19. 19. Esquema de cores tetrádico• Quando o site está “sem graça” significa que as cores estão muito claras.• Se você não desejar deixar o site mais escuro, nem “sem graça”, pense em adicionar cores.• Podemos passar de um esquema de 3 para 4 cores.• O esquema tetrádico ou complementar duplo usa 4 cores arranjadas em dois pares de cores complementares.• Cuidado: distribuir igualmente essas 4 cores pode deixar o site bagunçado. Uma quarta cor deve ser usada com moderação. Prof. Nécio Veras
  20. 20. Novas versões do site Prof. Nécio Veras
  21. 21. Testando layouts e cores Prof. Nécio Veras
  22. 22. Referências importantes sobre cores• http://www.amopintar.com/harmonia-das-cores• http://kuler.adobe.com/ Prof. Nécio Veras
  23. 23. Exercícios Prof. Nécio Veras
  24. 24. ReferênciasEsta apresentação foi baseada nos materiaisdidáticos de: – Prof. Régis Pires (Curso de Introdução ao Web Design) - https://sites.google.com/site/ifpiregis/pronatec/intro ducao-ao-web-designTambém no livro Use a Cabeça – WebDesign Prof. Nécio Veras
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×