Alura > Cursos de UX & Design > Cursos de Design Gráfico > Conteúdos de Design Gráfico > Primeiras aulas do curso Cores no design: teoria e prática

Cores no design: teoria e prática

Teoria da cor - Apresentação

Boas-vindas ao curso Cores no design: teoria e prática! Eu sou o Felipe Labouriau, designer gráfico e instrutor de UX & Design aqui na Alura.

Estou gravando esse vídeo do meu quarto, com uma iluminação rosa ao fundo, utilizando uma camiseta preta, e tenho a pele branca.

Quero convidar você para participar desse curso! Nele, vamos te apresentar tudo sobre as cores, para que você possa entender definitivamente tanto como as cores são absorvidas e interpretadas fisicamente pelas pessoas, quanto como podemos manipulá-las.

Iremos conversar sobre os princípios mais fundamentais das cores, entendendo o que é matiz, saturação, e brilho.

Falaremos também sobre os modelos de cores RGB, CMYK, HSB e HSL.

Além disso, vamos ver como as cores são representadas na tela, como a que você está assistindo a esse vídeo, e também no mundo físico, na impressão de projetos gráficos.

Em seguida, após essa parte mais teórica em que te apresentamos todos esses fundamentos, vamos entender como podemos manipular as cores, tanto escolhendo tons para os nossos projetos de design, como também fazendo tratamentos e edições com cores.

O curso terá uma carga teórica um pouco maior que prática, mas no momento prático, vamos trabalhar com os softwares Adobe Photoshop e Adobe Illustrator.

Não esperamos que você tenha um grande conhecimento e seja especialista nessas ferramentas, ou trabalhe com elas todos os dias. No entanto, é importante que você já conheça pelo menos um pouco.

Caso você não tenha esses softwares ou não trabalhe com tais programas, fique tranquilo! O mais importante durante a porção prática do curso é entender o raciocínio por trás dos processos, de modo que você fique por dentro das motivações das nossas ações. A ferramenta em si não é tão relevante, pois ações similares podem ser feitas com outros softwares.

Dito isso, esse curso é para você que quer mergulhar de cabeça nas cores e entender como você pode trabalhar com elas da maneira mais criativa e bem acabada possível nos seus projetos.

Espero que você tenha curtido a nossa proposta. Vejo você ao longo do curso!

Teoria da cor - Visão geral

Quero te dar as boas-vindas a mais um curso da Alura! Nesse vídeo, vamos conversar sobre tudo aquilo que será trabalhado ao longo do curso.

Conforme dito no vídeo de apresentação, teremos tanto uma carga teórica quanto prática, a fim de entendermos a fundo o que são as cores sob a perspectiva de uma pessoa que trabalha com Design.

Na primeira parte do curso, a mais teórica, nós vamos entender exatamente o que são as cores do ponto de vista físico, e como nós, as pessoas, as entendemos visualmente, isto é, como o nosso aparelho visual funciona.

Falaremos também sobre os modelos de cores, inclusive as representações matemáticas inventadas para reproduzi-las tanto em tela como impressa. Além disso, vamos entender como as cores acontecem de fato em um monitor e quando precisam ser impressas.

Estudaremos os modelos cromáticos RGB e CMYK, talvez os mais importantes deles, e também o HSB, modelo que nos ajudará a entender 3 atributos fundamentais das cores: matiz, saturação e brilho.

Sob um ponto de vista objetivo, veremos como combinar as cores, aproveitando as suas características mais importantes por meio das harmonias cromáticas, visando um equilíbrio visual ao trabalhar com materiais coloridos.

Também serão discutidos atributos mais subjetivos das cores, a chamada Psicologia das Cores, quando as pessoas tentam trazer valores, sensações e sentimentos para as cores individualmente.

No segundo momento do curso, caminharemos para a parte mais prática. Para isso, vamos utilizar 2 softwares.

O primeiro deles é o Adobe Illustrator, onde iremos retrabalhar o layout de uma interface digital.

Nele, veremos como utilizar determinada paleta de cores, aplicando uma técnica chamada 60-30-10, a fim de melhorar um resultado que, anteriormente, não estava tão bem-acabado. Nesse caso, trabalharemos com as mesmas cores, mas em proporções diferentes, de modo a obter maior equilíbrio visual.

Em seguida, vamos para o Photoshop, atualmente o carro-chefe para edição e tratamento de imagens.

