Forma Visual e Cor

Comunicação Visual e Design Gráfico

Marketing

Forma Visual

3CVDG

Comunicação Visual

A área de comunicação visual - gráfica ou multimédia – é um dos

campos mais explorados da actividade do design.

Áreas e produtos do design gráfico / design multimédia:

▲ Editorial - Livros, revistas, BD

▲ Publicitário - Projectos, catálogos, anúncios, cartazes, website

▲ Embalagens - Caixas, etiquetas, embalagens varias

▲ Identidade - Marcas, logótipos, imagem

▲ Sinalética - Painéis, letreiros, pictogramas

Tal como as pessoas e os espaços, as empresas têm necessidade

de uma identidade própria que seja facilmente reconhecida por

todos - o Design da Entidade Empresarial.

4CVDG

Percepção

É o sistema visual humano que nos permite ver/percepcionar.

Ao visualizar qualquer figura, a mesma é identificada pelo

contorno ou silhueta sobre o fundo onde é apresentada.

▲Define-se como “espaço positivo” a área ocupada pela figura

▲ Aos espaços não ocupados pela figura, é comum chamar

“espaço negativo”

No entanto, existem imagens em que a percepção é afectada

por efeitos que derivam da ambiguidade entre o que é o

fundo e a figura apresentada.

19CVDG

Teoria de Gestalt

A psicologia de Gestalt afirma que as partes nunca podem

proporcionar uma real compreensão do todo.

De acordo com a teoria gestáltica, não é possível ter

conhecimento do "todo" por meio das suas partes, pois o todo é

maior que a soma de suas partes.

A Gestalt, após sistemáticas pesquisas, apresenta uma nova

teoria sobre o fenómeno da percepção. Segundo esta o que

acontece no cérebro não é idêntico ao que acontece na retina. A

agitação cerebral não se dá por pontos isolados, mas por

extensão. A sensação gerada já é global, de forma e unificada.

Sete fundamentos de Gestalt aplicados ao Design:

▲ Proximidade

▲ Simetria

▲ Unidade

▲ Segregação (Figura/Fundo)

▲ Semelhança

▲ Continuidade

▲ Fechamento

20CVDG

Princípios de Gestalt aplicados ao Design

Proximidade

Simetria

Unidade

Segregação (Figura/Fundo)

Segregação (Figura/Fundo)

Semelhança

Semelhança (mau exemplo)

Continuidade

Fechamento

Fundam

Cor

31CVDG

A cor é radiação electromagnética emitida num

determinado comprimento de onda do espectro

electromagnético.

O que é a Cor?

32CVDG

O que é a Cor?

É o resultado percetual da incidência na retina da luz, na

região visível do espectro electromagnético.

– a retina humana tem 3 tipos de fotorreceptores de cor.

A cor é luz reflectida...

– quando vemos uma cor, o que vemos de facto é um

objecto que absorve certos comprimentos de onda e

reflecte outros

33CVDG

Modelos de Cor

A forma de armazenar e representar cores num sistema

informático pode ser vista, de certa forma, como uma

simplificação da forma que o olho humano usa para

reconhecer as cores.

Com vista a representar com exactidão cada uma das

cores, e visto que ainda não se generalizou forma de

descrever todos os aspectos relacionados com a cor,

foram desenvolvidos diversos modelos para a

representação da cor.

34CVDG

RGB

Segundo a teoria dos 3 estímulos proposta por Young-Helmholtz

(Século XIX), o olho humano interpreta a cor através da

estimulação dos 3 pigmentos visuais presentes nos cones da

retina (existem igualmente os bastonetes), que possuem picos

de sensibilidade aproximada nos seguintes comprimentos de

onda: 630 nm (Vermelho (R)), 530 nm (Verde (G)) e 450 nm

(Azul (B)).

Curiosidade: O daltonismo deve-se a uma anomalia de um (ou

mais) destes pigmentos. Faltando um, todas as cores terão de

ser representadas através da combinação dos outros dois

