cor digital | web design | design gráfico |. objetivos: apresentar conceitos, ferramentas básicas...

52
COR DIGITAL | Web Design | Design Gráfico |

Upload: internet

Post on 18-Apr-2015

107 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

COR DIGITAL | Web Design | Design Gráfico |

Page 2: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Objetivos:

Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos

de design digital.

Page 3: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Temática:

- Conceitos de Cor e Terminologia

- Classificação das Cores

- Possíveis Usos da Cor| aplicação das cores no design digital e gráfico | outros usos das cores |

| efeitos das cores: físico, fisiológico e psicológico | sobre as cores |

- Contrastes Cromáticos | contrastes de valor, matiz, complementar, de luminosidade, quente/frio |

- Harmonia das Cores | como trabalhar com as cores de forma harmônica, através da similaridade, equilíbrio, ordem,

familiaridade|

- Cores na Tela e na Web| diferenças entre as mídias | possibilidades, problemas e limitações das cores|

| paletas | arquivos | tipografia | legibilidade |

- Exemplos e Aplicação das cores em projetos

Page 4: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Conceitos de Cor

“A cor não tem existência material: é apenas uma sensação produzida por certas organizações nervosas

sob a ação da luz”. Seu aparecimento está condicionado à existência dos

elementos:

1luz e iluminação

2modificação da

luz pelos objetos

3percepção da

cor

Page 5: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Os estímulos que causam as sensações cromáticas estão divididas em dois grupos:

o das cores-luz e o das cores pigmentos.

Cor-Luz ou luz colorida, é a radiação luminosa visível que tem como síntese aditiva a luz branca.

Sua melhor expressão é a luz solar, por reunir de forma equilibrada todos os matizes existentes na natureza.

As faixas coloridas que compõem o espectro solar, quando separadas uma a uma, denominam-se monocromáticas,

matiz ou tom cromático .

Cor-Pigmento é a substância material que absorve, refrata e reflete os raios luminosos componentes da luz que se

difunde sobre ela. A mistura das cores-pigmento produz o cinza escuro.

Chamamos cores-pigmento as substâncias corantes que fazem parte das cores químicas.

Page 6: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

CÍRCULO CROMÁTICO OU CÍRCULO DAS CORESÉ um círculo onde as cores são posicionadas de modo a facilitar o

entendimento de suas possíveis combinações e resultados.Ao centro do círculo estão as cores PRIMÁRIAS:

Depois as SECUNDÁRIAS:

Page 7: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

E, por último, as TERCIÁRIAS, com exceção dos ton de marrom, pois no círculo só podemos organizar as cores duas a duas e o marron seria a

mistura de três delas em proporções diferentes. :

Page 8: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

1 2 3

Cores PrimáriasSão as 3 cores indecomponíveis que, misturadas em

proporções variadas, produzem todas as cores do espectro.

Nas artes gráficas e para aqueles que trabalham com cores-pigmento transparentes, as cores primárias são: ciano, magenta e o amarelo - CMY

Para os que trabalham com a cor-luz, as cores primárias são: azul-violeta, o vermelho e o verde – RGB (Red, Green, Blue)

Para os que trabalham com a cor-pigmento opaca (químicos, artistas, etc..), as cores primárias são: azul, o vermelho e o amarelo.

Page 9: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Quando combinamos as cores elas formam o branco - se forem aditivas (cor-luz RGB) ou formam o preto - se forem subtrativas. Isto se dá porque as cores diretamente opostas têm proporções inversas das 3 cores primárias. São escalas atraentes e brilhantes.São rapidamente absorvidas e descartadas pelo observador.

Page 10: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Escalas de Cores

Cores Quentes

As cores vermelha, magenta, laranja, amarelo e amarelo-

verde são denominadas cores quentes.

Provoca uma experiência sinestésica de calor na maioria

dos observadores.

As cores chamam a atenção com mais facilidade, tornam os

ambientes mais quentes e aconchegantes.

São escalas convidativas e harmoniosas (característica

inerente à escala).

Page 11: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Escalas de Cores

Cores Frias

As cores azul, azul claro, ciano e verde mar são denominadas

cores frias.Tendem a provocar a sensação

de frio.As composições com essa escala tendem a parecer

elegantes e profissionais, mas são muito desmotivadoras.São associadas a tristeza e

depressão.São muito harmônicas.

O roxo e o verde puro não se encaixam nessa classificação

quente/frio - usar com cuidado!

Page 12: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

parte 2:

Possíveis usos da COR | aplicação das cores no design digital e gráfico |

| outros usos das cores | | efeitos das cores: físico, fisiológico e psicológico |

| sobre as cores |

Page 13: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

“A cor direciona o olhar do observador ao longo

da página. Nosso cérebro tende a ligar áreas

coloridas de uma maneira previsível; ao selecionar a

posicionar cuidadosamente as cores em um site,

você pode guiar o observador por páginas na ordem

que desejar.

isto pode ser extremamente útil quando se precisa

direcionar o observador para recursos especiais,

novidades, e até mesmo para áreas da página que

podem ter sido pouco percebidas anteriormente.”

Golding, M e White, Dave - Guia de cores para designers.

Page 14: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 15: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

“Integra áreas de um projeto gráfico.

Tipicamente o cérebro identifica áreas de mesma

cor como de importância semelhante; ao integrar

delta forma áreas de um projeto, pode-se agrupar

com êxito informações cujas relações não sejam

imediatamente perceptíveis”.

Golding, M e White, Dave - Guia de cores para designers.

Page 16: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 17: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 18: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

“A cor pode ser usada para atrair a atenção de um

observador.

Em geral, o olhar é atraído para cores chamativas ou

incomuns.

O uso cuidadoso da cor no design do seu site pode não

apenas atrair visitantes, mas os mantêm por mais tempo

no site.

Sites com um design de cores pobre na verdade repelem

os visitantes a os enviam rapidamente para outros sites

com melhor design.”

Golding, M e White, Dave - Guia de cores para designers.

Page 19: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 20: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 21: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 22: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

“As cores destacam as áreas de um design umas

das outras.

Do mesmo modo como integram áreas de mesma

cor, também separam áreas de cores diferentes.

Você pode usar isto para diferenciar áreas de um

design que podem ser fisicamente parecidas, mas

cujo conteúdo é totalmente distinto.”

Golding, M e White, Dave - Guia de cores para designers.

Page 23: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 24: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 25: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

“Cria uma disposição de ânimo geral a provoca uma

resposta emocional do observador.

Além de integrar certas cores, a mente também

associa certas cores e combinações de cores com

certos estados emocionais a de espírito.”

Golding, M e White, Dave - Guia de cores para designers.

Page 26: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 27: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 28: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

“A cor organiza a informação textual.

Você pode usar a cor para ajudar a separar várias

partes de texto, como títulos a rodapés.

Podemos também fazer com que tipos individuais de

texto se destaquem (o texto de advertência pode

ser vermelho, enquanto informações opcionais

podem ser cinza).”

Golding, M e White, Dave - Guia de cores para designers.

Page 29: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 30: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design
Page 31: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Possíveis Usos da Cor Aplicações e usos da cor como fenômeno de diferenciação.

Unificar pela corDiferenças formais são compensadas pela cor. A cor unifica os componentes pertencentes a um grupo.(ex: sistema de produtos de uma empresa com determinada imagem visual, unificar informações semelhantes em um texto gráfico/web)

Distinguir pela corFiguras e formas idênticas são diferenciadas pela aplicação de cores.(ex: a bandeira da Itália e da França são idênticas em sua estrutura formal, porém se diferenciam pelas cores)

Page 32: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Chamar atenção pela corSinalizar/enfatizar uma forma/figura pelo contraste com seu contexto.(ex: cor vermelha do extintor de incêndio)

Camuflar pela corAssimilar uma figura/forma a um contexto (fundo). Este efeito é o contrário do contraste. Baseia-se na minimização, diminuição ou até a eliminação de contrastes.(ex: texturas cromáticas aplicadas sobre chapas de revestimento em móveis de cozinha para absorver arranhados)

Page 33: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Estruturar pela corEnfatizar a estrutura diferenciada de formas/figuras e textos num contexto.

Codificar pela corAtravés de convenções e regras, associa-se determinada cor com um significado específico.(ex: dutos para líquidos e gases)

Page 34: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Simbolizar através da corUso sócio-cultural da cor para simbolizar determinados atributos.(ex: cor preta das câmeras fotográficas significa “profissionalismo”)

