[Pixel Art] Aula de Introdução: Colorimetria

Nome: Pixel Art - Colorimetria
Autor: Ritton
Dificuldade: Iniciante
Ferramentas: MS Paint
Descrição: Noções básicas sobre cores, iluminação e sombreamento.

As cores não são nada mais que percepções visuais. Elas estão presentes em todos os elementos do cotidiano e podem ser captadas facilmente pelos olhos. Imaginem o que seria um mundo sem cor. São através delas que podemos diferenciar e separarmos todos os elementos que são captados durante a vida.

Assim, devemos saber que as cores são elementos importantes para as artes. Mas também devemos saber como trabalhar com elas. Não existem mistérios, basta apenas saber utilizá-las corretamente. A ciência que estuda as cores, a colorimetria, está em constante mudança, devido a diversa possibilidade de resultados.

Em Pixel Art, as aplicamos para tornarmos os elementos “vivos” que desenhamos. Mas é importante saber que o uso incorreto pode comprometer um trabalho. Devemos também saber diferenciá-las e nisso, as mesmas podemos dividir em quatro grupos: Cores Primárias, Secundárias, Terciárias e Neutras.

Cores Primárias: Fazem parte desse grupo as cores Vermelho, Amarelo e Azul.

Cores Secundárias: Constituem na mesclagem de duas cores primárias. Temos as cores Verde, Roxo e Laranja.

Cores Terciárias: São resultados da mesclagem de uma cor primária com uma ou duas secundárias. Temos um leque constituído de todas as outras cores.

Cores Neutras: São cores complementares que constituem pouco reflexo. Podemos citar o Branco e a variação de tons de Cinza.

Quando as utilizamos em desenhos, devemos saber aonde e como devem ser usadas, para que um trabalho não seja comprometido e possamos criar diferentes resultados.

Noções Básicas: Sistema RGB

Também é importante entendermos o RGB que foi dito na aula passada. RGB é abreviação da junção de Red, Green e Blue. Mas eles não servem apenas para mostrar essas cores. Além de serem cores primárias, o sistema RGB serve como um canal de luz que reproduz as cores perceptíveis pelo olho humano.

Representação:

Nossos olhos conseguem enxergar essas cores devido a luz projetada e captada. É importante entender um pouco desse sistema. Às vezes, o uso excessivo do sistema RGB acaba não sendo suportado pelos monitores coloridos.

Noções Básicas: Sistemas HSV e HSL

O sistema HSV é a abreviação do conjunto Hue (Matiz), Saturation (Saturação) e Value (Valor). O mesmo pode ser chamado de HSB, sendo o conjunto de matiz, saturação e brilho (brightness). Também temos o sistema HSL, que se baseia em basicamente todos os valores retirando o Brilho e trocando por Luminosidade.

Os mesmos funcionam de forma não-linear ao sistema RGB, sendo baseado nos valores dos itens que o compõe:

Matiz (Tonalidade): Verifica o tipo de cor, atingindo uma variação de valores de 0 a 360, porém a diferença em relação a alguns aplicativos, como o MS Paint, onde os valores distinguem-se entre 0 a 240. O mesmo serve para distinguir as cores através de termos como RGB.

Representação:

Saturação: Verifica o grau de pureza a qual a imagem está. Quanto menor o valor, mais escura a cor se encontra e quanto maior, mais "pura" a cor fica. Esse item é relacionado a mesclagem da cor pura em relação a uma branca ou preta.

Brilho & Luminosidade: O brilho verifica o brilho que a cor contém, enquanto a luminosidade serve para a verificar a concentração de luzes na cor.

Representação:

Ainda existem mais dois sistemas relacionados a estes: HSI & HCI.

Thopson1m: Muito legal esse seu tutorial, me fez lembrar muitas coisas sobre o pixel art, principalmente pelo fato que estou trabalhando em jogos que usam pixel art.

Edit: Realmente muito legal essa parte das cores e como usar elas pode dar uma melhor impressão das suas criações.
Estou gostando, e muito, desses seus tutoriais. Continue com eles!

Interessante esse tutorial. Eu estava procurando algumas aulas sobre pixel-art há um tempinho, só que decidi usar gráficos não originais no meu jogo.

Uma pergunta: existe algum programa específico para pixel-art, ou só o paint mesmo já resolve?

flw =)

.acho o editor do game maker melhor que o paint para fazer pixel art

Interessante, mas dá pra evoluir bastante nesse assunto.
- Você pode explicar como obter cores mais iluminadas e mais sombreadas usando os valores hsv (acho que dá pra digitar os valores tanto no paint quanto no editor do GM).
- Esse tutorial é o local perfeito pra introduzir o conceito de paletas de cores (que não achei nem na wikipedia). Se você puder esgotar esse assunto, eu serei um dos que utilizarão seu tutorial, não apenas para pixel art.
- Já que tocou no assunto de "cores quentes" e "cores frias", no círculo de cores, porque não mostrar os diferentes estilos de geração de cores (mono, contrast, triad, tetrad, analogic*)?

*não encontrei a tradução e preferi não arriscar

O tutorial é bom, mas tem potencial muito maior.

Obrigado pelos comentários. Bom, como não estou tão focado no desenvolvimento de jogos e sim nos meus estudos, mal tenho tempo de pesquisar e fazer novas aulas. Venho dizer que as aulas sofreram mudanças: Agora trabalharemos ao máximo com os três assuntos (Pixeis, Colorimetria e Geometria) que serão divididos em grupos, não tendo uma continuação entre as aulas.

Saim, obrigado por me ajudar no assunto. Fico lhe devendo a aula sobre Paleta de Cores para frente. Eu mudei o conteúdo, dando apenas algumas noções básicas para depois pegar um de cada vez e esgotar ao máximo. São tantas as possibilidades que uma aula não tem capacidade para tanto conteúdo.

Vou fazer um tópico para arquivar as aulas. Também estarei trabalhando na Apostila de Pixel Art que estou fazendo. Podem deixar que esgotarei ao máximo os assuntos. Ah, as aulas podem sofrer mudanças a qualquer momento.

Até mais!

Ps: Se demorar para eu postar a próxima aula é por causa dos estudos.