pigmentos, originando representações “incorrectas” das cores.

35CVDG

Sistema Aditivo (RGB)

RGB: Red, Green, Blue

Vermelho + Verde + Azul = Branco (255,

255, 255)

Verde + Azul = Ciano (0, 255, 255)

Vermelho + Azul = Magenta (255, 0, 255)

Vermelho + Verde = Amarelo (255, 255, 0)

▲ cores aditivas são aquelas

inerentes à luz

▲ usado em monitores, projectores,

câmaras vídeo…

36CVDG

Sistema Visual Humano vs RGB

37CVDG

Sistema Subtrativo (CMYK)

CMYK: Cyan, Magenta, Yellow, blacK

Cião + Magenta + Amarelo Preto

Amarelo + Magenta = Vermelho

Amarelo + Cião = Verde

Cião + Magenta = Azul

▲ cores subtractivas absorvem as

outras cores.

▲ usado na impressão (tintas,

pigmentos…)

38CVDG

Pantone

Pantone Inc. (www.pantone.com), é uma empresa norte

americana conhecida pelo seu sistema (numérico) de cor,

largamente utilizado na indústria gráfica.

O sistema Pantone é baseado numa mistura específica de

pigmentos para se criarem novas cores. O sistema Pantone

também permite que cores especiais sejam impressas, tais

como as cores metálicas e fluorescentes.

O sistema Pantone garante uma fidelidade de impressão entre

95% e 100%. Contudo, é mais caro imprimir com tons Pantone

do que com o sistema CMYK.

39CVDG

Pantone

O sucesso do sistema deveu-se muito ao facto de ser muito

mais confiável especificar números, que não são ou estão

sujeitos a subjectividade humana do que em nomes, que podem

ter diferentes conotações noutros locais ou sociedades.

Os números de cor e valores da Pantone são propriedade

intelectual da Pantone Inc. e o uso gratuito da lista não é

autorizado. É por este motivo que as cores Pantone não são

suportadas em aplicações gráficas de software livre como GIMP

e Inkscape, e muitas vezes não estão presentes em soluções de

software de baixo custo.

40CVDG

Pantone

Curiosidade: O Parlamento

escocês definiu que a bandeira

escocesa é da cor Pantone

300. Outros países, como

Canadá e Coreia do Sul,

também indicam cores Pantone

para a produção de bandeiras.

41CVDG

Sistema HSL

HSL:Hue (Matiz)

Saturation (Saturação)

Luminance (Luminância)

42CVDG

Propriedades da Cor

Matiz (Hue)▲ uma outra designação para cor

Saturação (Saturation ou Chroma)

▲ refere-se ao brilho (ou intensidade) de uma matiz

▲ a saturação é + elevada nas cores puras (ñ misturadas)

Valor lumínico (Value)

▲ refere-se à intensidade de uma cor

▲ é alterado com a adição de branco ou preto a uma matiz

Valor lumínico = 0.2 * R + 0.7 * G +0.1 * B

43CVDG

Valor lumínico

No entanto, o valor lumínico também depende da cor de fundo

onde ela é apresentada. Por exemplo, sobre fundo claro, as

cores claras parecem mais escuras e menos luminosas. A

mesma cor sobre um fundo escuro parece mais luminosa.

44CVDG

Condicionantes na escolha de cores

A cor, uma linguagem universal, embora, conforme a

cultura, possua significados diferentes. A selecção de

uma cor deve ser sempre criteriosa, tendo em conta:

▲Limitações humanas

▲Identidade visual do público alvo

▲Ambiente e regime de trabalho

▲Limitações do hardware

45CVDG

Como escolher as cores?

▲Ver outros trabalhos…

▲Definir as cores antes de executar todo o trabalho– definir os níveis de ênfase necessários

– fazer testes parciais (ecrãs tipo)

▲Favorecer o contraste e harmonia– cores complementares

– valor lumínico das cores

▲Reduzir a fadiga– vibrações

– saturação

46CVDG

Discriminação