Saberemos como interpretar as informações de uma imagem a partir do painel "Histogram" e, além disso, como fazer ajustes para resolver problemas relacionados às cores. Sendo assim, vamos conhecer camadas de ajuste.

Entre elas, temos a camada de ajuste de curvas, utilizada para corrigir cores nas imagens. Também veremos como trabalhá-las não somente como método de correção, mas para conferir ganhos diferentes em outras tonalidades e, inclusive, o contraste.

Conheceremos a camada de ajustes "Hue/Saturation", ou Matiz/Saturação, a qual nos permitirá fazer edições mais pontuais em uma imagem, como, por exemplo, corrigir tons amarelados.

Ainda com o ajuste "Saturation", vamos entender como podemos trocar as cores presentes em uma imagem, inclusive substituindo uma cor por outra específica.

O nosso curso, mais uma vez, tem uma parte teórica, mas também tem uma parte prática.

Não se preocupe caso ainda não trabalhe com o Photoshop e/ou com o Illustrator, pois não vamos entrar a fundo em ações avançadas. Além disso, se você já trabalha com outros softwares dessa natureza, basta executar as mesmas ações neles.

Caso nunca tenha trabalhado com esse tipo de programa, recomendo que você comece a estudá-los, porque eles são muito importantes no Design visual.

Além dos vídeos, nosso curso possui diversos materiais complementares, como os Para saber mais, textos que se aprofundam em assuntos que não abordamos tanto ao longo dos vídeos; as atividades de múltipla escolha propostas; e os Faça como eu fiz, em que trazemos propostas de ações e trabalhos que você pode realizar paralelamente ao curso.

Novamente, quero te desejar boas-vindas ao nosso curso. Nos vemos na próxima aula!

Teoria da cor - O que são as cores

As cores estão em todos os lugares: na natureza à nossa volta, na sua casa, até nesse vídeo que você está assistindo.

Nesse curso, em que vamos falar sobre cores, nada melhor do que começarmos respondendo a uma pergunta fundamental: o que são as cores?

Pode parecer uma questão trivial hoje em dia, mas durante muitos séculos, nós, seres humanos, não sabíamos respondê-la.

Até que, no século XVII, o físico e matemático Isaac Newton realizou um experimento: projetou um feixe de luz, aparentemente incolor, de modo a atravessar um prisma. Ele observou que, ao atravessá-lo, a luz se dividia em cores que hoje chamamos de cores do arco-íris.

Prisma triangular transparente disposto sobre um fundo preto. À esquerda dele, há um feixe de luz branco horizontal atingindo a lateral do prisma. Dentro dele, como extensão do feixe de luz branco, há um feixe horizontal colorido que vai da lateral esquerda interna do prisma à lateral interna direita, composto pelas sete cores do arco-íris em gradiente uma abaixo da outra. À direita, a extensão do feixe de luz colorido descrito anteriormente, cuja espessura aumenta gradativamente.

Muitos anos depois, descobrimos que essas cores estão dentro de um intervalo bastante específico e restrito de todas as ondas eletromagnéticas. Existem comprimentos de ondas que nós, seres humanos, somos incapazes de enxergar.

As ondas mais compridas que o vermelho são o infravermelho, as micro-ondas, e as ondas de rádio, e as ondas mais curtas que o violeta são a ultravioleta, os raios X, e os raios gama. Nós não conseguimos vê-las, mas elas estão no universo.

Embora Isaac Newton tenha observado as cores do arco-íris no momento em que a luz atravessou o prisma, na verdade, o nosso aparelho visual em conjunto com o nosso cérebro não interpreta a luz dessa forma.

Nós enxergamos e percebemos a luz de outra maneira: a partir da luz vermelha, da luz verde, e da luz azul. Essas três cores juntas, processadas nos nossos olhos e no nosso cérebro, geram todas as outras cores que enxergamos.

Como isso acontece?

A luz entra nos nossos olhos, passando pela pupila, e sensibilizando a retina. Dentro da retina, nós temos microestruturas, chamadas de cones e bastonetes.

Os cones são sensíveis ao vermelho, ao verde e ao azul. Uma vez que essas estruturas percebem tais cores e uma quantidade específica de cada uma delas, a depender da cena e dos objetos que estão sendo enxergados, são geradas as demais cores.

Observe, por exemplo, os feixes de luz a seguir:

Três círculos que se intersectam dispostos de modo a formar um triângulo sobre um fundo branco. O círculo superior é vermelho, o inferior esquerdo é verde, e o inferior direito é azul. A intersecção de cada um dos círculos gera cores diferentes, descritas no texto logo abaixo da imagem.

