Saiba tudo sobre Cores - A melhor e mais Fácil maneira

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

cor
Teoria e Prática da Cor
Professor: Daniel Mental
Sistemas para Internet
UNIPÊ
Disciplina: Design Gráfico
Corpos Luminosos ou fontes primárias de luz: 
são aqueles que emitem luz, como por exemplo o Sol, as lâmpadas e a televisão.
Corpos Iluminados ou fontes secundárias de luz apenas refletem a luz como por exemplo a lua, um espelho de banheiro e uma maçã.
Faça-se a Luz! 
 e a Luz foi feita. (livro do Gênese, Bíblia Cristã)
Quando se olha para um a fonte secundária de luz ( um objeto que não emite luz), o que se enxerga na verdade é a luz que ela reflete.  
Esse objeto ira absorver parte da luz que incide nele e refletirá parte dela.  É essa “parte” refletida que nós enxergamos. Assim:
um objeto verde só é verde porque absorve todas as cores menos o verde, que é refletido. 
Um objeto branco é branco porque reflete quase toda a luz que incide nele.
 
Um objeto preto absorve praticamente toda a luz incidente. (o preto verdadeiro só existe em caso de ausência total de luz, o que costumamos chamar de preto se trata na verdade de um cinza muito escuro).
A luz que é absorvida se transforma em calor 
Por isso que vestir preto em dia ensolarado não é uma boa idéia, já que ele absorverá quase toda a luz , que por sua vez será transformada em calor.
Luz Visível
 Espectro eletromagnético
Luz Visível:
São as ondas que compreendem uma pequena faixa do espectro eletromagnético, situada entre os raios infravermelhos e os raios ultravioleta. 
Infra-vermelho
Ultra-violeta
Espectro Eletromagnético:
É o conjunto de todas as ondas conhecidas que se propagam no universo, desde as ondas de rádio até os raios cósmicos.
Cores LUZ e Cores PIGMENTO
Cores - LUZ:
São radiações luminosas que, dependendo do comprimento de onda, nos causam determinada sensação colorida.
Exemplo: 
emissão de luz de um monitor.
Cores - PIGMENTO:
São substâncias químicas que têm um poder de absorção e reflexão específicos sobre as radiações.
Exemplo: 
pigmentos, tintas.
Cores Primárias
Cores Puras, a partir delas criamos todas as outras cores.
Cores LUZ primárias 
(RGB)
Cores PIGMENTO primárias
(CMYK)
RED = vermelho
GREEN = verde
BLUE = azul violeta
C = ciano
M = magenta
Y = amarelo (yellow)
K = preto (black)
Cores Secundárias
Cores LUZ secundárias
Cores PIGMENTO secundárias
AMARELO
MAGENTA
CIANO
Obtemos as cores secundárias pela combinação das primárias, duas a duas, em proporções iguais.
VERDE
AZUL
VERMELHO
Cores Terciárias
As cores Terciárias são designadas desta forma, por resultarem da mistura entre uma cor primária com uma cor secundária.
Obtemos uma cor terciária quando:
Misturamos duas primárias em proporções diferentes, isto é, uma em maior quantidade que a outra.
Ou quando misturamos as três cores primárias, seja em proporções iguais ou não.
Cores Complementares
Ex: 
o vermelho é complementar do verde.
O azul é complementar do laranja.
As cores complementares são usadas
Para dar força e equilíbrio a um
trabalho criando contrastes.
Raramente se usa apenas cores complementares em um trabalho,
o efeito pode ser desastroso.
Cores complementares são as cores opostas no disco de cores.
Olhe atentamente para a figura acima. Fixe a atenção no pequeno ponto azul no centro da figura. Conte lentamente até 30 sem desviar o olhar. Depois olhe o quadrado ao lado, no ponto central e veja o que acontece.
Cores Complementares
Quando saturamos o olho com uma determinada cor, o cérebro projeta a cor complementar para que o olho volte ao seu equilíbrio.
Cores Complementares
Exemplo de site com cores complementares.
Cores Análogas
São cores de composição semelhante.
Elas são usadas para dar a
sensação de uniformidade.
A composição em cores análogas são consideradas elegantes, e podem ser equilibradas com uma cor complementar.
Cores análogas
Cores Análogas
Exemplo de site com cores análogas.
Temperatura da Cor
Quentes
Frias
Quentes
Frias
As cores quentes tendem para o amarelo e suas matizes com os alaranjados e avermelhados.
Calor
Alegria
Verão
Vibração
As cores quentes frias tendem para o azul, e as matizes entre o verde, azul e violeta
Paz
Calma
Harmonia
Melancolia
A figura acima se baseia em tons quentes e mostra uma mente inquieta, o pintor em processo de criação seu olhar é cheio de vida. 
A figura acima é baseada em tons frios. 
O pintor parece estar muito mais passivo. 
Ele apenas contempla o mundo, seu olhar é gelado e impessoal. 
Temperatura da cor
Olhe nessa caricatura do Pablo Picasso feita pelo Baptistão  como o uso de cores frias, ou de cores quentes altera o seu significado:
Matiz, Claridade e Saturação
São 3 as características ou atributos que determinam toda sensação de cor.
MATIZ: é o nome da cor. 
Exemplo: matiz azul, matiz amarela, matiz vermelha, etc.
CLARIDADE: É a variação de claro-escuro da cor, seu grau de luminosidade. 
Exemplo: azul claro, azul-médio, azul-escuro,etc.
SATURAÇÃO: refere-se à pureza da cor. Uma cor tem sua máxima saturação quando não possui nenhuma quantidade de branco, preto ou cinza.
Seleção de cores via Photoshop
Claridade
Min.
Max.
Matiz escolhida
saturação
min.
max.
Preto = Black = K
Na Prática, a Teoria é Outra...
A soma das 3 cores primárias em máxima intensidade geram o preto. Certo?
Isso é lindo na teoria, mas na prática é difícil de acontecer, por causa de impurezas nas tintas. Geralmente, a soma dessas cores em intensidade máxima resulta em um marrom turvo. O “K” serve, então para que se alcance o preto 100%.
Preto Rico = CMYK
Preto Pobre = CMY
CMY
CMY + K
K
Exemplo de impressão:
1º com apenas as 3 cores básicas para formação do PRETO.
CMY
2º com 3 cores básicas + camada extra de PRETO. 
 CMYK
