Lafayette B. Melo – CEFET-PB - COINFO Cor no design Cor Sensações da cores Tipos de cores Alguns...
Click here to load reader
Transcript of 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
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• 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?
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• 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
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• 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
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• 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
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• As cores podem surgir em síntese subtrativa ou aditiva
TIPOS DE CORESTIPOS DE CORES
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• 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)
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• 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
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• Há ainda outras denominações e classificações importantes / curiosas:– Matiz– Valor ou brilho– Croma– Cor viva– Amarelo-canário– Azul-piscina– Verde-bandeira– …
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
– 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
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• 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
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• 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
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• 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
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• Relativização de cores– Que cor você vê abaixo?
– Que cor você vê no centro?
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• 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”
Lafayette B. Melo – CEFET-PB - COINFOLafayette B. Melo – CEFET-PB - COINFO
• 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