Note que a sobreposição de vermelho e azul gera uma terceira cor, o magenta. Já a sobreposição de verde e vermelho, gera o amarelo. A sobreposição de verde e azul gera o ciano. Por fim, a sobreposição de vermelho, verde e azul, simultaneamente, gera o branco.

Perceba que as cores no seu estado puro, quando misturadas, geram o magenta, o amarelo, o ciano, e o branco. Porcentagens específicas de vermelho, verde e azul, que não apenas as cores puras, geram outras milhões de cores que somos capazes de enxergar.

Sendo assim, toda cena que nós observamos contêm uma porção vermelha, outra verde, e outra azul. Essas porções podem ser chamadas de canais de cores, e cada um deles, evidentemente, tem um nome: red (vermelho), green (verde), e blue (azul). Juntos, formam a sigla RGB, sobre a qual você talvez já tenha ouvido falar.

Esses três canais, sobrepostos e interpretados simultaneamente pela nossa visão, geram as imagens coloridas, inclusive com porções brancas.

Quatro imagens iguais, estando as três primeiras dispostas horizontalmente em tamanho menor na parte superior, preenchidas, respectivamente, pelas cores vermelho, verde, e azul, e a quarta abaixo delas em tamanho maior e colorida. Na imagem, há uma casa de madeira marrom sobre um gramado verde; ao fundo, há montanhas cinzas cobertas por grama e por neve, sobre um céu azul-claro.

A combinação dessas três cores é chamada de aditiva. Mais adiante no curso, vamos conversar sobre a combinação subtrativa, e entender um pouco mais sobre o RGB e outros modos de cores.

Guarde bem a informação dos canais de cores; eles serão mencionados durante todo o curso, principalmente ao final, quando fizermos tratamento de imagens.

Observe o gráfico abaixo:

Gráfico plotando as cores que o ser humano pode enxergar. No eixo x, temos os valores de 0.0 a 0.8, em intervalos de 0.1. No eixo y, temos os valores de 0.0 a 0.9, também em intervalos de 0.1. Dentro do gráfico, há uma parábola com a concavidade para baixo e um pouco inclinada para a esquerda; sua concavidade está preenchida por um gradiente das cores ciano, verde, amarelo, laranja, vermelho, rosa, magenta, roxo, azul e branco. A extremidade esquerda da parábola marca aproximadamente 0.17 no eixo x e 0.0 no eixo y; já a extremidade direita, marca aproximadamente 0.74 no eixo x e 0.27 no eixo y. O vértice marca aproximadamente 0.08 no eixo x e 0.84 no eixo y.

Ele mostra todas as cores que nós, seres humanos, somos capazes de enxergar. O monitor em que você está assistindo a esse vídeo não consegue reproduzir todas as essas cores, materiais impressos, muito menos.

Porém, é essa a representação. Ela foi feita em 1931 pela Comissão Internacional de Iluminação (CIE). No texto complementar após essa aula, explicaremos isso um pouco mais a fundo, mas saiba que os canais RGB geram todas essas cores e as demais que o ser humano é capaz de enxergar.

É claro que as pessoas enxergam as cores de maneiras diferentes. Há pessoas daltônicas, por exemplo, e as enxergam de outras formas.

Nesse curso, nos referimos a casos padrão, mas fique tranquilo! É provável que você e eu não consigamos enxergar todas essas cores.

Além do RGB, temos o modo de cores CMYK, composto por ciano, magenta e amarelo, o qual veremos a partir da próxima aula. Entenderemos a diferença entre essas duas siglas que você talvez já conheça.

Finalizamos por aqui esse vídeo. O objetivo era te dar uma explicação sucinta, porém importante, sobre o que são as cores e como nós, seres humanos, as interpretamos.

Lembre-se que temos o espaço do fórum disponível para você tirar as suas dúvidas, fazer os seus comentários, e compartilhar os seus trabalhos caso queira trocar ideias tanto comigo quanto com a comunidade.

Vejo você na próxima aula!

Sobre o curso Cores no design: teoria e prática

O curso Cores no design: teoria e prática possui 130 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de Design Gráfico em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Design Gráfico acessando integralmente esse e outros cursos, comece hoje!

Plus

De
R$ 1.800
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

Matricule-se

Pro

De
R$ 2.400
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Luri, a inteligência artificial da Alura

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas