Detalhando o Princípio da Estética

Criação através da tipologia

Contraste - Cor

A cor é mais um termo com interpretações óbvias

A única coisa que você deve lembrar é que as cores quentes (vermelhos, laranjas) vêm na frente e comandam nossa atenção

Nossos olhos são muito atraídos pelas cores quentes

Cor

cores frias (azuis, verdes) desaparecem gradualmente diante dos nossos olhos

Grandes áreas de cores suaves são ideais; na verdade, elas são necessárias para criarmos um contraste eficaz

Cor

Observe que mesmo sendo menor, a primeira linha é dominante devido à aplicação da cor quente.

Agora o nome maior na cor quente se sobrepõe ao nome menor. Em geral, este é um efeito que deve ser evitado.

Cor

Veja como o nome “Scarlett” praticamente desparece

Geralmente, para que o contraste com uma cor fria realmente crie o efeito desejado, é preciso usá-la em maior quantidade. Veja como o nome praticamente desaparece.

Cor

É fácil criar um contraste com várias cores mas fazendo como os tipógrafos conseguimos referenciar o tipo preto e branco de uma página como um tipo colorido

Cor

Nesta citação podemos visualizar facilmente as “cores” diferentes no texto em preto e branco.

Cor

A “cor” é criada através de variações como o peso das letras, a estrutura, a forma, o espaço existente no interior das letras, o espaço entre as linhas ou o tamanho do tipo. Mesmo utilizando um único estilo para o mesmo tipo é possível criar “cores” diferentes.

Cor

Uma fonte suave, arejada, com bastante espaço entre as letras (conhecido com o entreletra) e entre as linhas (conhecido como entrelinha) cria uma “cor” e uma textura bastante suaves

Uma fonte em bold (negrito) e sem serifa, pouco arejada, cria uma cor escura, com uma textura diferente

Cor

Este é um contraste particularmente útil na montagem de páginas com muita massa de texto e sem figuras

A seguir, note como podemos mudar a cor através da fonte ou do tamanho fazendo ajustes mínimos.

Cor

Zurich Light, 8 pontos, entrelinha simples

Zurich Light, 8 pontos, entrelinha 1,5, entreletra adicional. Observe que o texto tem uma cor mais suave do que a do exemplo anterior.

Cor

Zurich Bold, 8 pontos, entrelinha simples. Este exemplo é exatamente igual ao primeiro, exceto por sua versão em bold e não em light.

Cor

A cor serve para: demonstrar um estado de espírito enviar mensagens de paz ou de guerra chamar a atenção

Cor

Embora o uso da cor nos programas até o momento seja bastante simples.

existem algumas regras que precisamos conhecer sobre a combinação de cores.

regras que fazem parte da teoria das cores

Cor

Independentemente de questões de gosto, uma cor pode transmitir sensações como: calor ou frio. Tristeza ou alegria.

Existem duas maneiras de analisarmos a cor enquanto luz e enquanto tinta

Fisicamente, as cores são provenientes de ondas de luz

Cor

Os objetos têm as cores que eles refletem Tanto isso é verdade que, dependendo da

cor da luz que incida sobre um objeto, ele parecerá ter uma cor diferente

Mostraremos agora como as cores se relacionam.

Cor

No campo das tintas, existem três cores primárias: azul vermelho amarelo

E três secundárias laranja violeta verde

Cor

Não se pode obter as cores primárias através de mistura alguma,

Todas as demais cores que existem são provenientes de misturas entre elas

(O olho humano é capaz de distinguir mais de 10 milhões de cores!)

Cor

No campo da Luz as cores primárias são: vermelho verde azul

Nesse caso, o amarelo é obtido pela mistura do vermelho com o verde.

Cor

As cores podem, então, ser arranjadas em um círculo, conhecido como roda das cores.

Cor

Neste círculo temos as três cores primárias (azul, vermelho e amarelo).

As cores secundárias obtidas pela mistura de duas cores primárias fica entre estas, assim, a mistura entre azul e amarelo resulta no verde, o qual, no círculo, aparece entre as duas

Cor

Ainda temos mais um nível, o das cores intermediárias

resultantes da mistura entre uma cor primária e uma secundária

A conclusão a que se pode chegar é que este círculo é praticamente infinito, já que podemos misturar uma cor primária com uma intermediária, e assim por diante

Cor

Por que o preto e o branco não estão no círculo? O preto e o branco não contam porque eles não são

considerados cores O preto é considerado ausência de cor o branco é a mistura de todas as cores

