Transcrições
1. Adative e subtractivo: Na maioria dos países,
a Inglaterra é definitivamente um deles. Quando você estiver na escola por volta
dos cinco ou seis anos, seu professor lhe dirá, essas são as cores primárias, vermelho, azul e amarelo. Eles vão te ensinar
que você não pode fazer essas três cores
de outras cores. E que você pode misturar essas três cores para
fazer qualquer outra cor. Pergunta rápida. quais desses
três fatos você
acha Sobre quais desses
três fatos você
acha que seu professor estava
mentindo para você? Essas três cores são
as cores primárias. Você não pode fazer
essas três cores misturando qualquer outra cor. E você pode fazer todas as
outras cores a partir delas. Bem, infelizmente,
seu professor estava mentindo para você sobre todas
essas coisas. Se você passou algum tempo
trabalhando com um computador, provavelmente está
ciente de que ele tem três luzes diferentes
dentro do monitor, vermelho, azul e verde. Essas são muitas vezes chamadas cores primárias
da
luz, enquanto vermelho, azul e amarelo podem
ser pensadas como
as cores primárias de Brian ao
usar tinta, por exemplo. Outra maneira
de pensar nisso pode ser que as luzes sejam cores
primárias aditivas. Como você começa
com uma tela preta e
adiciona luz para criar cores. Vermelho, azul e amarelo são muitas vezes incorretamente chamados de cores primárias
subtrativas, pois começam com a luz branca
natural
do sol ou alguma luz
branca artificial de uma lâmpada. E cada objeto que essa luz atinge
subtrai a cor dela. Falaremos sobre isso
um pouco mais em todo o resto
deste módulo e, mais tarde você entenderá por que é ruim pensar incorretamente em vermelho, azul e amarelo como sendo
as cores primárias. Eles não são. Se você olhar esses dois conjuntos de cores primárias por mais de
alguns segundos, provavelmente percebe rapidamente
que
é bastante improvável que ambos os conjuntos de
cores primárias tenham quase exatamente o
mesmo cores nelas. Vejamos apenas o vermelho, azul, o verde por um segundo. Agora, essas são definitivamente
as cores que estão no seu monitor agora
que você está olhando. Isso não significa que possamos criar qualquer cor em uma
tela de um computador. Não podemos, na verdade,
nem conseguimos criar tantos, mas podemos criar provavelmente
vários bilhões de cores. E isso é muito para
nós trabalharmos. As cores primárias não podem ser
usadas para criar todas as cores, e podemos
criá-las misturando outras cores. No entanto, usamos essas
três luzes em uma tela de computador simplesmente
porque elas podem criar a maior quantidade de cores a partir de apenas três luzes para obter as cores primárias
com tinta ou tinta. Ou temos que fazer é sobrepor essas três luzes e você
terá algo que se
parece com isso. Essas três cores provavelmente são bastante familiares para você
porque são, é
claro, as três cores
que você coloca em uma impressora. E, claro, você coloca essas três cores em
uma impressora porque elas podem imprimir a maior
variedade de cores com tintas. Agora, neste momento, monitor do
computador
onde está a parte vermelha,
está apenas mostrando as luzes vermelhas e onde a parte verde está, ele só tem as luzes verdes acesas. Mas quando a luz amarela é, ela só tem o vermelho e o
verde em medidas iguais. Da mesma forma, se imprimirmos esses três círculos em um pedaço de papel
usando nossa impressora, o círculo inferior direito usaria
apenas a tinta amarela. O círculo inferior esquerdo usaria
apenas a tinta magenta e o espaço intermediário
usaria apenas o magenta e o amarelo
em medidas iguais. A seção no
centro morto usaria um amarelo, magenta e ciano. E é por isso que colocamos um cartucho de tinta preta
em nosso impresso, porque ficaria
muito caro usar todas as três tintas toda vez
que quisermos imprimir um pouco de preto. Para entender isso ainda mais, precisamos entender
exatamente como a luz funciona, e é disso que vamos
falar neste módulo. No próximo módulo, você entenderá
por que poderia ser particularmente ruim
para seus designs se você não entendesse quais eram as cores primárias por enquanto,
tudo
o que você precisa saber é que essas outras cores
primárias subtrativas, e estas são as cores primárias
aditivas. E talvez esteja tudo bem que seu professor da escola primária
lhe ensinou as cores primárias erradas porque quem quer ensinar a uma criança de cinco anos a
palavra magenta, ciano. Existem dois tipos de cores
primárias que são cores primárias
subtrativas
onde você começa com uma luz branca e, à medida
que ela salta tinta, tinta ou objetos,
elas subtraem a cor do branco e você veja as
cores que saltam. Existem
cores primárias aditivas onde você começa com uma tela preta e você
adiciona luz colorida, que é o que a pessoa vê. Você pode criar cores primárias de algumas outras cores
em algumas situações e não pode criar todas as outras cores a partir
dessas cores primárias. As cores primárias Subtrativas são as que você coloca
em sua impressora, ciano, magenta e amarelo. E os aditivos são
os que estão na tela do seu
computador, vermelho, verde e azul.
2. Ondas: Você pode reconhecer isso como a capa do álbum do Dark Side of the Moon do Pink
Floyd. Mas também é um prisma leve. Agora, se você brilhar uma luz
branca em uma extremidade, um arco-íris inteiro de cores
sai da outra extremidade. Também um ângulo ligeiramente diferente, chamamos isso de refração. Quando isso foi descoberto pela primeira vez, as pessoas pensavam que tinha
a ver com impurezas no interruptor de vidro de alguma forma
adicionaria cores ao prisma. Então Isaac Newton tentou algo bastante
interessante com isso. Ele disse, e se eu colocasse um prisma diferente do outro
lado logo depois disso? E Isaac Newton
descobriu que, se você colocar o segundo prisma na posição
exata correta, ele combinará
todas as cores novamente em uma
única luz branca. Exceto que ele não
sabia o porquê ainda. Ele ainda
achava que a luz era como partículas ou algo assim. Compreendemos muito melhor
como a luz funciona por volta de 1801, quando um cara chamado
Thomas Young fez um experimento muito simples. Ele tinha um quarto, mas você poderia fazer isso com uma caixa se quisesse. E ele cortou duas
fendas muito simples em uma folha. Os quartos estão completamente escuros. E quando ele acendeu uma tocha ou ele realmente usava luz de
velas na época. Ele esperava que seriam duas
fendas de luzes no final, duas linhas de luz. Mas, na verdade, o que
aconteceu foi que havia toda uma
gama de luzes, diferentes brilhos
na parte de trás da sala. Você pode replicar esse experimento com
bastante facilidade usando uma caixa e uma tocha e
alguns cortes na caixa. O que ele, claro, descobriu, o que todos sabemos agora é
que a luz é uma onda. A razão pela qual e hat
muitas linhas na parte de trás, mesmo que ele cortou
duas linhas na caixa, é muito semelhante a como
se você tiver ondulações, algumas áreas de uma onda podem cancelar umas às outras e
outras áreas podem uma onda mais forte
como aqui, onde você pode ver essas duas
ondulações atravessando. Agora, o que percebemos como
sendo cores diferentes é simplesmente comprimentos diferentes
dessa onda que estimulam
diferentes partes do nosso olho. Vamos olhar para fora mais tarde. Por exemplo, uma onda azul é
muito mais curta que uma onda vermelha. E se formos adicionar um monte de comprimentos de onda
diferentes, você verá que
eles são basicamente todas as cores do arco-íris, com um violeta sendo muito curto e vermelho
sendo muito onda longa. Claro, a maioria das ondas em um feixe de luz não
está aparecendo aqui. Existem muitos, muitos,
muitos laços que
são mais curtos do que violeta e chamamos essas ondas
ultravioleta. E há muitas, muitas,
muitas ondas que são
mais longas que as vermelhas. E chamamos essas ondas
infravermelhas, mas todas elas viajaram
juntas e simplesmente não percebemos
as que não podemos ver. É muito raro que um
único ponto do nosso olho
seja atingido por um único comprimento de
onda de cada vez. Na verdade, muitas
dessas ondas estarão andando juntas assim. O que seu olho veria aqui provavelmente
está bem próximo branco
se todos esses
comprimentos de onda estivessem juntos. Quando vemos uma cor, quase sempre
vemos uma variedade de
comprimentos de onda diferentes. Por exemplo, esse
tom de rosa não tem um comprimento de
onda em si. É somente quando você
tem muitos comprimentos de onda, e a maioria são ondas longas vermelhas e violetas muito
curtas, que combinam
para criar este rosa. Se eu fosse como a onda de
luz funciona. Por que a
pirâmide de Isaac Newton divisor luz
branca em todas
as cores diferentes? Bem, essa luz branca pura que você obtém de
uma fonte de luz ou do sol é, na verdade todos esses diferentes
comprimentos de onda combinados. Eles estão todos se unindo. Agora vamos supor que eles
vêm através de uma janela de vidro. Se olharmos apenas para o vermelho e o violeta
para começar, quando eles batem no vidro, eles vão diminuir a velocidade. À medida que
deixam o vidro, eles vão acelerar a onda longa, a onda vermelha vai diminuir menos do que
a onda violeta. Vai atingir menos
partículas no vidro. Estou simplificando demais,
mas digamos porque ele está se
movendo muito menos, está fazendo menos contato
com partículas de vidro. Isso não faz muita diferença, pois vem
através de uma janela de vidro porque o ângulo entra no vidro e o ângulo que ele deixa
é o mesmo. E a onda de luz vermelha rápida
simplesmente
alcançará algumas
das ondas de luz violeta mais lentas à frente. E você, eu
ainda vou ver rosa. Perdoe a ligeira grosseira
deste diagrama aqui. Mas se a luz surgir,
você acerta um
pedaço de vidro angular, ele mudará
a direção das luzes
tão ligeiramente. Porque vai diminuir
a velocidade
no topo mais cedo do que fica mais
lento na parte inferior. Imagine se você estiver em um carro de um
lado do carro está indo mais rápido que
o outro, ele gira. E porque o ângulo, essas duas luzes
deixam o vidro não é o mesmo que o
ângulo em que entram. Eles nunca vão se
juntar um ao outro. E é aqui que essa tangente
aparentemente trivial pode se tornar útil para
você como designer de interface do usuário, a cor roxa refratará mais do que a cor vermelha. Falaremos
mais sobre isso em um momento. Mas espero que isso pelo menos tenha explicado como essa
pirâmide funciona. A luz é uma onda e o que percebemos como
cores diferentes é, na verdade apenas diferentes
comprimentos de ondas quase nunca viram uma
única onda de cada vez. As cores que vemos são uma combinação de ondas
diferentes. E há várias
coisas que podem acontecer a um feixe de luz para adicionar um comprimento de onda ou subtrair
um comprimento de onda ou
refratar um comprimento de onda independente
das outras ondas
nesse feixe de luz. Como designers, estamos
tentando criar um ambiente e isso parece natural para
as pessoas que elas se sentem confortáveis em olhar. E para fazer isso, precisamos
entender como
essa luz funciona.
3. Processo trichromatic: Sabemos que a luz é uma onda, mas como isso nos
ajuda de alguma forma? Se
estivessem andando no meio de uma floresta e vemos esta folha. Por que é verde? Se eu olhar para este lugar,
muito, muito pequeno e
vou ampliá-lo. Atualmente, ele está
aparecendo este verde. De onde vem isso? Bem, a planta física real absorve algumas das
ondas de luz provenientes do sol. Se imaginarmos por um segundo que a luz está sob luz solar
direta, ela foi atingida por toda uma gama de
diferentes luzes. Se tivermos uma chance aqui com todos os diferentes
comprimentos de onda ao longo do eixo x e quanto é absorvido por
esta folha ao longo do eixo y, podemos obter
algo assim. Ou seja, esta folha está
absorvendo muitas luzes vermelhas de ondas longas e muitas luzes azuis
e roxas
de ondas curtas, mas a folha
não está absorvendo muita essa luz verde
de médio alcance. Agora, se esta é a
quantidade de luz É absorvente de diferentes
comprimentos de onda do que a quantidade que está refletindo dos
comprimentos de onda será exatamente
o oposto. Observe que não estou dizendo
que não absorve nenhuma luz vermelha de ondas longas ou
qualquer luz azul e roxa de ondas curtas, estou dizendo que
absorve menos disso. Se voltarmos para a
floresta no meio
da noite e
tivermos uma tocha vermelha, ou lanternas como alguns
de vocês podem chamá-la, e
brilharmos na mesma folha, ela parecerá vermelha
porque ainda está reflete um pouco de vermelho, apenas menos vermelho que verde. Também refletirá uma variedade de tintos
diferentes em diferentes áreas
da folha porque diferentes
pedaços da folha refletirão em absorver
diferentes comprimentos de onda. Agora, o que acontece dentro de
nossos olhos é ainda mais surpreendente eles o que aconteceu
dentro dessa folha agora, nosso olho tem milhões
de receptores que também absorvem
e refletem a luz. Eles podem identificar
qual é o comprimento
de onda da luz diferente que
entra nela. Eles também têm milhões
de receptores que identificam quanta
luz está entrando, como intensidades, ou
podemos pensar como ela é clara ou escura. Vejamos esses
receptores que podem identificar o comprimento de onda. Temos três
tipos diferentes de cones em nossos olhos, e eles podem identificar diferentes
comprimentos de onda de luz. Há um que identifica
apenas as luzes de ondas curtas, qualquer coisa nesta faixa aqui. Então um que identifica
a luz de médio alcance, esse tipo de alcance aqui. E então um que pode identificar luz de
ondas longas como esse
tipo de cabelo de alcance. Às vezes, esses são chamados de receptores azuis ,
verdes e vermelhos. Isso não é bem verdade. Como você pode ver, não somos
particularmente bons em identificar
diferentes tipos de vermelhos, mas somos muito bons
em verdes e amarelos. Porque o que esses cones podem identificar cruzes
bastante no meio. Agora, se
olharmos para
aquela onda de luz que estava saltando daquela folha, e decidimos que o que foi refletido da folha parecia
um pouco assim. Quando olhamos para este
verde no canto superior esquerdo, nossos cones de médio alcance são
quase completamente estimulados. Eles estão dizendo, sim, essa é definitivamente essa gama de cores. Receptores de ondas longas estão dizendo
que é uma espécie dessa área. Sim. E nossos receptores de ondas curtas
estão dizendo, sim, não
há muita dessa luz de
ondas curtas entrando. Agora, se houver simplesmente
menos luzes no geral, então saberemos
que é mais escuro ou mais saberá
que é mais leve. Mas e se
for o mesmo verde, mas
parece mais verde. O mesmo verde, o
mesmo brilho, mas parece mais limpo. E quanto a esse verde? Bem, vamos entrar
mais nisso no próximo módulo, mas isso é apenas um verde
mais saturado. É o mesmo tom de verde
é apenas mais saturado. Estamos vendo isso melhor. Estamos vendo a
mesma variedade de luzes quando olhamos para este
novo verde saturado, mas estamos vendo uma distribuição
diferente. É mais puro. Se alguma vez tivéssemos uma distribuição completamente
plana aqui, ela pareceria cinza ou eu não saberia de que cor é
e parece cinza. Este novo verde é
muito, muito claro. Quanto mais dominante
uma onda de luz, menos cinza ela aparece, mais saturada é a cor. Agora vamos voltar ao
nosso verde original. Vamos ficar com isso
por um segundo e depois ver o que nosso olho faz a seguir. Bem, eu simplesmente recebo algum tipo de dados
binários de cada um desses
três tipos de receptores. Vamos simplificar
um pouco isso e dizer que talvez o receptor de ondas curtas
diga, estou 20% estimulado. O intervalo médio diz 90%, e o de longo alcance
diz 80%. Deste ponto em diante,
perdemos muitos dos dados de nuance. Não sabemos mais a forma
da curva e não
sabemos a quantidade exata de diferentes comprimentos de onda
que estamos recebendo. Isso significa que uma curva completamente
diferente
poderia parecer exatamente
o mesmo verde. Depois, há uma pontuação de falha. Nosso olho também tem algumas hastes
e estas apenas identificam o quão
intensa é a luz. Há muito mais
hastes do que cones. E, portanto, somos muito
melhores em identificar como as coisas claras e escuras são do que a cor exata delas. Então, digamos que nossas
hastes simplesmente nos digam como uma classificação de intensidade de 40%
para esse pouco de luz. E isso significa que 100% seria branco e 0% seria preto. E estamos em algum lugar
entre esses dois. Neste ponto r, eu só
tenho essas quatro pontuações, mas isso não é o que ele
envia para o cérebro. Isso traduz isso
um pouco. O que nosso cérebro recebe
são esses três valores calculados, que é o que é a proporção
verde para vermelho? Qual é a proporção azul
para amarelo e qual é a proporção
claro/escuro? Claro, você pode se perguntar
como há um amarelo? Requer algum cálculo, pode ser, adiciona
o verde e o vermelho. Mas lembre-se de que nenhum
desses três receptores estava exatamente
pegando uma cor de qualquer maneira. Na verdade, o receptor de ondas
longas captou cores de
médio alcance. Então, todos esses
cálculos têm um pouco de espaço para imprecisão. E é aí que
entra o daltonismo, onde um deles não é
calculado corretamente. No entanto, o
valor claro a escuro não requer muitos cálculos e teve a
maioria das hastes em primeiro lugar. Então isso é muito,
muito preciso. Esses três novos
valores são enviados para o nosso cérebro e é assim que
pensamos que estamos vendo cores. Tudo no
mundo reflete e absorve diferentes quantidades
de comprimentos de onda diferentes. São, eu tenho alguns
receptores que podem identificar qual faixa de comprimento de onda diferentes bits
do isqueiro. Em seguida, ele faz alguns cálculos e envia isso para o cérebro. Há também receptores que apenas identificam o quão clara e
escura a luz é, quão intensa ela é. E estes são muito,
muito mais precisos.
4. Chromaticity: Sabemos que podemos criar uma
ampla gama de cores, apenas usando luzes vermelhas, verdes
e azuis. Se você entrou em um quarto completamente
escuro e você Sean, três
luzes diferentes na parede, vermelho, verde e azul. No centro, você
ficaria branco. Isso porque branco
é o que
vemos quando obtemos toda a
gama de luzes. E é uma alta intensidade porque todas essas luzes estão acesas, energia
total. Se eu desligasse
a luz verde, se eu baixasse a intensidade
da luz verde, teria uma magenta leve no meio aqui
porque não teríamos mais todas as
luzes em igual equilíbrio. Da mesma forma, se eu baixar o azul, vamos ter um
amarelo claro no meio. E se eu baixar o vermelho, vamos pegar um ciano
claro no meio. Se eu diminuir a intensidade de
todas as três luzes, teríamos um cinza
no meio. Agora, se brincarmos com a intensidade
dessas três luzes, teremos
muito cinza e
teremos muitas
das mesmas cores. Quando você abre um
programa gráfico e
ajusta os números para mudar
a cor de algo. Você não quer que a maioria
das cores seja cinza ou a maioria das
cores seja a mesma. Então, nas décadas de 1920 e 1930, algumas pessoas fizeram uma
série de experimentos alterando a
intensidade de cada uma
dessas luzes individualmente
e traçando-as em um gráfico 3D com base em quais
cores as pessoas podiam perceber para identificar
onde a gama de cores perceptíveis que
você pode criar com vermelho, verde e azul são, é claro, existem três eixos, então os resultados são uma forma 3D. E observe que a forma
é bastante irregular, nossa percepção
funciona de forma diferente em diferentes níveis de intensidade. E mudanças de intensidade
nas três luzes diferentes
nem são percebidas da mesma forma. Agora poderíamos converter
essa criança em algum tipo de coordenadas 3D que são programas gráficos
e nossos sites podem se lembrar de
referenciar cores. Mas apenas uma pequena variedade
de espaços
neste gráfico são cores percebíveis
e únicas. Felizmente, percebemos que, se você olhar para o ângulo certo, você pode achatar a coisa
toda e obter todas as cores. As pessoas tentaram dividir
isso de várias maneiras. Mas geralmente percebemos
que ainda não é super útil porque se
usarmos essas coordenadas, novamente, a maioria das
cores é repetida. Por exemplo, se eu pegasse as coordenadas para
esses pontos aqui, eu obteria exatamente a
mesma cor que consegui para esse local aqui. O que a maioria dos softwares de computador
tendia a fazer era simplesmente tomar uma
forma regular dos cabelos. Isso significa que
estamos perdendo um monte de cores únicas
e perceptíveis. Mas há
muitas opções aqui. Lembre-se, você não pode
criar todas as cores de vermelho,
verde e azul. Você pode criar muitas
cores de vermelho,
verde e azul. Um problema surgiu aqui, porque diferentes softwares
e empresas diferentes começaram a usar diferentes seções das cores e referenciar as coordenadas de
maneiras diferentes. Por exemplo, se você
já imprimiu o design, saberá que é um
pouco complicado. Você definirá seu programa
gráfico para usar cores CMYK, ciano, magenta e amarelo
porque sabemos que essas são as
cores primárias para impressão. Mas, no entanto, quando você
imprime o documento, ele ainda não se
parece a tela porque
ele foi representado na tela usando luzes e foi representado
no papel usando tinta. Mas também porque a
seção de cores que o CMYK usa nem é a mesma seção de cores que nosso site usa. Existem algumas cores
que literalmente simplesmente não existem no papel, que existem na
tela e vice-versa. Felizmente, porém, os sites usam o mesmo padrão colorido, e é chamado S,
padrão RGB, vermelho, verde, azul. Este triângulo é aproximadamente as cores que podem ser
mostradas em um site. Digamos que eu queria mostrar
isso laranja em um site, eu teria três coordenadas
dos três cantos. E essas coordenadas
estão entre 0255. Esta laranja está confortavelmente
no canto vermelho, então é 255 vermelho, está muito longe
do canto azul, então é apenas 80 azuis. E está um pouco mais
perto do canto verde, então fica em torno de um verde 150. Agora posso usar esses três
números em qualquer site ou qualquer programa gráfico
e recriar exatamente
essa mesma laranja
que eu quero exibir. Agora, porque criamos essa carta de percepção 3D
anteriormente e depois a achatamos. Não estamos incrementando a
intensidade da luz em incrementos
iguais
quando passamos de 78 para 79 e de 79 para 80, porque 255 nem é
esse número maior. Quando passamos de 79 a 80, estamos realmente pulando sobre algumas cores que nem
estamos usando. Mas podemos criar bem mais de
16 milhões de cores usando sRGB. Srgb agora é a maneira padrão de referenciar cores usando luz vermelha, verde e azul. E isso lhe dá acesso
a 16 milhões de cores. Ele usa três
coordenadas para vermelho, verde e azul entre 0255, cada incremento nessas
coordenadas não aumenta
uniformemente a
intensidade da luz, mas é incrementado baseado na percepção humana usando aquele gráfico 3D original que foi criado na década de 1930.
5. Como a cor funciona: A luz é uma onda. E quando o comprimento
dessa onda muda, nós a percebemos como
uma cor diferente. Muito raramente vemos uma onda de
luz por conta própria. Normalmente é misturado
com outros comprimentos de onda, que é como podemos
ver uma cor como roxo que não tem
um comprimento de onda próprio. É uma mistura de ondas muito
longas e muito curtas. Se tivermos uma mistura de muitas luzes sem
onda dominante, vemos ótimo. Quando há mais
luzes juntas, ela parece mais próxima do branco. E quando há menos,
parece mais perto do preto. Falaremos sobre os nomes
específicos para eles na próxima seção. Quando as luzes
atingem nosso olho, elas estimulam as hastes para quantidades
diferentes,
dependendo de quantas ondas existem. Eles estimulam três
tipos de códigos diferentes graus,
dependendo de quanto tempo as ondas sobem. Interpretamos isso
como ver a cor. Diferentes objetos
no mundo aparecem uma cor porque absorvem certas luzes e
refletem outros enquanto as coisas na
tela aparecem de uma cor, é porque o vermelho, o verde, e LEDs azuis mostram em diferentes intensidades para criar algo
parecido com essa cor. Eles adicionam as luzes. Chamamos isso de aditivo. Enquanto a absorção de
luzes chamamos de subtrativo.
6. Valores: Quando você pensa na
aula de arte, quando era mais jovem, quando aprende a desenhar pela primeira vez, provavelmente
aprendeu a desenhar. Certo. Em preto e branco, se
você é algo parecido comigo, provavelmente não poderia desenhar tão
bem quanto essas
fotos na tela. Mas pelo menos fazia sentido
intuitivo para você. Quando a área está mais escura, você empurra o lápis com mais força
e obtém uma cor mais escura. Quando a área é mais leve, você não coloca o lápis nele e deixa-o branco. O que você está lidando
aqui é chamado de valor. É como a área é escura ou
clara. E eu vejo meu, seu
completo senso intuitivo. E se estiver errado, isso realmente
mexe com a nossa cabeça. Podemos detectar quando o valor
está errado muito rapidamente, como você verá muito em breve. O problema que tivemos com a
aula de arte quando éramos mais jovens. Quando começamos a tentar fazer com que
esses desenhos sejam coloridos. Se você é algo parecido comigo, o pensamento de
tentar criar a imagem
à direita é apenas uma
pia do amanhecer e aterrorizante. Nunca consegui desenhar algo
que pareça tão bom. E isso porque, de
volta à aula de arte, assim como muitos de vocês, quando comecei a
pensar em cores, parei de pensar
tanto sobre o valor, como a imagem
à esquerda onde estou pensando sobre a escuridão
e a leveza. E comecei a pensar muito mais em algo chamado matiz. Você pode pensar na tonalidade como
as cores para as quais você
tem um nome. Você pode olhar para esta
foto e dizer que isso é rosa, isso é azul, isso é branco. Embora tenhamos
olhado para esta imagem muito mais perto e percebemos que
há muitos, muitos tons de pele diferentes, marrons
escuros e brancos
claros por todo o rosto. Os valores variam massivamente, mesmo que a tonalidade não aconteça tanto. Na verdade, vou
argumentar que a tonalidade não
importa quando você está
criando uma pintura colorida. O que você pode ver
na tela aqui é uma seção de uma roda de
cores mostrando o laranja e vermelho e verde e azul e todas as cores para
as quais você tem um nome. Aqueles que vou sugerir em suas primeiras aulas de arte, você estava pensando
um pouco demais. Agora, os valores, por outro lado, essa parte que atravessa a
roda de preto para branco, quão escura ou clara é a cor. Os tons, se você quiser, é muito, muito mais importante. Se você fosse
voltar para a aula de arte e tentar pintar uma pintura
realista. E é por isso que
a maioria de nós
nunca passa do desenho em
preto e branco. Tiramos um conjunto de
tintas e começamos a pensar demais sobre
a tonalidade de cada tinta. Começamos a pensar demais sobre os nomes vermelho, azul, verde e não o suficiente sobre
como precisamos misturá-los com preto e branco para
obter os diferentes valores. A única vez que um
artista pensa matiz é fazer algo
mais interessante, adicionar alguma emoção
a uma imagem. Você poderia pintar um rosto
humano usando tintas
azuis e ainda pode
parecer totalmente realista. Pode parecer fisicamente possível. Uma das razões para
isso é realisticamente você viu um
rosto humano azul em algum momento. Você viu alguém em uma sala onde a maioria das
lâmpadas eram azuis
e, portanto, a luz refletindo em seu
rosto era azul. E então o rosto deles
parecia estar em um tom azul. Mas todos os valores
de seu rosto, como as luzes e
escuros cada área era em relação às outras
áreas nunca mudaram. Luzes e escuros sempre
significam a mesma coisa, mas a tonalidade pode mudar
drasticamente dependendo do que
mais está na sala. E, como você aprende mais tarde,
simplesmente qual cor está ao lado dela. O problema é que quando
começamos a pensar em matiz, paramos de pensar em valor. Se você já voltou para a
aula de arte, lembra daquela? Retire uma única tinta
e tente
misturá-la com branco e
misturá-la com preto. Esses são chamados de tons. Se você adicionar mais branco a ele, chamaria de tonalidade. E se você adicionar mais preto a ele, chamaria isso de um
tom dessa tonalidade. A tonalidade é o que você
normalmente pensa quando tradicionalmente
pensa em qual cor é ela? Verde, azul, vermelho, amarelo, etc Embora isso seja importante, o valor é muito mais importante para tornar nosso design
fisicamente possível, que fará com que nossos
usuários se sintam mais confortável que eles estão
olhando para uma coisa real. O valor é como a cor é clara ou
escura. Às vezes chamamos
esse brilho. Mas para o bem deste
curso e trabalhar com cores, vamos chamá-lo de valor. Você pode pegar qualquer matiz
que estiver trabalhando com um adicionar branco para criar uma
tonalidade dessa cor. Ou você pode adicionar preto a ele para criar um tom dessa cor. E para sua lição de casa, para sua primeira tarefa, quero que você tente criar
um design ou desenhar uma ilustração onde você limita o número
de matizes que você usa, mas você
mudou drasticamente os valores. Isso forçará
você a pensar sobre o valor das cores
de sua escolha. Você pode abrir um
programa de design se tiver um, ou você pode tirar
alguns lápis de cor e limitá-lo a talvez três matizes
no início e ver se você pode criar uma
aparência realista ilustração, apenas alterando os valores.
7. Exercícios de valores: A primeira coisa que
gostaríamos de aprender a fazer ao aprender a trabalhar com cores é aprender a identificar e trabalhar com valores
diferentes. Na tela agora
estão 11 cores diferentes, mas todas as 11 cores são exatamente
a mesma tonalidade. Eles só têm valores diferentes. Eles são mais claros ou
mais escuros na mesma tonalidade. Veja se você consegue
identificar o pedido. Olhe para essas 11 cores agora, note que todas elas têm uma
carta e depois reorganize as letras para
ir de branco para preto. Então, pause o vídeo, dê uma olhada e,
em seguida, reproduza novamente. E vou te mostrar as respostas. Aqui estão as respostas. Como você se saiu? Meu palpite é que você provavelmente
se saiu muito bem. É relativamente intuitivo
identificar os diferentes valores
entre cores diferentes quando elas são exatamente a mesma tonalidade, é por isso
que éramos
tão bons em fazer
desenhos em preto e branco com um lápis, mas não é tão bom quando
começamos a adicionar tinta. Você também pode notar quando
eu colocar todas essas cores ao
lado de qualquer que
elas afetem umas às outras, vamos falar sobre
isso um pouco mais tarde. Eles começam a parecer
quase gradientes. E, na verdade, o branco
parece um leve cinza. E isso é puramente
por causa de como é afetado pelas
cores próximas a ele. Vamos cobrir isso em
outro vídeo muito em breve. Mas agora eu quero
aumentar o desafio. Vou embaralhar esses
valores novamente, mas desta vez vou
trazer os tons de volta e todos eles vão
ter tons diferentes. Tenha outra chance de
classificá-los em ordem de valor, quanto branco ou preto eles têm e veja como
você começa neste momento. Então, pause o vídeo e
reproduzi-lo e mostrarei
as respostas em um segundo. Como você chegou desta vez? Meu palpite é que, mesmo que
você tenha tantos corretos. Como você chegou da última vez, você provavelmente ainda passou
mais tempo olhando para ele, tentando ter certeza de
que eles estavam rachados. E, no entanto, eles ainda são exatamente
os mesmos valores na mesma ordem
que tivemos com o último exercício. Este exercício pode ser
realmente útil para ajudar a treinar seus olhos para
identificar melhor os valores. Essa será uma das coisas mais importantes
com
o aprendizado sobre cores. Por essas razões, criei um PDF no qual você pode
clicar sobre esse mesmo exercício mais
algumas vezes em vez de eu passar por cima novo e de novo neste vídeo, você pode baixar isso
a partir dos recursos. E só para
terminar este vídeo, quero mostrar como esta lista de 11 cores em tons diferentes. Parece cabelo muito escuro, parece que os valores
em geral são bastante altos. Mas uma vez que eu os coloco
em ordem de valor, eles parecem muito baixos. De repente, parece
bastante leve na página. Os valores dessas cores parecem diferentes apenas
por causa da ordem. Tentar identificar
a ordem
de valor de cores diferentes é um
exercício realmente útil. Isso ajudará a treinar
nossos olhos para detectar essas
diferenças sutis em valores que farão toda a
diferença em seu design. Então, neste vídeo muito curto, tivemos uma chance de fazer exatamente isso. E agora eu quero que você
baixe o PDF
dos recursos e
tenha uma chance de fazer exatamente
a mesma coisa mais
algumas vezes.
8. Brilho: Espero que você tenha conseguido
pedir alguns desses valores
do último exercício, mas você provavelmente
errou alguns. É um exercício muito difícil. Normalmente, para tornar um
pouco mais fácil para os usuários, até mesmo artistas e até mesmo a
fotografia vão realmente desenhar os valores para
os extremos e tornar os tons médios mais
escuros ou mais claros. Se você tirar uma fotografia, especialmente se você deixar sua câmera nas configurações
padrão, ela provavelmente tornará ligeiramente escuras
ainda mais escuras e as cores
ligeiramente claras ainda mais claras e crie
contraste extra na foto. Nossas câmeras fazem isso
parcialmente só porque é uma tendência recente e gostamos da aparência das fotos de alto
contraste. Mas também é
bom para nós porque podemos interpretar e
entender a imagem mais rapidamente. Isso também significa que nossos olhos
foram treinados em valor
não natural em imagens e provavelmente queremos
continuar com isso. Tendência. Usos são usados para ver
coisas com alto contraste. Até agora você provavelmente
está se perguntando por que eu
continuo usando o valor
da palavra quando a palavra brilho faz muito mais sentido
nessa situação, estamos falando sobre o quão
brilhante é a cor, certo? Bem, talvez, mas infelizmente brilho quando estamos
falando de cor, muitas vezes
isso pode significar algo
um pouco mais perceptivo. Quão perceptualmente brilhante
parece ser para nós. É por isso que a última atividade que
lhe dei é
um pouco cruel. Você está muito acostumado
a
detectar se algo é
mais brilhante ou não, mas não tanto se tiver
um valor maior ou menor. Para ajudar a explicar,
criei gráficos muito simples aqui. Ao longo do eixo x,
as enormes mudanças e ao longo do eixo y,
o valor muda. Você provavelmente notará
apenas olhando para isso, que há três listras claras para baixo em três listras brilhantes onde parece ter
um valor maior à medida que você vai
da esquerda para a direita, apesar do fato de que estou claramente dizendo que não. E essas três cores são
ciano, magenta e amarelo. Há uma certa importância para essas cores sobre as quais
falaremos mais tarde. Você já deve ter
notado que existem
as três cores que você
coloca em sua impressora. Mas, por enquanto, vamos pegar essas três cores
e adicionar de volta as três cores que se encaixam perfeitamente no meio
entre os espaços delas, que é vermelho, verde e azul, e traçá-las
neste gráfico se fosse para brilho em vez
de quatro valores. Agora, eu exagerei um pouco isso por causa deste gráfico, mas você pode ver que essas seis cores que
têm exatamente o mesmo valor, têm
brilhos bem diferentes. Agora lembre-se do que isso
significa é que eles têm a mesma quantidade de branco ou
preto adicionado à tonalidade básica, mas eles aparecem diferentes
níveis de brilho para nós, nossa percepção é diferente. Se eu adicionar todos os
diferentes brilhos desses que estão de volta, você notará algumas coisas. Primeiro de tudo, temos
três picos significativos, amarelo, ciano e magenta, e três calhas,
vermelho, verde e azul. Mas você também
notará que ele não faz mais um quadrado prático. E é por isso que você não vê
isso em um programa gráfico. Falaremos
mais sobre isso em um pouco, mas você não pode criar
um sistema numérico para referenciar cores
neste novo gráfico porque você pode obter um ponto
onde não há uma cor se repetirmos o exercício
do último vídeo, mas desta vez olhamos para
uma série de cores e tentamos encomendá-las com
base no brilho percebido. E sejamos justos,
você não pode
entender isso errado porque
é a percepção sobre a forma como
quantificamos o brilho é
baseada em uma série de experimentos usando
centenas de pessoas em avaliando como
algo parece brilhante para eles. Se você quiser tentar
organizá-los em ordem de brilho
percebido, dê uma chance, tente
anotar as letras agora. Mas você deve achar isso muito
mais fácil porque não
há amarelos escuros e
não há nenhum azul brilhante. Aqui estão as respostas chegando. Agora. Agora, se você teve algum
problema com
isso, foi realisticamente
provavelmente por causa das cores no meio. A diferença no
brilho percebido entre cada um
deles e cada um de seus
vizinhos é exatamente a mesma. Mas ainda vamos
encontrar as áreas
no meio um pouco
mais difíceis de identificar. E isso pode ser
parcialmente porque os artistas e até mesmo as configurações
da sua câmera, tentaremos evitar
mostrar esses terrenos intermediários. Esse é o tipo de cores que talvez seriam evitadas. Quando falamos sobre o
brilho da cor, não
é exatamente a
mesma coisa que valor, é ajustada para a percepção. Ciano, magenta e amarelo
naturalmente parecem mais brilhantes para nós, e vermelho, verde e azul
naturalmente parecem mais escuros para nós. Quando escolhemos cores usando um programa gráfico ou mesmo CSS, não
podemos escolhê-las
com base no brilho, principalmente porque é
muito mais difícil criar um sistema para
escolher cores dessa maneira. Falaremos sobre isso
muito mais tarde. Mas isso significa que usando nossos
programas gráficos ou CSS, podemos facilmente escolher cores que
ficarão ruins. Por exemplo, um amarelo escuro não
vai parecer
particularmente bonito, ou mesmo qualquer coisa no meio
da faixa de
brilho, o que pode não nos dar aquele aspecto de alto contraste
que todos nós aprendemos a amar e também podemos
tornar nosso design um pouco mais confuso
e difícil de perceber.
9. Exemplos de brilho: Aqui está uma variedade de vermelhos. Agora eles são todos
exatamente a mesma tonalidade, mas não são valores
diferentes. Se eu usar um seletor de cores especial para escolher vermelhos de
diferentes brilhos, isso me dá muito menos escolha. Há literalmente essas três
pequenas variações, Realmente. Isso é que posso supor que é porque as pessoas simplesmente
não percebem a cor no canto superior
esquerdo e a cor e o canto superior direito são
realmente da mesma cor. Mas uma coisa que definitivamente podemos dizer é que a cor e o canto superior esquerdo e a
cor no canto superior direito simplesmente não parecem
particularmente bonitos. Provavelmente não
queremos usá-los. Anteriormente eu disse, você não pode realmente fazer bordas amarelas escuras. Não parece bom. Bem, o que você
gostaria de fazer
nessa situação é fazer
um pouco marrom, amarelo, e
então pode ficar bonito. O que posso fazer com esse intervalo de vermelhos são aqueles
com valor mais baixo, posso adicionar um pouco de tonalidade azul. E aqueles com
um valor maior, posso adicionar um
pouco de tonalidade amarela. Isso significa que não só o valor
é o mesmo, mas na verdade parece
um pouco mais e menos brilhante nos extremos. E acabamos com algumas cores que não
parecem apenas um pouco mais bonitas, mas são um pouco mais
confortáveis de perceber. Sempre que você cria uma
faixa de cores com a mesma tonalidade, ela ficará muito
ruim nos extremos. Com as cores de alto valor. Você vai querer
misturar um pouco de uma tonalidade muito brilhante lá. E com as cores de baixo valor, você vai querer
fazer o oposto e colocar uma tonalidade menos brilhante
misturada com essa cor. Digamos que eu esteja projetando esse interruptor de alternância simples
para um aplicativo da Web. Eu quero que meu botão de alternância pareça 3D
para que as pessoas saibam instantaneamente que é algo com o qual
elas podem interagir. Vou adicionar uma
pequena sombra por dentro,
então mostra que esta
área cinza é recuada e um pouco de luzes
no pequeno círculo vermelho que você pode ver
que está saindo um pouco. Estou basicamente imaginando que há uma fonte de luz no
canto superior esquerdo da tela. Essas são as
cores adicionais que usei. Eu usei uma
versão de valor mais alto do vermelho e uma versão
de valor mais baixo do cinza azulado. Agora, quando falamos
sobre como a luz funciona, você perceberá que isso
não parece natural. Não é assim que a luz
salta naturalmente. Mas você definitivamente pode concordar não parece natural e provavelmente não parece tão
bom por alguns motivos. Primeiro, o vermelho agora só tem um
pouco mais branco nele. De certa forma,
parece quando você está impressoras sem tinta. Agora, a coisa de menor valor
na página é uma sombra criando muito contraste em um lugar onde eu
realmente não quero. Posso contornar esses dois
problemas ajustando um pouco a tonalidade. O vermelho agora é um
pouco mais alto de valor lido, mas tem um pouco de
amarelo misturado então, e o cinza agora é um
pouco de menor valor cinza,
mas na verdade tem um pouco de azul misturado. Agora tenho algo
com um visual em 3D, então sei que posso
interagir com ele, mas na verdade parece
um pouco mais
natural e mais fácil de perceber. Vou começar a trabalhar em uma página inicial para um site que nunca
vou construir. Aqui estão estatísticas muito, muito
básicas e vamos ver se podemos
fazer algumas melhorias. Bem, este laranja brilhante para este curso inicial e
o botão de inscrição, eles são da mesma cor que estes, 1234 na parte inferior. Eles têm o mesmo brilho. E eu gostaria que
esses números tivessem
um brilho menor para que
eles saltem um pouco menos. Vou diminuir
o brilho não apenas adicionando um
pouco de cor preta, mas também tornando-os um
pouco mais laranja brownie. Agora, os botões ainda não
são a
coisa mais importante na página. Acho que o texto do cabeçalho
provavelmente está sobrecarregando-os um pouco. Eu só vou
realmente reduzir os brancos dos textos do título. A cor roxa não é
particularmente brilhante, mas apenas o tamanho das letras combinado
com os brilhos, dado a elas um pouco de importância
demais
na página para fazer meus botões realmente se destacam
e para que as pessoas
saibam instantaneamente que podem clicar nelas. Vou adicionar
um pouco de sombra, mas como fizemos antes, vou colocar um pouco
de azul na sombra, então não é realmente
esmagador na página. E vou
adicionar um pouco de amarelo nos destaques. Agora isso é ótimo. Meus botões estão
realmente se destacando. Agora, há uma coisa que eu
simplesmente não suporto sobre
esse design. Tem uma espécie de cinza
no fundo por trás desse
personagem à direita. Há como uma bolha cinza e
eu realmente não quero grande área de cinza
e parece aborrecido. O que eu poderia fazer é criar uma cor
muito mais brilhante para que não seja
super esmagadora, mas apenas dá um pouco de
cor ao verso da página. Se verificarmos novamente
nosso gráfico de brilho, podemos ver que ciano é
uma cor bem brilhante, apenas segundo para amarelo. Agora, estamos usando
amarelo como realces, então não
vamos usá-lo como uma cor de fundo. Vamos colocar um pouco de ciano
muito leve no
fundo aqui em vez disso. Finalmente, vou usar meu olho muito rapidamente agora que tudo tem uma cor
diferente para realinhar as coisas um
pouquinho. Agora tenho um design com o qual não
estou super feliz. Faremos
algumas melhorias nos próximos vídeos. Mas agora acho que é muito,
muito melhor do que o design
original. Eu não mudei o layout. Eu não mudei nenhum conteúdo. Eu não mudei os tipos de letra, e só me ajustei nas cores de uma quantidade muito,
muito pequena. No início deste vídeo, você me viu criar
uma faixa de cores vermelha onde, para os vermelhos mais escuros, coloquei uma pequena quantidade de azul. E para os vermelhos mais claros, coloquei uma pequena
quantidade de amarelo, escolho uma cor diferente, talvez verde,
e tento fazer a mesma coisa. Veja se você pode criar uma faixa de
cores que pareça um pouco mais
natural e agradável simplesmente adicionando uma cor um pouco
mais brilhante nos verdes mais
claros e adicionando cor
um pouco mais escura
em os verdes mais escuros. Se você tem um
design anterior em que trabalhou, pegue isso agora ou escolha um
dos que você fez um vídeo anterior
e dê uma chance com as cores reais
em um design também. Especialmente à
procura de elementos pretos, brancos ou cinza. Tente misturar um pouco de algum outro HEW
com essas cores.
10. Combinação de cores: Vamos supor que eu tenha entrado no meu aplicativo da Web agora e, por algum motivo, é um painel de
despesas, mas talvez pareça um
pouco assim. Agora eu quero tentar fazer com que
isso pareça um pouco mais uniforme. Tente melhorar o
design aqui. Uma coisa que um artista
pode fazer ao pintar um retrato é talvez
apenas usar cores frias. A ideia aqui é todas as
cores da página. Acabei de adicionar uma
leve tonalidade azul a ele. Acabei de misturar um pouco de tonalidade
azul em cada uma
dessas cores. Ou, alternativamente,
eu poderia adicionar uma barraca quente a tudo. Bem, eu apenas misturo um pouco de laranja em tudo
e isso faz com que a coisa toda pareça uniforme é certamente não faz botões
ou qualquer coisa se destacar, mas faz com que as
cores pareçam eles talvez pertença
à mesma paleta. A razão pela qual isso poderia parecer particularmente bom
se estivéssemos pintando uma composição é que você
raramente tem luz
branca em uma área a menos que esteja fora
e direta a luz solar. Mas mesmo assim, em
momentos específicos do dia, você não tem apenas
luz branca como fonte. Essas montanhas nesta
foto não são realmente azuis. É só que o sol está
mais baixo no céu, está passando por
mais atmosfera. E sabemos que o azul vem de luzes de comprimento de onda
mais curtas e a luz de comprimento de onda mais curta
será deslocada mais. E, portanto,
haverá mais luz azul saltando ao redor. A área ao redor do sol parece mais vermelha simplesmente porque as ondas de luz vermelha são
mais longas e, portanto, elas se difundem menos e, em seguida, mais propensas a
vir em sua direção. Agora, se você estiver olhando
na outra direção, dependendo se você estava na luz solar direta ou não, as coisas que você estava
olhando pareceriam mais azuladas em geral ou
mais avermelhadas em geral. Os pintores podem falar sobre dar a uma pintura uma tonalidade mais quente sobre tudo, ou uma tonalidade mais fria no geral, porque ela vai unificar as coisas e ainda
fazê-las parecer naturais. Como dissemos, é perfeitamente
natural pintar um rosto azul porque
em algum momento você
acabou de ver um rosto apenas com iluminação
azul e é assim
que eles pareciam com as duas composições que
acabei de mostrar. Eu mencionei que isso
realmente não faz nada se destacar. Se tudo tivesse uma tonalidade azulada, isso não faz nossos botões
laranja se destacarem. Então, talvez essa não seja
uma técnica útil. Mas vamos dar uma olhada em outra
foto de algumas montanhas. Se olharmos para esta
cordilheira aqui, você pode notar que as montanhas
à direita parecem mais azuis e as da esquerda parecem um pouco mais
vermelhas e amarelas. Eles são a mesma cordilheira. As luzes apagadas das montanhas à direita estão simplesmente
passando por mais ar com mais luzes deslocadas
saltando por aí. Isso nos apresenta um
ponto interessante como designers. Esta imagem tem
uma grande variedade de cores. Tem todas as luzes
que talvez desejemos. E, no entanto, coisas com comprimento de onda
mais curto, como roxo, azul e ciano, simplesmente aparecem mais distantes. Cores como vermelho e laranja potencialmente
viajaram por menos ar e
, portanto, estão mais próximas de nós. E aqui está um diagrama prático com todas as cores em ordem de comprimento de
onda, com o comprimento de
onda mais curto à esquerda e o comprimento de
onda mais longo à direita. Para fazer algo
aparecer mais longe, podemos simplesmente
torná-lo mais roxo ou azul para que pareça mais perto, poderíamos torná-lo vermelho ou laranja. Referindo-se a essas cores como cores
frias são
cores quentes é um pouco rachado e todo o conceito de cores
quentes e frias
foi bastante desmascarado. Mas a ideia de que as cores de ondas mais
longas aparecem
mais próximas de você é muito real. Se olharmos para trás nosso design simples
que eu
estava criando novamente, provavelmente faz mais sentido
usar esses tons azuis
nas cores de fundo e usar esses tons vermelhos nas cores de
primeiro plano. Se eu mostrar esse mesmo design
com um fundo cinza, cinza é simplesmente luzes muito
impuras. Ele só aparecerá em
algum lugar no meio. Mas se eu torná-lo um pouco ciano, semelhante à imagem
dessas montanhas de antes. Talvez faça com que esse
fundo
pareça ter sido empurrado um pouco
para trás sem usar sombras ou
realces ou qualquer coisa
apenas de cor plana, posso adicionar uma sensação de
profundidade ao meu design. E, da mesma forma, com meus botões laranja
brilhante, porque eles já são laranja, eles se sentem um pouco
retirados da página. Só se sente mais perto de nós. E talvez esses botões
não precisem de
sombra. Desde que sejam uma cor clara de
ondas longas. Um erro comum que vejo pessoas cometendo que
posso demonstrar com esses três botões aqui é
este que diz ativo
na extrema esquerda. Como falamos antes, talvez
pareça
um pouco puxado
para fora em nossa direção por causa
da cor laranja. Com o segundo
botão, por outro lado, vale lembrar
que a cor é relativa às
cores ao seu redor. Assim como dissemos, que se você adicionasse uma
tonalidade azul a tudo, nosso cérebro meio que normalizaria
as cores um pouco por ter a laranja brilhante
dizendo a palavra inativa. Mas, em seguida, um fundo ligeiramente
laranja vai realmente empurrar o fundo
ligeiramente laranja mais para trás devido
ao contraste entre os textos laranja brilhante e
o fundo laranja claro, cérebro normaliza, supondo que haja apenas mais luz
laranja batendo. Este segundo botão, portanto, parece quase um
pouco recuado. Mas em outro nível, parece um pouco desorientador porque
as laranjas claras então
em cima do cinza. Este segundo botão
simplesmente não
parece parte de uma composição
natural. E o botão final,
o cinza, parece
um pouco como se
não estivesse aderindo ou saindo. Ele não tem profundidade nisso. Talvez meu
botão inativo seja cinza, mas tem um pouquinho
de laranja nesse cinza. Em nosso último vídeo,
adicionamos um pouco de azul
à sombra e um
pouco de amarelo
nos destaques de
um de nossos botões. Estas foram opções de cores bastante
convenientes porque obviamente o
azul é mais frio e , portanto, vai se
sentir um pouco mais longe e talvez adiciona ainda mais profundidade do que uma gota sombra ou um
destaque normalmente faria. Por essas razões,
provavelmente podemos diminuir um pouco a intensidade dessas sombras e desses
destaques e ainda assim ter esse sentido
3D para que as pessoas identifiquem
facilmente como um botão
e clique nele. Isso significa que podemos nos safar com uma sombra ligeiramente menos
intensa, mas podemos querer evitar usar a mesma intensidade de sombra em botões de cores diferentes. A cor do nosso botão
inativo aqui sugere que ele está mais longe um pouco recuado,
mesmo talvez, enquanto a sombra sugere que
é a mesma distância. E isso é um
pouco desorientador. Se alguma vez olharmos para uma paisagem
sob luz branca perfeita, as coisas mais
distantes de nós
parecerão as coisas mais
distantes de nós
parecerão ter mais azul nelas e as coisas
mais próximas de nós
parecerão ter mais vermelho nelas. Isso ocorre simplesmente porque a onda mais curta de
luz azul é deslocada mais. Podemos usar isso a
nosso favor ao criar uma interface do usuário
porque podemos dar algo um elemento
de profundidade e 3D sem usar nenhuma
sombra, se quisermos, podemos simplesmente usar cores para fazer com que as coisas pareçam distâncias
diferentes de nós. Assim, podemos fazer com que as coisas
pareçam sair
da página um pouco simplesmente
usando uma cor vermelha ou laranja. E podemos fazer
algo parecer mais como um fundo simplesmente
usando um azul ou roxo.
11. Saturação: Até agora, falamos sobre três
atributos diferentes de cor, a tonalidade, o nome, pode ter azul,
verde, amarelo, ciano, magenta, ou ler o valor
quanto branco ou preto é
misturado com isso cor. E falamos
sobre o brilho que é perceptivo. Amarelo, ciano e magenta são
mais brilhantes que
vermelho, azul e verde. Há outros atributos que você provavelmente
notou seus programas gráficos
quando está escolhendo uma cor que é saturação. Se você olhar para a imagem agora, estou lentamente dessaturando essas
cores com a mesma tonalidade, que o mesmo valor. Mas estou diminuindo a saturação. Se escolhermos uma única tonalidade, vamos escolher um vermelho e
olharmos para ele com um gráfico com valor versus saturação
nos eixos x e y, podemos ver
algo assim. Podemos pensar que a palavra saturação tem sido um
pouco como a palavra pureza. Essas cinco cores aqui
têm exatamente a mesma tonalidade. Eles têm exatamente o
mesmo valor que
na mesma quantidade de preto
e branco neles, mas ainda são cores bem
diferentes. E isso é por causa de
quão puros os isqueiros, o vermelho no topo
do meio é uma forma de luz
muito, muito pura. A maioria dos comprimentos de onda
aqui é um comprimento semelhante que mostraria se rand com poucas variações
no comprimento de onda, enquanto o cinza
na parte inferior tem quase uma mistura igual de todos os comprimentos de onda diferentes que são percebíveis
pelo seu olho. Seu olho o interpreta como cinza, o que você
também pode pensar em cinza, pois seu olho não consegue
descobrir de que cor é. Pelo que eu disse
até agora neste curso, você pode ser perdoado
por pensar que eu quero que você evite cinzas. Eu não quero que você
use muitos cinzas. Provavelmente muito mais do que
você está usando atualmente. Na verdade, muita cor
muito saturada é um
trabalho duro para o seu olho. E podemos usar a saturação
como forma de contraste. Vamos, por um momento, apenas olhar algumas pinturas diferentes
do mundo da arte. Novamente, esta pintura aqui tem cores
muito, muito dessaturadas. E, no entanto, nenhuma dessas cores
está completamente dessaturada. Você pode ver claramente
os azuis e verdes e vermelhos
nesta paleta de cores
sem cores saturadas aqui, estes realmente parecem
meio coloridos, mas quando olhamos para
o palete por conta própria, parece quase
apenas uma carga de cinzas. No entanto, essa
paleta de cores
obviamente seria de uso limitado para nós como designer de interface de usuário porque nada se destaca. Não há nada ousado que diga Clique em mim ou olhe para isso. Isso não nos ajuda a construir uma hierarquia visual
em nossas composições. Talvez uma paleta de cores mais
parecida com esta seja mais útil em que
todas as cores estão realmente saturadas. Tudo é muito dominante. E sabemos que há
essa laranja brilhante que provavelmente
gostaríamos de clicar ou olhar. E tudo está competindo
pela nossa atenção. problema aqui é que, quando
tudo parece saturado, eles meio que se
lavam um pouco simplesmente
ao lado de uma cor saturada, uma cor parece
menos saturada. E, claro, nem tudo
pode chamar nossa atenção. Só queremos que certos
elementos se destaquem. Um grande problema que vejo designers
iniciantes fazerem é o mesmo problema que fizemos em todas as aulas de arte antigas,
onde apenas
pensamos nas diferenças de matiz
entre as cores. Realmente, nunca usaríamos
uma paleta de cores para projetar uma interface de usuário onde todas as cores
estão realmente saturadas. Se alguma coisa, para o design da
interface do usuário, essa paleta de cores é realmente
pior do que a última. Provavelmente gostaríamos de
usar uma paleta de cores mais semelhante a esta
desta pintura, onde a maioria das
cores está bastante dessaturada com o vermelho brilhante
ocasional nisso. Realisticamente, mesmo essa pintura não
seria ótima para a nossa interface do usuário. Queremos que esse vermelho ficasse ainda mais saturado, mas não foi fácil
tentar encontrar uma pintura com uma paleta de cores
semelhante à que poderíamos usar na interface do usuário. Se você encontrar um seletor de cores on-line ou em um aplicativo
gráfico, ou se você pesquisar na Internet
por boas paletas de cores, você terá algo
que se parece um
pouco assim na tela. Cinco cores incrivelmente
saturadas. Os tons podem
contrastar muito bem. Eles podem ter
sido todos configurados dessa forma, mas provavelmente estão
todos um pouco
saturados demais para serem úteis
para você como designer de interface do usuário. Quando comecei a projetar,
como muitos designers, eu pegava uma
paleta de cores como essa e aplicava essas cores como elas
são aos meus designs. E eles naturalmente se
pareceriam com aquela
pintura de Matisse de antes. Tudo está
muito saturado e , portanto, eles estão se
lavando e nada se destaca. E pode ser um pouco
difícil
olhar e identificar o que
tudo está na tela. Digamos que encontrei
essa paleta de cores online com essas cinco cores. Agora isso pode ser bom
para alguns propósitos. Não será
útil para o design da minha interface do usuário. Vou precisar dessaturar pelo menos
metade das cores. Agora isso não parece ótimo, essas cinco cores
próximas umas das outras, mas elas
ficarão muito melhores quando eu as aplicar a um design. A saturação não é
o mesmo que o valor. Não é como é claro
ou escuro,
é o quão puro é, é o
quão cinza ou colorido é. Quando escolhemos cores para
nossos projetos de interface de usuário, pode ser tentador escolher cores
muito saturadas. Estes não apenas se
lavam, mas não são
particularmente práticos para construir uma hierarquia visual. As paletas de cores ideais que escolheríamos para o
design terão muito mais
cores dessaturadas do que esperamos pela primeira vez. E a única maneira de
provar isso é
colocando as cores em um design
e vendo como elas se parecem. Vamos fazer isso em seguida.
12. Exemplos de saturação: Aqui está um painel simples
que eu criei. Agora, eu diria que algumas
das cores aqui estão um pouco saturadas demais, não tão ruins quanto algumas
coisas que eu criei e definitivamente não há algo que
eu já vi antes. Mas há algumas
cores que simplesmente não precisam estar tão saturadas. Antes de entrarmos nisso, posso salientar que cada uma
das seções deste design, tenho um contorno preto grosso que é bastante avassalador, distrativo, provavelmente
um pouco demais contraste em lugares
onde não precisamos dele. Eu tenho, claro, faça isso
porque não tive acesso a muitas cores
dessaturadas. Se eu tivesse uma
cor dessaturada no fundo, não
precisaria mais das linhas pretas.
Algo assim. Grey instantaneamente
parece muito melhor. Posso remover essas
linhas pretas e ainda
separa claramente as diferentes
áreas da minha página. Agora, em vez de usar
um cinza completo, posso usar um azul muito saturado. Sabemos que isso vai fazer com que
se sinta um pouco mais longe. E isso
fará com que todo o nosso design pareça um pouco menos cinza, o que nem sempre é
super bom de se ter. Em retrospectiva, eu poderia não ter dessaturado essa
cor de fundo o suficiente, mas você pode ver como
isso é provavelmente um pouco melhor do que aquele
cinza que tínhamos antes. Vamos ver se podemos dessaturar mais
algumas coisas porque
agora eu tenho algumas coisas estranhas de pastilha aqui que provavelmente se parecem
mais com botões. Eles estão um pouco na sua cara. Aqui eu tenho alguns
números que são
bonitos, praticamente apenas afirma que queremos
manter na tela. Portanto, o usuário não esquece quantos e-mails ele tem no
Open e coisas assim. Temos vários gráficos e outros pedaços de informação
que estão em cores
muito, muito saturadas agora, mas eles
não precisam estar. Você pode ver todas
essas áreas em nossos ícones
menos saturados ou esses, pastilhas e
diferentes informações na página, podemos simplesmente dessaturar bastante
essas coisas. Agora, atualmente, todo o meu texto tem o mesmo valor e a
mesma saturação. Eu poderia dessaturar e diminuir o valor um pouco
de parte desse texto. E isso ajudará a criar essa hierarquia um
pouco na página também. Talvez um pouco dessa cor
roxa de marca que eu esteja
usando para títulos, talvez esteja um pouco
saturado demais. Vamos diminuir isso. Parece quase uma cor preta agora,
mas é apenas uma versão
muito, muito dessaturada daquele roxo original. Você pode ver que esse design
ainda parece colorido. Ainda tem uma certa
quantidade de profundidade. As coisas se sentem próximas a nós
ou longe de nós. Quase parece 3D, mas tudo está muito menos
saturado agora é mais fácil os olhos e é
mais fácil para nós
fazer certas coisas
se destacarem mais. Isso significa que
se realmente quisermos chamar
a atenção
para algo e dizer que esta é a primeira coisa que
achamos que você deve olhar. Podemos deixar essa cor
realmente saturada, como nossos botões de call to
action ou esse amarelo
brilhante que
acabei de colocar aqui. E talvez eu tenha ido
longe demais com esse amarelo também. Mas isso explica meu ponto de que agora podemos fazer isso
realmente se destacar. Portanto, é a primeira coisa que as pessoas olham se é isso que
queremos, só temos essa
opção disponível para nós dessaturando
todo o resto. Agora podemos usar um pouco
de cor extra para adicionar alguma profundidade adicional para usar ou chamar mais atenção
para certas coisas, ou apenas para torná-lo
um pouco mais elegante, talvez eu queira deixar
óbvio que algo é 3D. Agora posso adicionar um pouco de
cor em uma sombra. Eu poderia separar isso tendo um pouco de cor
em segundo plano. Eu poderia fazer com
que esses gráficos tenham cores
gradientes interessantes neles. Essas são opções
que agora tenho disponíveis porque
tenho um pouco de cor sobressalente que
posso usar em todo o site, que eu não poderia ter feito
nos designs originais
porque todas as cores que estamos todos prontos para saturado já
parecia em março. Se olharmos para as paletas
de cores
reais de algumas das cores que
adicionei e usei. Como eu mudei esse design, você pode ver que eles estão
realmente dessaturados. Na verdade, se olharmos
para eles fora
do contexto do design, vamos olhar para eles
por conta própria, do lado aqui, eles realmente parecem
muito dessaturados. Parece que eles
não vão funcionar
bem no design. E é por isso que
sempre queremos usar nossas cores no contexto de um design para ver
como elas se parecem. Talvez nunca aprovemos as paletas de cores sobre os direitos ou como parte de nossa paleta de cores. Mas provavelmente aprovaríamos
o design à esquerda, que parece muito melhor
quando os vemos no contexto. Como exercício. Agora eu gostaria que você pegasse
algo que você já projetou ou vá e encontre um design existente
on-line em algum lugar. E tente saturar
algumas das cores, mas tente evitar fazer
qualquer coisa completamente cinza. Veja se você consegue que o
design ainda fique bem. Embora haja apenas uma ou
duas cores muito saturadas. E muitas, muitas cores dessaturadas,
quase cinza.
13. Contraste: Vamos supor que temos uma tela de integração
para nosso aplicativo móvel, talvez algo
parecido com isso. A primeira coisa que você pode
pensar é, na verdade, esses textos são um pouco difíceis de ler. E, obviamente, uma
das coisas que dificultaria a leitura dos
textos é se não
houver muitos
contrastes entre a cor do texto e
a cor de fundo. Poderíamos, é claro, remover essa cor de fundo e , em seguida,
haverá mais contraste. O plano de fundo é branco agora para que o texto se destaque mais. Podemos lê-lo mais fácil. Os textos do parágrafo,
poderíamos apenas deixar isso mais escuro. E depois há mais
contraste aqui também. Mas não criamos apenas
contraste com luzes e escuros. Podemos criar um contraste de matiz. Agora azul e amarelo são cores
contrastantes. Então eu poderia ter um fundo
amarelo com imposto
azul ou um
fundo azul com texto amarelo. E isso fará com que ele
se destaque ainda mais. Isso significa que posso ter uma paleta de cores um pouco mais
interessante enquanto ainda torna
meu texto fácil ler e tudo
bem fácil de perceber e para nós poderemos identificar a diferença entre
diferentes áreas. Agora, é claro, temos
um problema em que todas as cores estão
excessivamente saturadas, então elas vão
se lavar um pouco e
vai ser trabalho duro
para nossos olhos com toda essa
cor saturada que vem até nós. Felizmente, temos outro
tipo de contraste de cor, que é o contraste de saturação. Então eu poderia saturar o
fundo e depois ter um texto
muito
saturado e ficaria
algo assim. Agora, se eu apenas mostrar os fundos
saturados e dessaturados aqui, você pode ver que um deles
é muito mais fácil para os olhos, e eu diria que provavelmente é
um pouco mais fácil de ler também. Esses três atributos diferentes que são cor têm valor, matiz e saturação podem
ser usados para criar contraste. Mas por que o contraste é
tão importante para nós? Sabemos que isso vai
tornar nosso segundo ano
visualmente interessante de se olhar. Sabemos que vai facilitar
a percepção de onde o texto está
e coisas assim. Mas, na verdade, é valioso para nós por uma razão totalmente
diferente. Este é o Union Jack,
a bandeira britânica. E se você olhar para este lugar
no meio por 30 segundos, vou deixá-lo na
tela enquanto falo. Apenas mantenha os olhos
naquele ponto preto. Em algum momento você
provavelmente já fez esse truque visual antes, mas vamos fazê-lo de qualquer maneira. Mantenha os olhos
nas manchas pretas. E então boom, o que
acabou de acontecer? Bem, depois que eu removi a
bandeira da tela, você provavelmente viu essa
bandeira para 2.5th talvez porque todos os
cones em seus olhos se acostumaram tanto a olhar para
as cores que estavam lá. Eles estavam cansados de olhar para
essas cores e eram mais suscetíveis
a essas cores. Eles estavam cansados de olhar a luz amarela para que, quando
eles obtiveram todas as luzes, que eles estão adivinhando
quando vêem branco, eles estão apenas vendo o azul. Lembre-se que o branco tem todas
as luzes coloridas nele. E a parte que estava
olhando para o amarelo agora está cansada. Portanto, é mais provável que
seu olho veja azul. Pense nisso como se você
levasse seu corpo para a academia e fizesse uma carga de exercícios que envolvia usar seus braços. Seus braços estariam cansados. Provavelmente faz
mais sentido fazer um exercício de corrida em seguida
será menos doloroso, mas você também
seria melhor em fazê-lo. Da mesma forma, se seus olhos estão
apenas
olhando para muito amarelo, faz mais sentido
olhar para um pouco de azul em seguida. Não só vai
ser mais confortável, você vai ser
melhor em percebê-lo. Se eu dividir o design
na tela agora, metade do seu olho está
fazendo exercícios nas pernas e a outra metade está
fazendo exercícios de braço. E como seu olho não
fica particularmente
parado, ele salta um pouco. Seus diferentes pedaços de olho estão alternando entre os dois,
portanto, não ficando muito
estressado de um ou outro. As
cores contrastantes exatas dos três
à esquerda são as três cores
atualmente à direita. Se quiséssemos tornar
a bandeira britânica incrivelmente
confortável de se olhar, poderíamos
fazê-lo assim. Agora eu já vi pessoas realmente
desenharem isso assim antes. Ou, alternativamente,
para ter certeza de que estou perturbando todas as pessoas
no Reino Unido igualmente. Também poderíamos fazer com
que pareça assim. Uma coisa que você
provavelmente notará com esses
dois novos designs de
bandeira que
criei é
estabelecida, na verdade, olhar um milhão de quilômetros
de distância do que existe. Na verdade, essa bandeira
aqui
parece que as partes vermelhas estão
no sol um pouco longas demais. Criaremos mais
interesses visuais por não termos
as cores exatamente
contrastando umas com as outras. Porque, principalmente porque a
maioria dos outros designers tem em algum momento da história
simplesmente não faz exatamente isso. É meio preguiçoso. Mas, claro,
no mundo das bandeiras, provavelmente a razão pela qual
esta não é a bandeira é apenas todas as cores que queriam
ter uma quantidade igual
de importância. E, portanto, a cor
no meio deve estar
muito mais saturada. Sabemos que as pessoas
naturalmente gostam de olhar para cores
contrastantes porque sempre tiram fotos disso. Todos na praia
atualmente terão a
câmera saindo dessa cena exata. Já sabemos
por causa da forma como
a luz refrata
que está nos dando as luzes de ondas curtas ao redor dos lados e as luzes de
ondas longas no meio
da imagem aqui. E está dividindo perfeitamente
as cores contrastantes para nós. Isso faz com que seja muito
bom para o nosso olho. Isso o torna visualmente
interessante e o
torna objetivamente bonito. Podemos identificar facilmente quais cores contrastam
porque elas devem estar diretamente opostas umas às
outras em uma roda de cores. Como já mencionei, essas rodas de cores
são quase sempre. Errado. Se você for ao Google Images e
colocá-lo na roda de cores, você terá um que se parece um pouco o da tela, o que está completamente incorreto. Podemos ver aqui que
o amarelo que colocamos em nossas impressoras e
as luzes azuis que temos em nossa tela que sabemos que nossas cores
contrastantes exatas não
são opostas umas às
outras nesta roda de cores. Em vez disso, o amarelo é oposto a
essa cor marrom. Se você quiser
verificar com certeza se duas cores se
contrastam perfeitamente, você pode sobrepor e
você deve sempre ficar cinza, porque sabemos que o
cinza é quando há uma mistura perfeita de todas as cores
diferentes. Se eu sobrepor o
amarelo e o azul, recebo oito, o cinza perfeito. Não há cor
neste cinza , completamente contrastante. Se eu sobrepor as duas cores que estão opostas uma à outra
nesta roda de cores, a amarela e a roxa, recebo esse tipo de cor. Posso fazer o mesmo
efeito se criar um gradiente entre duas cores. Se eles se
contrastarem exatamente, a cor no meio
do gradiente
sempre será cinza. Por que existem tantas rodas de cores
incorretas no mundo? Bem, uma das razões é
porque algumas pessoas têm uma ideia incorreta de quais
são as cores primárias. Lembre-se, algumas pessoas não
aprenderam nada sobre cor desde os cinco
anos de idade e acham que vermelho, amarelo e azul são as cores
primárias da pintura. Ao forçar essas três cores a serem equidistantes em torno de um círculo, elas
criam incorretamente uma roda de cores. É claro que sabemos que as cores
primárias são ciano, magenta e amarelo
porque
todos já vimos o interior
de uma impressora antes. Se você fizer ciano, magenta e amarelo equidistantes
ao redor da roda de cores, você acaba com isso. E você notará que,
claro, vermelho, azul e verde também são equidistantes
em torno dessa roda de cores. E, claro, nossa roda de cores tem essas duas cores
contrastantes, amarelo e azul,
opostas umas das outras. O contraste torna
mais fácil para nós identificar coisas na página. Isso facilita que o texto ou os ícones se destaquem
do plano de fundo. Isso deixa claro que uma seção diferente
da página é diferente
da última. E isso só torna visualmente mais interessante
olhar para o design. Mas também o torna objetivamente mais bonito
porque permite que os cones e hastes
e nossos olhos sejam estimulados e depois
descansem enquanto olham
ao redor do design, podemos criar contraste entre duas cores por ter
uma muito saturada e outra muito dessaturada
por
uma com um valor muito alto como
ter muito branco nele, e uma sendo um valor
muito menor, tendo muito preto nele. E podemos criar contraste
usando diferentes matizes. Podemos encontrar tons que
contrastam porque eles estão opostos um ao outro
em uma roda de cores, muitos
softwares de design terão uma roda de cores lá em
algum lugar no seletor de cores. Mas tenha muito cuidado com essas rodas de cores
porque muitas
delas não são
particularmente precisas. Você deve ter o amarelo e azul diretamente
opostos um ao outro. Esse é o tipo de amarelo
ikea e o IK Blue deve ser opostos
diretos.
14. Exemplos de contraste: Aqui está um designer criado
em um vídeo anterior. E eu sinto que,
ao rolar a página, é um pouco monótono. Todo o plano de fundo é branco, então talvez devêssemos apenas adicionar um plano de fundo
nesta seção de cabeçalho. Vamos torná-lo roxo. Eu instantaneamente parece muito melhor. Todo esse contraste entre a seção de cabeçalho e
as seções mais baixas agora nos diz imediatamente que esse bit superior é
algo diferente. Mas podemos querer
alternar algumas
das cores aqui também. Veja agora eu tenho um grande botão laranja
dizendo iniciar um curso. Mas, pessoalmente, sinto que essa cor amarela está
pulando para mim primeiro. Isso está chamando
mais atenção. Bem, vamos ver essas
três cores separadamente, o roxo, o laranja
e o amarelo. E também vamos
saturá-los completamente para que
o que estamos vendo seja a tonalidade real e não
estamos olhando para vários
níveis diferentes de saturação. Agora, podemos ver onde todos
eles estão em uma roda de cores. Então é aqui que essas
três cores estão. Algumas coisas para saber. Obviamente, há mais
contraste entre o amarelo e o roxo do que há entre o laranja
e o roxo. Então, a tonalidade amarela
naturalmente se destacará mais do que a laranja. Mas também todas as nossas cores
estão um pouco mais de um lado. Se alguma vez quiséssemos adicionar uma
quarta cor à mistura, gostaríamos de escolher
algo por aqui. Se tivéssemos uma composição
composta inteiramente de roxo, amarelo e laranja, esse verde
azulado será o
que realmente se destaca. Agora, sim, esse verde se destaca
muito bem nesta página, mas há algo
sobre esse amarelo que está
gritando comigo ainda. Talvez seja porque se eu olhar para essas cores neste
gráfico de brilho que temos aqui,
podemos ver que, na verdade,
o maior contraste no brilho é entre o
amarelo e o roxo. E simplesmente não podemos tornar nenhuma
das cores tão brilhantes quanto
podemos fazer um amarelo. Talvez apenas façamos
os botões amarelos. Agora, esses botões
realmente se destacam. Agora, outra opção
seria manter os botões laranja, mas simplesmente não
tem o amarelo na ilustração ou em qualquer
outro lugar da página como este. Agora, em vez disso, posso
usar o amarelo,
mas, em vez disso,
usarei o amarelo como uma versão muito dessaturada
como plano de fundo aqui. No geral, estou muito feliz com esse design agora,
acabei de fazer algumas alterações para fazer as cores contrastarem
melhor e garantir que esses botões se
destacem na parte superior. E aqui está, claro, a comparação
com o original. Não há muito para recapitular aqui
porque isso foi mais uma demonstração do que
estávamos falando. Mas podemos usar o
contraste para nos ajudar a fazer as coisas se destacarem mais e
fazer com que as coisas pareçam separadas. E podemos usar o contraste, não apenas com a tonalidade, mas também com o brilho, o valor e,
claro, a saturação.
15. Resumo: Acabamos de explorar os
principais atributos de cor, matiz, saturação e
valor ou brilho. Valor e brilho
afetam a mesma coisa. Quanto preto ou
quanto branco está na cor, exceto
o
brilho é perceptivo, enquanto o valor é uniforme. Seu software gráfico e CSS não conseguirão
lidar com o brilho. Você pode usar
software de design ou CSS para definir
saturação ou valor de matiz, mas não brilho,
porque isso é perceptivo e a faixa de brilho é muito diferente para
diferentes matizes. Uma tonalidade azul só tem
baixo brilho. Bem, uma tonalidade amarela só tem
acesso a alto brilho. Podemos usar saturação de matiz e valor ou brilho
para criar contraste. Em nosso design, o valor
criará o maior
contraste e dará a
maioria das definições simplesmente
porque temos muito mais hastes em nosso
olho do que temos cones. Obter as luzes
e escurecer diretamente em nosso design é, de longe, o mais importante do que obter
matiz ou saturação, certo? Podemos projetar primeiro em escala de
preto e branco e cinza primeiro, se isso ajudar a garantir que ela fique boa. Como já sabemos
na última seção, cada um desses
atributos de uma cor, sua tonalidade, saturação e seu valor serão afetados
pelas cores ao seu redor. E ao lado disso, uma cor
saturada. Faremos com que a cor ao lado
pareça menos saturada. Cor vermelha. Faremos com que a cor
ao lado dela pareça mais azul. E uma cor escura. Faremos com que a cor
ao lado dela pareça mais clara. Agora sabemos como a luz funciona e sabemos classificar
e falar sobre cores. E já sabemos intuitivamente como o contexto
da cor o muda. Finalmente chegou a hora de
criar nossa paleta de cores.
Rob Sutcliffe, UI Designer / Developer