Estilizar através da corExagerar ou quebrar o uso convencional de cores.(ex: cor verde dos cabelos de um punk)

Indicar através da corFenômenos físicos representados pela cor utilizada como signo sintocromático.(ex: papel para testes de pH)

Page 35: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Efeito Físico da Cor

Uso da capacidade de reflexão e absorção de

superfícies coloridas.

Ex: - o branco para refletir o calor em pinturas

de telhados

- o preto para captação de energia solar

Page 36: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Efeito Fisiológico da Cor

Há uma importante área das cores ainda a ser discutida: como o olho e a mente percebem a cor?

Esta é uma área extremamente importante em geral ignorada pelos teóricos das cores; entretanto é vital

para a compreensão das cores.

Em particular há dois fenômenos cujo impacto sobre a percepção é grande:

a persistência da visão e o efeito Bezold.

Page 37: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Persistência da Visão

“A persistência da visão é um efeito interessante,

primeiramente descrito vivamente por Goethe em sua Teoria

das Cores. pela observação do mundo à sua volta. Percebeu

que após ficar olhando fixamente um objeto

excepcionalmente brilhante por um longo período do tempo,

ele podia ver uma leve sombra em sua mente por um breve

período que se seguia.

Se você olhar para o sol verá um pequeno ponto brilhante de

cor flutuando nos olhos por vários minutos. Não se trata

apenas de um ponto brilhante ‑ é um ponto brilhante azul. Se

der uma rápida olhada no disco do cores aditivas, vai

descobrir que o azul é o complementar do amarelo.”

Golding, M e White, Dave - Guia de cores para designers.

Page 38: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Persistência da Visão

A persistência da visão é puramente resultado do processo

da visão. Toda a parte posterior do olho consiste da retina,

que é um tipo de tela de cinema em que a imagem é

projetada e decodificada em sinais que o cérebro pode

entender. Para facilitar a impressão da imagem, a superfície

da retina é dotada de cerca de 130 milhões de bastonetes,

minúsculos órgãos responsáveis por detectar a luz.

Os bastonetes são auxiliados em sua tarefa por sete milhões

do cones, os órgãos responsáveis pela percepção da luz.

Golding, M e White, Dave - Guia de cores para designers.

Page 39: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Persistência da Visão

O uso da cor verde-turquesa em salas de cirurgia

objetiva neutralizar as pós imagens provocadas pela

concentração do aparato visual sobre um campo

vermelho (sangue).

Page 40: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

cinza + ciano cinza + roxo cinza + amarelo

Persistência da Visão

Esse efeito da visão tende a destruir também as percepções das cores, em especial das cores

neutras.Veja os quadrados abaixo.

Os quadrados centrais têm o mesmo tom de cinza, porém temos a impressão de que têm:

Page 41: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

O Efeito BEZOLD“Em meados do séc. XIX, o fabricante de tecidos Willian von Bezold descobriu que podia alterar a aparência geral de uma cor de fio simplesmente

adicionando um filamento de cor diferente. Algumas cores se tornavam claras, outras escuras e outras

mais cinzas.O que ele decobriu foi o fenômeno da mistura ótica.

Quando áreas de cores estão próximas, os olhos tendem a misturá-las e percebê-las como uma

única cor.Este efeito é empregado nas TVs e monitores de

hoje para misturas as cores - vermelho+verde+azul, agrupadas em um único

pixel.”

Golding, M e White, Dave - Guia de cores para designers.

Page 42: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

O Efeito BEZOLDAs cores tendem a se misturar, no primeiro

agrupamento a composição tende ao laranja e no central ao verde.

Como evitar o efeito Bezold? Tingir uma das cores em direção ao preto ou branco.

Deve-se alterar a cor que não seja a dominante da composição.

Golding, M e White, Dave - Guia de cores para designers.

Page 43: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Efeito Sinestésico da CorCorrelação entre a percepção pertencente a um sentido e a percepção de outro sentido. A cor em si não causa sensações acústicas,

táteis, etc; porém as cores são consideradas como cores quentes, frias, tranqüilas,

excitantes, etc.

Efeito Psicológico da CorAssociação entre uma percepção cromática com outras experiências e/ou significados.

Contexto cultural.

Page 44: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

| sobre as cores | VERMELHO AMARELO VERDE AZUL VIOLETA MARROM BRANCO PRETO

