design gráfico - cores
TRANSCRIPT
![Page 1: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/1.jpg)
Prof. Nécio de Lima Verashttp://lattes.cnpq.br/8284657916723590
Noções de Design Gráfico
Unidade I - Introdução ao Design Gráfico
![Page 2: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/2.jpg)
Prof. Nécio de Lima Verashttp://lattes.cnpq.br/8284657916723590
Objetivo
Diferenciar e adequar combinação de cores conforme critérios de psicologia das cores
Página da disciplina na Web
![Page 3: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/3.jpg)
Prof. Nécio Veras
Cor tem um impacto Cor tem um impacto emocionalemocional
• 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.
![Page 4: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/4.jpg)
Prof. Nécio Veras
Harmonia das coresHarmonia 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.
![Page 5: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/5.jpg)
Prof. Nécio Veras
Roda de cor ou círculo Roda de cor ou círculo cromáticocromá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.
![Page 6: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/6.jpg)
Prof. Nécio Veras
Cores complementaresCores 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.
![Page 7: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/7.jpg)
Prof. Nécio Veras
Esquema de cores que Esquema de cores que combinamcombinam
• 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.
![Page 8: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/8.jpg)
Prof. Nécio Veras
Escolha uma cor baseEscolha uma cor base
![Page 9: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/9.jpg)
Prof. Nécio Veras
Esquemas de coresEsquemas 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.
![Page 10: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/10.jpg)
Prof. Nécio Veras
Esquema triádicoEsquema 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.
![Page 11: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/11.jpg)
Prof. Nécio Veras
Prática simples...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.
![Page 12: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/12.jpg)
Prof. Nécio Veras
![Page 13: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/13.jpg)
Prof. Nécio Veras
Cores representadas em Cores representadas em HexadecimalHexadecimal
• 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.
![Page 14: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/14.jpg)
Prof. Nécio Veras
KulerKuler
![Page 15: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/15.jpg)
Prof. Nécio Veras
![Page 16: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/16.jpg)
Prof. Nécio Veras
![Page 17: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/17.jpg)
Prof. Nécio Veras
Mais claro ou mais escuroMais 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.
![Page 18: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/18.jpg)
Prof. Nécio Veras
Mudança de saturação no Mudança de saturação no sitesite
Agora o site ficou “sem graça”.
![Page 19: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/19.jpg)
Prof. Nécio Veras
Esquema de cores Esquema de cores tetrádicotetrá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.
![Page 20: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/20.jpg)
Prof. Nécio Veras
Novas versões do siteNovas versões do site
![Page 21: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/21.jpg)
Prof. Nécio Veras
Testando layouts e coresTestando layouts e cores
![Page 22: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/22.jpg)
Prof. Nécio Veras
Referências importantes Referências importantes sobre coressobre cores
• http://www.amopintar.com/harmonia-das-cores• http://kuler.adobe.com/
![Page 23: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/23.jpg)
Prof. Nécio Veras
ExercíciosExercícios
![Page 24: Design Gráfico - Cores](https://reader031.vdocuments.net/reader031/viewer/2022012307/55611c00d8b42a98508b477a/html5/thumbnails/24.jpg)
Prof. Nécio Veras
ReferênciasReferências
Esta apresentação foi baseada nos materiais didáticos de:
– Prof. Régis Pires (Curso de Introdução ao Web Design) - https://sites.google.com/site/ifpiregis/pronatec/introducao-ao-web-design
Também no livro Use a Cabeça – WebDesign