Se fizermos uma experiência caseira de colocarmos todas as cores misturadas, é bem provável que se chegue a algo mais parecido com o cinza do que com o branco. "cor de burro quando foge"

Cor

Logo, conclui-se que: Esta afirmativa de que a mistura de todas as cores resulta no branco vale para a cor luz e não a cor tinta

Como o computador trabalha com a cor luz é possível demonstrar isso através da tela de seleção de cores de algum software de edição de imagens como: Paint Brush, Publisher, Corel Draw, etc.

Cor Observe o triangulo da cor:

Cor

Preto BrancoCinza

Tom

NuançaSombra

Cor

Se nós pegarmos uma cor especificamente, podemos acrescentar branco a esta cor para clareá-la, ou podemos acrescentar o preto para escurecê-la

Ou ainda, podemos acrescentar branco e preto (cinza) para obter novos tons da mesma cor

O uso do preto e do branco vai ser necessário para criarmos os tons e nuanças da cor

Cor

O nome disto é Matiz Ou seja, muitas vezes podemos utilizar somente

uma cor e seus matizes Pra que isto?

Conhecer isso pode fazer com que você crie uma publicação atrativa visualmente, mas também relativamente barata na hora de imprimir, principalmente se você for utilizar uma gráfica

essas empresas fazem o orçamento de um trabalho levando em consideração o número de cores que a impressão utilizará

Cor

No caso do triângulo das cores, procure utilizar em conjunto aquelas que estão sobre uma mesma linha. Por exemplo, utilize a cor, uma sombra e o preto Ou uma nuança, um tom e o preto

Juntando a roda das cores e o triângulo de cores você pode perceber que as possibilidades de cores

existentes são praticamente infinitas

Cor

Voltando à roda das cores a posição que a cor ocupa no círculo nos diz um

pouco da sua característica Por exemplo, as cores que vão do verde ao

violeta são conhecidas como cores frias, e as demais, como quentes.

Veja um exemplo prático. Qual dessas duas representações transmite mais eficientemente a mensagem?

Cor

As duas são exatamente iguais em tipo de letra, formato, tamanho, posição, mas são diferentes em um item: a cor.

Isso quer dizer que você tem agora uma nova preocupação: a de escolher criteriosamente as cores

Cores monocromáticas

Existe um pensamento geral de que se um trabalho é monocromático, então ele é branco e preto, mas isso não é verdade!

Um trabalho monocromático é aquele que é feito sobre o triângulo de uma cor

Utilize esta técnica quando quiser baratear a impressão, ou quando não quiser arriscar no uso de mais de uma cor

Cores monocromáticas

Veja um exemplo de publicação monocromática:

Cor Monocromática

Cores complementares

São aquelas que estão diametralmente opostas na roda das cores

Você só deve tomar o cuidado de utilizar uma cor do círculo como a cor de base utilizando matizes da outra cor para evitar que as duas cores "briguem"

Você já fez a experiência de colocar um objeto vermelho sobre um fundo verde? Dependendo do tom das cores o seu olho parece que vê

os objeto "pulando"

Cores complementares

Veja a mesma publicação onde foi utilizado um esquema de cores complementares:

Cores Complementares

Cores análogas

São aquelas que estão próximas na roda das cores

Na maioria das vezes produzem trabalhos suaves

É a combinação de cores mais utilizada por aqueles que não conhecem a roda das cores, por ser a mais "óbvia"

Cores análogas

Cores Análogas

Cores contrastantes

As cores contrastantes são aquelas que estão à mesma distância umas das outras na roda de cores

Usadas em conjunto dão uma aparência equilibrada à publicação

procure usar matizes das cores contrastantes

Cores contrastantes

Cores Contrastantes

alguns conselhos sobre o uso de cores... Use as cores para destacar alguma informação,

mas use-as com moderação. Quanto mais cores forem usadas, mais difícil será para o leitor lembrar o quê cada cor representa.

Use as cores de maneira consistente, por exemplo, se usou vermelho para um título, use o mesmo vermelho para todos os títulos da publicação.

alguns conselhos sobre o uso de cores... use texto colorido com moderação e procure

aumentar o tamanho da letra quando o fizer. O texto colorido tem menos contraste em relação ao fundo branco e pode dificultar a leitura do mesmo

Faça testes de impressão. as cores que vemos na tela não são as mesmas que a impressora gera

alguns conselhos sobre o uso de cores... Se for utilizar os serviços de uma gráfica,

