lafayette b. melo – cefet-pb - coinfo cor no design cor sensações da cores tipos de cores alguns...

Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO

Cor no design

Cor Sensações da cores

Tipos de coresAlguns termos técnicos


• Você aplica algum princípio ou usa algum termo técnico relacionado a cores nos seus trabalhos?

• Como você escolhe as cores?

• Há alguma boa cor para um site?


• A cor não tem existência material e é considerada muitas vezes como apenas um fenômeno da luz

• Os seus estudos passaram pela filosofia, pela arte, pela física, até chegar muito tempo depois ao design e à Internet

CORCOR


• Em linguagem corrente, cor tanto designa sensação cromática, como o estímulo que a provoca– A rigor o estímulo é a matiz e a sensação a cor

• Para um estudo aprofundado de cores, seria necessário entender toda a teoria das cores, mas isso nos ajudaria a entender a Web?

• Qualquer estudo de cor, por mais que oriente e considere os efeitos psicológicos das cores, admite que as sensações de cor podem ser as mais diversas

SENSAÇÃO DAS CORESSENSAÇÃO DAS CORES


• No entanto, há ainda divisões como

– Cores quentes: vermelhovermelho, amareloamarelo e laranjalaranja• Para sensações de agitação e euforia

– Cores frias: azul-turquesaazul-turquesa e violetavioleta• Para sensações calmas

– Cores acromáticas: branco, cinza e preto• Podem dar sensações quentes ou frias

– Cores marginais: verdeverde e magentamagenta• A sensação que provoca varia de acordo com o

que estiver ao redor


• As cores podem surgir em síntese subtrativa ou aditiva

TIPOS DE CORESTIPOS DE CORES


• Os efeitos luminosos das cores têm três grupos distintos:– Cores-luz (vermelho, verde e azul)– Cores-pigmento opacas (vermelho, amarelo e azul)– Cores-pigmento transparentes (magenta, amarelo e

ciano)


• CLASSIFICAÇÃO DAS CORES

• 1) Cor primária ou geratriz– Cada uma das cores indecomponíveis que, misturadas

em proporções variáveis, produzem todas as cores do espectro solar

• 2) Cor secundária– É aquela formada pela combinação de duas cores

primárias

• 3) Cor complementar– É a designação dada à cor secundária que em

justaposição com uma cor primária, complementa o espectro solar


• Há ainda outras denominações e classificações importantes / curiosas:– Matiz– Valor ou brilho– Croma– Cor viva– Amarelo-canário– Azul-piscina– Verde-bandeira– …


– Valor ou brilho• Na legibilidade geral de qualquer imagem, página

ou composição• DICAS: não posicionar informações importantes

em áreas escuras, ver diferentes plataformas, testar o monitor com escala de cinza

ALGUNS TERMOS TÉCNICOSALGUNS TERMOS TÉCNICOS


• Brilho e contraste– Contrastes baixos podem ser difíceis de ler– O segundo plano precisa contrastar com o valor do texto– O texto com um segundo plano de granulação de contraste alto

pode ser difícil de ler

– DICAS:• Escolher valor similar para as cores dentro do quadro de

imagem (contraste claro / escuro)• Torne o texto mais largo para que o sólido seja lido em

contraste com o granulado• Em vez de usar HTML, lembre-se de fazer seu texto uma

imagem


• Saturação– Medida da intensidade da cor– A saturação total é preto ou branco– Quanto menos saturada a cor no computador mais próximo do

cinza se torna

– DICAS:• Utilizar saturação como dispositivo de “interesse”ou para chamar

atenção para um texto, botão ou elemento• Separar itens na tela por saturação contrastante


• Textura e granulação– Se a textura tiver muito contraste e granulações evidentes, o

texto em tamanhos normais tende a se perder

1.5 Mb

2560 x 1920

ornate grand gateway

1.5 Mb

2560 x 1920

ornate grand gateway

1.1 Mb

1920 x 2560

traditional doorway


• Relativização de cores– Que cor você vê abaixo?

– Que cor você vê no centro?


• Observações em relação à cor Web X Impressa

– O padrão CMYK, diferentemente do RGB, trabalha com peças “de processo de quatro cores” translúcidas

– CMYK é refletiva (luz do sol e reflexão do objeto)– Spot color (“tinta na lata”) não está impressa nem na

Web– RGB é a junção de milhares de combinações de luzes– As intensidades, matiz e brilho em RGB possuem

valores de 0 a 255– HTML traduz sua cor para hexadecimal– Uma cor indexada é uma paleta de cores limitadas

de cores RGB– Monitores dependem da configuração e browsers

podem utilizar “cores seguras”


• Analise um trabalho de um colega seu, algo que você fez ou um site na Internet quanto a todos os termos técnicos relacionados à cor no design (sensações provocadas, brilho, contraste, saturação etc).

Tarefa

lafayette b. melo – cefet-pb - coinfo cor no design cor sensações da cores tipos de cores alguns...

Documents