Page 45: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

O vermelho é ardente, a cor do coração e das chamas, nos atrai a atenção, e de

fato acelera o metabolismo do corpo. O rosa é associado ao romance (amor)

e à mulher.O vermelho profundo - vinho =

aristocrático. Vermelho arroxeado=verdade.

Tons claros = paixão intensa, força e coragem.

Tem o poder de penetrar mais profundamente na neblina e escuridão do que as outras cores, é usado como luz de alarme, em torres, faróis para

navegação e cume de edifícios.

Passional, impetuoso e ódio.Mentira e orgulho.

Rubor, vergonha e timidez.Sangue, guerra e violência.

VERMELHO

Page 46: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

A cor mais brilhante e intensaRiqueza e nobreza=ouroSol=calor, generosidade

O amarelo é cheio de vida e alegre, a cor do sol e dos narcisos.

Por ser excessivamente alegre, tendemos a cansar dele

rapidamente. Um apartamento pintado de amarelo brilhante seria

opressivo, porém um amarelo pálido e suave, o tornaria arejado e

agradável.

Amarelo pardo= inveja, má féUrina, icterícia=doença, decadência

e degeneraçãoAmarelo esverdeado= enfermidade

(bandeira de hospitais durante guerras).

Deve-se evitar.

AMARELO

Page 47: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Vida, natureza, juventude e vigor.Verde= esperança, disposição e

abundância.

Um verde brilhante/ vivo nos lembra a primavera e a fertilidade, mas

também é a cor do mofo, veneno e inveja.

Verde escuro é uma cor eloqüente, e nos traz a mente a tranqüilidade

profunda de uma floresta.

O verde não acompanha nem a alegria, nem a tristeza e nem a

paixão. Não solicita nada, não lança nenhum apelo.

Esta imobilidade é uma característica preciosa para quem busca o repouso.

VERDE

Page 48: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

Assim como o verde, é uma cor forte da natureza.

O azul é a cor do céu e do mar. Como o verde, possui efeito calmante, mas

é também forte - a cor mais forte entre as cores familiares, depois do

vermelho.Azul claro parece jovem e esportivo, mas o azul real ou marinho possuem um “ar” digno e de nobreza (sangue

azul). É uma cor profunda, cor do infinito e

dos mistérios da alma

É a cor mais fria, e quando mesclada com verde torna-se gelada. Além do

frio, está associada à depressão, melancolia e tristeza.Não prende o olhar.

AZUL

Page 49: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

O violeta é uma cor sofisticada,

associada com realeza e luxo.

Não a vemos freqüentemente na

natureza, por isso pensamos nela

como uma cor artificial, e

dificuldade em acostumar com

ela.

Simboliza a lucidez, o equilíbrio

entre o céu e a terra, os sentidos

e o espírito, a paixão e a

inteligência, e o amor e a

sabedoria.

Simboliza a morte

VIOLETA

Page 50: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

O marrom é rico e fértil; e também triste e melancólico

como as folhas do outono. Marrom claro, a cor morena e o

bege dão a aparência rústica, natural aos tecidos e artigos

domésticos. O marrom escuro sugere

madeiras maciças opulentas e o couro.

Significa penitência, sofrimento, traição e

humildade.

MARROM

Page 51: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

O branco é a cor da pureza, virgindade, inocência e paz. Significa também verdade e

felicidade.Amizade, sinceridade e amor

(romanos).

Está associada à hospitais, esterilidade e inverno.

Nos países asiáticos: morte e pesar.

Esta dicotomia é encontrada também em artigos domésticos de

cor branca: ele tanto parecem valiosos (como a porcelana) como

descartáveis (como os pratos e copos de plástico).

BRANCO

Page 52: COR DIGITAL | Web Design | Design Gráfico |. Objetivos: Apresentar conceitos, ferramentas básicas e exemplos visando a aplicação em projetos de design

O preto é a cor da noite e da morte, e freqüentemente

associada com o mal, crime.Sua aparência não ortodoxa o

tornou popular entre os artistas.

Está também associada à riqueza e elegância (artigos domésticos

negros tendem a parecer caros e sofisticados).

Significa também prudência, sabedoria, tristeza e adversidade.

Quando misturado com o branco= humildade, resolução, sigilo.

PRETOPRETO