▲escolher uma gama de cores bem discriminadas- máximo de 5±2

▲distanciar as cores em valor lumínico- variar pelo menos duas das suas componentes

▲ordenar as cores pela sua ordem espectral:

vermelho, laranja, amarelo, verde, azul, roxo, violeta

▲discriminação diminui ao longo do espectro

ex: mais difícil distinguir pequenas variações nos vermelhos e

violetas

▲receptores de azul nos nossos olhos são escassos:- evitar cores adjacentes que diferem apenas na quantidade de azul- não usar azul puro em texto, linhas ou detalhes

47CVDG

Valor lumínico

Valores aproximados: vibração ! Valores distanciados: contraste

Valor lumínico como medida de contraste entre duas cores:

48CVDG

Valor lumínico

Valor lumínico como medida de equilíbrio entre várias cores:

Valores distintos: desequilíbrio Valores mais próximos: + harmonia

49CVDG

Ordem espectral

A ordem espectral é mais harmoniosa

50CVDG

Cores complementares

(0, 50, 100)

(255, 205, 155)

(255, 0, 0)

(0, 255, 255)

(255, 0, 255)

(0, 255, 0)

a

a a

a(150, 50, 100)

(105, 205, 155)

Cores complementares e saturadas: vibração!

Cores complementares não saturadas: contraste + harmonioso

51CVDG

Saturação

Textos colocados sobre

fundos de cores saturadas

provocam fadiga

Combinações de cores muito saturadas produzem sombras ou vibrações:

Textos extensos em cores

muito saturadas provocam

fadiga no leitor

52CVDG

Texto vs Fundo

Aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor.

Aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor.

Aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor.

Aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor.

Aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor.

Aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor, aplicação de texto sobre um fundo de cor.

Algumas combinações de cores desadequadas...

53CVDG

▲Utilizar cores saturadas para chamar atenção

▲Agrupar elementos usando uma cor de fundo comum

▲Luz ambiente condiciona o ênfase:

▲A periferia da retina é pouco sensível às cores

‒ são excepção: azul, preto, branco e amarelo

‒ recorrer a intermitências ou alteração de tamanhos

Fundo

Texto, linhas

ou detalhes claros

escuro

escuros

claro

Fraca luz ambiente Forte luz ambiente

Ênfase

54CVDG

Ênfase

O vermelho quando apresentado em pequena extensão assume

enorme força. Chama a atenção por estar em menor tamanho.

55CVDG

Dinâmica das cores

A cor afecta profundamente a nossa percepção do espaço.

Cores saturadas (quentes), visualmente parecem mais

próximas do observador. Cores frias, parecem mais distantes.

56CVDG

Consequências do mau uso da cor

▲Fadiga ou desconforto visualex: combinação inadequada de cores

▲Dispersão da atençãoex: excesso de cores

▲Interface ilegívelex: não foram tidas em conta as condições de iluminação local

▲Aprendizagem difícilex: incoerência no uso da cor

▲Aversão ao uso de uma aplicaçãoex: escolha de cores choca com a identidade dos utilizadores

57CVDG

Simbolismo da Cor

A cor actua fortemente sobre a sensibilidade e condiciona a

fisiologia dos seres que a percepcionam.

Alguns significados possíveis (embora subjectivo):

cores quentes:

cores frias:

cores escuras:

Azul:

Vermelho:

Amarelo:

Castanho:

Roxo:

Preto:

Branco:

acção, avanço, intrusão

passividade, afastamento

autoridade, poder, controle

inteligência, conhecimento, credibilidade, solidez

perigo, tensão, dinamismo, paixão

acção, alegria, ansiedade

protecção, calma, natureza, antiguidade

misticismo, artificialidade

autoritarismo, distanciação

pureza, clarividência

58CVDG

Simbolismo da Cor

59CVDG

Contraste por cores primárias

60CVDG

Contraste por cores complementares

61CVDG

Contraste por cores quente-frio

62CVDG

Profundidade por cores saturadas complementares

“La Agoria en el Jardin”, El Greco (1590)