faça um orçamento antes para saber qual é o preço de se usar uma, duas ou quatro cores e execute sua publicação em relação ao quanto pretende gastar com ela

Cor

A tela apresentada abaixo é um exemplo de criação de cores permitida por muitos softwares

Veja no exemplo desta tela, que há uma cor selecionada, e que está aparecendo uma caixa amarela com a seguinte informação RGB(204, 204, 153)

Cor

Ainda nesta aula dissemos que, para a luz, as cores primárias são Vermelho, Verde e Azul e que todas as outras são obtidas pela mistura entre estas três

Assim, as letras RGB representam estas cores (Red, Green, Blue) e os números representam a quantidade de cada uma presente na formação da cor que está selecionada

No nosso exemplo temos uma que contém 204 partes de vermelho, 204 partes de verde e 153 partes de azul. O melhor desta história é que você pode criar sua própria cor!

Cor

Cor O quadro colorido com uma pequena cruz é o

local onde você escolhe a cor diretamente. Na parte de baixo você vê dois quadrados, Cor e Sólido os quais significam, respectivamente, a cor que você está escolhendo e aquela que será exibida caso não seja possível utilizar sua escolha.

A cor aplicada ao texto e a objetos com padrões (riscado, tracejado, com pontinhos, etc.) não pode ser uma cor misturada, e geralmente nesses casos será apresentada a cor sólida

Cor

Quando você arrasta esta cruz no sentido horizontal dentro do quadrado, você está modificando o seu matiz (a cor pura), o qual também pode ser alterado pela caixa de texto com mesmo nome na parte de baixo da tela

Nesta caixa (Matiz) você pode colocar números de 0 (vermelho) a 120 (verde) a 240 (azul) a 359 (quase vermelho)

Acredita-se que estes números representam graus em um círculo. Portanto, o numero que escolhermos provavelmente indica uma posição na roda das cores.

Cor

Se você estiver arrastando a cruz verticalmente no quadrado, você estará modificando a saturação da cor (a sua intensidade), o que também pode ser feito através da caixa de texto Sat. que existe logo abaixo do Matiz

Nesta caixa você pode colocar valores de 0 (cinza) a 100 (cor intensa)

Se você observar o triângulo das cores, vai perceber que, estaremos nos dirigindo, perpendicularmente, a partir do topo do triângulo para a sua base, ou seja, da cor original em direção ao cinza

Cor

Cor

Preto BrancoCinza

Tom

NuançaSombra

Cor

Para nos dirigirmos da cor ao branco e da cor ao preto, nós arrastaremos a seta que aparece na barra vertical ao lado do quadrado das cores, ou então, modificaremos o valor da caixa Lum, a qual significa luminosidade

Para clarear ou escurecer a cor digite um valor entre 0 (preto) e 100 (branco)

Cor

Quando você mexe com estes valores está executando a mesma tarefa que os pintores, quando eles misturam suas tintas (só que sem fazer a mesma sujeira!)

O valor máximo que você pode colocar de cada cor é 255

Cor

No início desta aula dissemos que o preto significa ausência de cor, e que o branco provém da mistura de todas as cores.

Agora nós podemos demonstrar isso. Se você colocar o valor 0 (zero) para o vermelho, o verde e

o azul, verá que será formada a cor preta. Já se você colocar o valor 255 para cada uma delas, ou

seja, o máximo que pode haver de cada uma, verá a formação da cor branca.

Problemas

Muitas vezes a resolução do monitor que estamos utilizando não é a melhor possível,

Decepção na hora de imprimir o trabalho Mesmo quando você fizer páginas Internet,

as quais, a princípio serão apresentadas somente no monitor, pode haver diferença na exibição da cor de um monitor para outro.

Exercício em Sala

Construir um documento utilizando páginas da internet ou trabalhos passados ou ainda novas construções.

Aplicar nesta interface as seguintes variações, para cada caso construir uma interface nova: Utilizar apenas cores quentes e/ou frias (analise o contexto). Utilizar o preto e o branco para criar sensações de cores. Utilizar apenas cores monocromáticas, segundo a roda das cores.

(neste caso é necessário consultar ainda o triângulo das cores) Utilizar apenas cores complementares, segundo a roda das cores. Utilizar apenas cores análogas, segundo a roda das cores. Utilizar apenas cores contrastantes, segundo a roda das cores.

Propósito de criar consciência na utilização de cores em páginas web, assim como aplicar conceitos e possibilitar análises críticas sobre utilização de cores em Interfaces gráficas