Detalhando o Princípio da Estética

Apresentação em tema: "Detalhando o Princípio da Estética"— Transcrição da apresentação:

1 Detalhando o Princípio da Estética
Criação através da tipologia

2 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

3 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

4 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.

5 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.

6 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

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

8 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.

9 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

10 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.

11 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.

12 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.

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

14 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

15 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

16 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.

17 Cor No campo das tintas, existem três cores primárias:
azul vermelho amarelo E três secundárias laranja violeta verde

18 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!)

19 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.

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

21 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

22 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

23 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"

24 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.

25 Cor Observe o triangulo da cor:

26 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

27 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á

28 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

29 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?

30 Cor É verão!!! 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

31 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

32 Cores monocromáticas Veja um exemplo de publicação monocromática:
Cor Monocromática

33 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"

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

35 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"

36 Cores análogas Cores Análogas

37 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

38 Cores contrastantes Cores Contrastantes

39 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.

40 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

41 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

42 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)

43 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!

44 Cor

45 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

46 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.

47 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

48 Cor

49 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)

50 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

51 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.

52 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.

53 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