Resultado: Maior riqueza de cores. 
CMYK versus RGB 
na Prática
A variedade de tons alcançada pelo sitema (CMYK) de impressão, é menor do que a variedade do sistema (RGB) de TVs e monitores, por isso é preciso tomar cuidado ao se trabalhar com cores em materiais que serão impressos. 
Na imagem abaixo, são mostrados o alcance de cor dos sistemas RGB e CMYK dentro do espectro visível de luz (a região colorida).
Alarme de Gamut:
Indica cores que só podem ser vistas no monitor e não podem ser impressas em impressoras ou gráfica.
Alguns aplicativos gráficos, como por exemplo Corel Draw, indicam as cores que não poderão ser impressas quando se está visualizando o sistema RGB na tela do monitor.
Quanto o sistema escolhido é o CMYK, o alarme não indica áreas impossíveis de ser impressas.
Alarme de Gamut
modo CMYK
O significado das cores
Ver vídeo COLORS IN MOTION
Tome cuidado, pois aquilo que é exibido no monitor não é aquilo que será impresso. 
Por muitos motivos, como:
 diferença de alcançe do sistema CMYK vs RGB, 
 falta de fidelidade do monitor, 
 regulagem da impressora, 
 qualidade da tinta,
 luminosidade do local em que se trabalha etc.
Exercício: Cores na Web
Objetivo: 
Aplicar a teoria das cores na criação de layout para web.
Orientações:
Editar o template (layout monocromático.psd) gerando 3 versões de layout.
Padrão de layout utilizando CORES QUENTES
Padrão de layout utilizando CORES FRIAS 
Padrão de layout utilizando CORES COMPLEMENTARES
Padrão de layout LIVRE (utilizar sua criatividade)
Será avaliado:
Bom senso no equilíbrio das cores.
Coerência com os conceitos apresentados em sala de aula.
Cores Hexadecimais
É o modo de reconhecimento de cores pela linguagem HTML.
Composição formada a partir de 16 caracteres diferentes 
(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)
 R G B
# FF FF FF
 R G B
# FF FF FF
Exemplo padrão RGB:
Vermelho puro
R: 255 G:0 B:0
Exemplo padrão HEXADECIMAL:
Vermelho puro
# FF0000
Exemplo padrão RGB:
Amarelo puro
R: 255 G:255 B:0
Exemplo padrão HEXADECIMAL:
# FFFF00
Amarelo puro
Exemplo padrão HEXADECIMAL:
# FFFFFF
BRANCO
# 000000
PRETO
Presença de todas as
cores
Ausência de todas as cores
Ver exemplo na Web (www.uol.com.br):
<FONT COLOR> e
<BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>.
- Ver conversão na calculadora
- Ver conversão no Photoshop
LINKS interessantes:
http://www.studiosol.com.br/esquema-de-cores/
Gerador de esquema de cores:
http://www2.ufpa.br/dicas/htm/htm-cor2.htm
Tabela de Cores Hexadecimais:
http://www.mariaclaudiacortes.com/
Colors in Motion: