Transcrições
1. Introdução: Se olharmos para essas cores
na tela agora, você pode ser perdoado
por pensar que está
olhando para gradientes. No entanto, se eu
separar o metal, você perceberá que
eles são de cores planas. Não há gradientes aqui. Em breve falará
sobre muita teoria das cores, mas é tudo muito
subjetivo porque cores dependem do contexto. Uma cor parece diferente dependendo da
cor que está ao lado dela. Anos se Albert
fosse instrutor na Escola
de Arte e Design Bauhaus, e ele argumentou que
não há sentido aprender a teoria das
cores. É completamente desnecessário
porque uma cor depende do contexto em
que a cor é vista. Uma cor pode parecer completamente diferente
por causa de onde ela está. Essas cores que acabamos de olhar
pareciam gradientes porque a cor parecia diferente dependendo do
que estava ao lado. Em um módulo posterior, falaremos sobre como a cor
funciona e como seu olho funciona e por que isso acontece. Anos, se acreditamos, não
precisamos falar sobre isso. Não precisamos falar
sobre teoria das cores. Mas, pessoalmente, acredito que nos estúdios de design modernos, você precisa entender
por que você fez escolhas. Você precisa ser capaz de
justificar suas escolhas de cores. Ninguém vai
confiar que você é melhor em olhar para
as cores do que elas. Mesmo que você
conclua os exercícios neste módulo, será melhor
olhar para as cores do que elas. E todos os exercícios
neste módulo são retirados diretamente de anos de
interações com livros de Alberts de cores.
2. Uma cor: Seu primeiro exercício
que foi retirado das interações de cores é fazer com que uma cor apareça como duas cores
diferentes. E podemos fazer isso alterando o contexto de onde
essa cor está. Os quadrados internos aqui são
exatamente da mesma cor e posso ajustar as duas cores das caixas
externas para tentar fazê-las
parecer diferentes. Você pode fazer isso fazendo ajustes
sutis em
um programa gráfico. Mas os alunos de Joseph Albo fizeram isso
originalmente
com papel colorido. Eles tinham cortado um jornal. Se você quer ser
muito velho, como pode ser divertido. Eu criei esses quadrados verdes usando um programa
gráfico simplesmente desenhando duas caixas menores
em caixas maiores e posicionando as
caixas menores dentro das grandes,
as duas caixas menores devem ser a mesma cor e as duas saídas de caixas podem ser da
cor que você quiser. E seu desafio é
fazer com que pareça que as duas caixas menores
são de cores diferentes. Neste exemplo, acredito
que a caixa à
esquerda parece um pouco
mais escura do que a da direita. Quando se eu os juntar, você pode ver que eles são exatamente
o mesmo verde
no meio. Deixe-me mostrar-lhe mais alguns dos meus exemplos antes de você
ir e criar o seu próprio. Aqui temos uma cor azulada. Eu coloquei um
azul muito escuro por trás dele de
um lado e um cerceta muito
mais leve do outro. Acredito que o azul escuro faz com que o quadrado interno
pareça um pouco mais claro, enquanto o azul claro faz com que o azul pareça um pouco mais escuro. E, claro, novamente, eles são da mesma cor. Neste exemplo, temos
um rosa brilhante de
um lado e um rosa
muito dessaturado, mais escuro e avermelhado do outro lado. Se você não entender
a palavra dessaturada, veremos isso mais tarde, mas essencialmente a cor é menos óbvia no
lado direito. Novamente, ambos afetam
a cor interna de maneiras diferentes, apesar de
ser da mesma cor. E finalmente, essa cor acinzentada realmente tem um
pouco de amarelo,
mas você não percebe na esquerda porque o
fundo é amarelo, enquanto que no lado direito você pode ver que amarelo no cinza. E quando eu os juntar, você notará novamente
que eles são da mesma cor. Seu primeiro desafio
é tentar fazer com que uma cor pareça
duas cores diferentes. Você poderia usar o
mesmo layout que eu, onde você simplesmente
coloca um quadrado dentro outro quadrado e
experimentá-lo com diferentes fundos
coloridos. Ou você poderia colocá-lo em
qualquer contexto que você quisesse. O desafio é
aprender intuitivamente quais atributos
na cor. Vou afetar
a cor dentro dela e ao lado dela de
maneiras diferentes. Portanto, ele garante que você tente essa cor em todos os tipos de contextos
diferentes para
ver o que você pode fazer para ajustar sua percepção
dessa cor central. Quanto mais diferente você pode fazer essa cor parecer melhor. Então divirta-se com isso.
3. Duas cores: O segundo exercício com o qual
vamos brincar para melhorar nossa compreensão intuitiva
e percepção da cor é o oposto do que fizemos
no último experimento. Desta vez, vamos tentar
fazer duas cores diferentes
aparecerem as mesmas. Agora, eu fiz isso usando exatamente
o mesmo layout que usamos
para o último experimento. Só que desta vez as duas
cores centrais são muito diferentes. Esses dois
quadrados menores aparecem
da mesma cor enquanto estão no contexto
desses quadrados maiores. Mas se eu movê-los para fora
do caminho e me juntar a eles novamente, você pode ver que,
na verdade, desta vez, essas são cores drasticamente
diferentes. E olhando para eles
com um fundo branco, repente parece estranho que
eles pareciam iguais. Aqui está apenas um
segundo exemplo em que as duas caixas
internas parecem da mesma cor. Mas uma vez que movemos
tudo para fora do caminho, podemos ver que
o da esquerda é realmente um pouco mais laranja e o da
direita é um pouco mais azul. Mas não percebemos
essas qualidades
nessas cores
porque o contexto, as cores circundantes
eram laranja e azul. Tente criar duas cores
diferentes em dois contextos diferentes que
se parecem com a mesma cor quando
você olha para elas em geral, você pode brincar com
outras coisas,
bem como com os arredores aqui. Você poderia, por exemplo, torná-los diferentes formas
ou tamanhos diferentes. Talvez uma cor pareça um pouco menos escura só
porque é maior. Veja se você pode tentar algumas
coisas que você não tentou com o último experimento e tente fazer duas
cores diferentes aparecerem as mesmas.
4. Transpose de cores: Habilidade muito complicada para músicos é transpor música de
uma chave para outra. Você será agora um
músico de cor. Como tal, para ajudar a
afinar seu olho para identificar as
diferenças sutis de cor, podemos tentar transpor
algumas cores. Aqui temos quatro tons
de vermelho
sutilmente diferentes para este próximo exercício, pode ajudar a
pensar nisso como um único pedaço de papel dobrado com diferentes
qualidades e níveis de luz atingindo as
quatro áreas diferentes. Agora, imagine que há
um quadrado interno neste pedaço de papel. Talvez seja essa cor azul-azulada. Nosso desafio é
tentar transpor as qualidades das cores vermelhas
para esta nova cor azul. O tom exato da cor azul e o canto superior esquerdo não
importa. Vamos tentar copiar as mudanças
de qualidade à medida que passamos da
esquerda para o quadrado direito. E então quais são as
mudanças na qualidade entre o quadrado vermelho superior esquerdo e
a Praça Vermelha inferior esquerda. Tente ajustar esse quadrado
azul inferior esquerdo para ter essas
mesmas mudanças de qualidade. Essencialmente, se fosse um pedaço de papel dobrado
e esse fundo esquerdo ao quadrado tivesse uma quantidade
diferente ou qualidades
diferentes de
luz brilhando sobre ele. Como essa cor azul ficaria? Tente fazer cada uma
dessas alterações em seu programa
gráfico sem nem fazer
nenhuma amostragem de cores ou algo parecido. Você só vai ajustar
a cor e ver se você pode criar algo
com os mesmos valores que as cores externas. E apenas para referência,
criei um segundo exemplo. Então, há quatro
retângulos de roxo. Eu os escolhi quase
completamente aleatoriamente, qualidades
ligeiramente diferentes de roxo. E então vou colocar
esses quatro retângulos de amarelo e tentar
transpor essas cores. Estamos analisando
as mudanças de qualidade entre cada quadrado de roxo e tentando copiar as mudanças de qualidade
nos quadrados amarelos. Exatamente o mesmo que
se estivéssemos tentando mover uma peça de música
da chave de C
para a chave de a. Para este exercício,
assim como você me viu fazer, você vai criar quatro retângulos de diferentes
tons de uma única cor. Basta escolher verde talvez e faça quatro tons
diferentes de verde e coloque-os um ao
lado do outro. E, em seguida, adicione quatro caixas menores e escolha uma cor
para o canto superior esquerdo, torná-lo um tom de vermelho, talvez, e tente transpor as mudanças
de qualidade de cor das outras quatro caixas. E isso ajudará a treinar
seus olhos para identificar essas mudanças de qualidade
na cor e também
ajustá-las.
5. Transparência: Para este próximo exercício, estaremos imaginando
que essas caixas na tela são semitransparentes. Você precisará criar uma caixa
com uma cor e, em seguida, duas caixas
menores de outra cor e posicioná-las de
forma semelhante a esta. Agora imagine
que o da esquerda está na frente do roxo
no meio, e na caixa à
direita está atrás dele. E os três
são um pouco transparentes sem ajustar qualquer opacidade em seu programa gráfico
ou qualquer coisa assim. Tente criar duas novas
cores para simular
um elemento de transparência
entre essas caixas. À esquerda, criarei uma nova cor que é um pouco
mais azul que roxa. E à direita,
criarei uma nova cor, que é um pouco mais
roxa que azul. À medida que sua intuição para a percepção de
cores melhora, você poderá
criar cores que funcionam aqui que não parecem completamente
naturais por enquanto, apenas tente criar qual será
a cor natural
entre essas duas cores. E novamente, como segundo exemplo, aqui está uma com uma
caixa amarela no meio e duas caixas verdes de cada lado. A caixa verde à esquerda, vamos imaginar
que está na frente
da caixa amarela e da caixa
verde à direita. Imaginaremos que esteja
por trás da caixa amarela. E então criarei duas novas cores para
preencher as lacunas e fazer com que isso pareça uma transparência natural
nessas caixas. É interessante
então olhar essas duas novas cores
fora de contexto. E como exemplo final, vou fazer um com
laranja e verde. Vamos criar novamente
dois novos retângulos mostrando
as transparências
e, em seguida, veja como essas novas cores
se parecem depois. Seu desafio para este
vídeo é criar uma caixa colorida grande e
criar duas caixas
coloridas menores. E imagine que eles
têm um elemento de transparência e
se sobreponham. Quero que você crie
a nova cor que será feita entre
essas caixas coloridas.
6. Faixa de transparência: Este exercício se baseará no exercício do último vídeo, mas desta vez
teremos três níveis de transparência. Imagine que essas três caixas estão na frente dessa caixa bege, mas elas têm diferentes
níveis de transparência. E há uma diferença
incremental. Por mais que essa diferença opacidade entre essas
cores seja que deve parecer linear entre as três
para tentar recriar a ilusão que
criei na
tela aqui. Então, começaremos novamente
com duas cores. Eu escolhi vermelho e bege aqui. E você vai notar que eu escolhi
um fundo da marinha porque o bege não correu muito
bem em um fundo branco. Mas então vamos criar essas três novas cores à
medida que elas se sobrepõem. E deve parecer uma progressão incremental
entre os três. Talvez cada um se sinta um pouco
menos transparente que o último. Assim como um segundo exemplo, eu sobreponho algumas
caixas azuis sobre uma caixa vermelha. Desta vez, novamente, vou
tentar incrementar
a sensação da transparência adicionando cores
completamente novas por cima. Tente fazer isso
sem brincar com a opacidade em seu programa
gráfico ou qualquer coisa assim, tente criar literalmente
a nova cor do zero. Novamente, pode ser realmente
interessante ver como essas três cores
ficam fora
do contexto das outras
cores ao seu redor e ver como há um
passo incremental claro de vermelho para azul. Muito semelhante
ao último exercício. Mas desta vez eu
quero que você sobreponha três caixas e crie três misturas diferentes são
três níveis diferentes de transparência
entre essas cores. Tente fazer com que essas três
novas cores
pareçam incrementos lineares
ou para colocá-las de outra forma. O meio se sente a meio caminho entre o
primeiro e o último.
7. Composição de cores: Como desafio final, quero que joguemos
com que proporção de cores parece naturalmente
boa juntos, vamos criar
um design muito semelhante ao famoso Paul
Smith InDesign, que é tão bem sucedido, Ele colocou em carros
, skates e cachecóis e perfumes
e todo tipo de coisas. Quero que você experimente
uma paleta
de cores de cinco cores
on-line em algum lugar. Você pode copiar as cores dessa imagem exata se realmente
quiser. Ou você pode usar um site como uma cor de droga para escolher apenas
uma seleção de cores. Em seguida, traga-os
para o seu
programa gráfico e tente criar uma composição bem equilibrada
onde não há branco, tudo é coberto
por essas cinco cores. Então, como sempre, tenho dois
exemplos que criei. E aqui está meu primeiro projeto de Paul
Smith que eu fiz. Então você notará que o verde
limão era
realmente, muito avassalador
na minha paleta de cores. Eu fiz com que tivesse uma área
muito, muito pequena na composição
final. Tudo o que estou preocupado aqui
é que parece bom ou não? A cor marrom, eu
realmente não me senti esmagador. Portanto, a maior parte da composição está
usando a cor marrom escuro. Aqui está outro exemplo de uma composição de cinco
cores que criei onde estou preocupado em tentar fazer com que ela fique
bem na página, que ela se sinta equilibrada. O amarelo e o
laranja eram ambos muito avassaladores neste fio de paleta de
cores, enquanto o verde escuro e
o verde claro menos. E então essa cor de
carvão marrom cinza muito
menos novamente, acabei de equilibrar
as proporções de cores dependendo de quão
poderosas elas apareceram. Como um exercício um pouco mais
avançado, pode ser interessante fazer isso com um fundo colorido. Esta é uma pintura de Damien Hirst onde ele tem muitos círculos
de cores diferentes. E, novamente, eles são
equilibrados com base em quão avassaladores ou quão poderosos eles se sentem na composição. vez, tenho uma paleta de cores e equilibrei o
número de círculos coloridos para fazer com que a composição geral
pareça equilibrada. Você notará que
há muitos dos pequenos pontos bege,
enquanto muito, muito poucos
dos pontos pretos marinhos escuros. Mas para este exercício você pode torná-lo um pouco mais
interessante cantonês, porque o que acontece se eu
mudar o fundo para preto? Bem, agora para fazer isso
ainda parecer atraente, para que ele ainda se sinta equilibrado, tive que mudar completamente o
equilíbrio das cores. Agora, a maioria dos círculos
é de cor escura, muito poucas cores bege nisso. E, na verdade, o equilíbrio de
todas as cores no meio. Eu tive que mudar
um pouco também. Você notará
muitos pontos roxos. Agora, esse exercício não está apenas nos ajudando a ver a cor
intuitivamente, mas nos ajudando a pensar em
como ele se equilibra em uma página semelhante aos exercícios de
composição que
fizemos logo no início. Depois de concluir
este módulo, você pode voltar para
essas composições iniciais e tentar adicionar alguma cor. Para este exercício,
quero que você vá ao Adobe Color e escolha
uma paleta de cores. Em seguida, cria uma composição
apenas usando essas cores, mas tente obter esse equilíbrio
certo para que não pareça que uma cor seja mais
avassaladora do que outras. Você poderia criar isso com
linhas como Paul Smith, ou você poderia criá-lo com
círculos como Damien Hirst. E então você tem o
desafio adicional de que você poderia alterar a cor de fundo e ver como o equilíbrio mudaria. Ou se você gosta, por que
não se divertir e criar uma composição completamente
diferente? Mas apenas certifique-se de usar essas cinco cores e que
o equilíbrio seja bom.
8. Resumo: Esses exercícios foram
novamente escolhidos para melhorar sua intuição
ao usar cores. Alterações de cor no contexto. Só podemos melhorar nosso uso de cores
trabalhando com ela diretamente. E é ótimo que você tenha feito esses exercícios antes de aprender demais sobre como a cor funciona e como
falamos sobre cores. Porque todas
essas coisas podem ter um efeito negativo sobre como você
vê as cores no contexto. Nas próximas seções, ainda
precisamos aprender a
falar sobre cores, pois estaremos trabalhando com clientes
reais quando
criarmos uma paleta de cores. Semelhante a como precisamos
saber como falar sobre tipografia para trabalhar com um cliente ou apenas internamente
com a equipe de design, precisamos saber como
falar sobre cores para trabalhar uns com os outros e
trabalhar com nossos clientes. Mas agora, depois de fazer
esses exercícios, você poderá ver melhor as
cores e
poderá trabalhar intuitivamente com cores melhor.
Rob Sutcliffe, UI Designer / Developer
