design gráfico - cores

Prof. Nécio de Lima Verashttp://lattes.cnpq.br/8284657916723590

Noções de Design Gráfico

Unidade I - Introdução ao Design Gráfico

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

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.

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.

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.

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.

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.

Prof. Nécio Veras

Escolha uma cor baseEscolha uma cor base

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.

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.

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.

Prof. Nécio Veras

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.

Prof. Nécio Veras

KulerKuler

Prof. Nécio Veras

Prof. Nécio Veras

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.

Prof. Nécio Veras

Mudança de saturação no Mudança de saturação no sitesite

Agora o site ficou “sem graça”.

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.

Prof. Nécio Veras

Novas versões do siteNovas versões do site

Prof. Nécio Veras

Testando layouts e coresTestando layouts e cores

Prof. Nécio Veras

Referências importantes Referências importantes sobre coressobre cores

• http://www.amopintar.com/harmonia-das-cores• http://kuler.adobe.com/

Prof. Nécio Veras

ExercíciosExercícios

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