[TUTORIAL] Quando preocupar-se com as cores? - Spriting

Postado Janeiro 22, 2015 10 anos

Falae pessoal do TK!

Hoje to a milhão e vim trazer mais um tutorial para os spriters de plantão! haha

Vamos lá:

Quando eu devo me preocupar com cores?

Bem, essencialmente o que vem é, que cores a peça precisa ter? Então, enquanto eu prossigo, o quão longe eu posso ir com estas (até é claro eu precisar adicionar mais sombras). Aí é quando a mistura ocorre.
-Adarias

Esse é um método comum de criação de paleta para uma peça. Aqui vai um exemplo do que ele está falando:

Como a peça se torna mais complexa, torna-se necessária a criação de cores adicionais para alcançar o sombreamento mais avançado, ou para colorir novos elementos da imagem ou detalhes.

Outro método consiste em criar a peça em tons de cinza, e adicionar cor posteriormente. Isto é possível porque um valor relativo é uma preocupação maior do que com o tom, porque o tom pode ser mais facilmente alterado mais tarde, após as relações de valor serem estabelecidas.

Pessoalmente eu acho mais fácil de acompanhar cores enquanto a peça avança, por isso eu prefiro o primeiro método.

Contagem de cores

Você deve achar que pixel artistas muitas vezes defendem uma contagem baixa de cor. Você deve assumir que isso é uma tradição de dias velhos de pixel art deixada para trás, quando os consoles de vídeo game só podiam disponibilizar certa quantidade de cores.

Se os computadores modernos podem facilmente exibir centenas de cores, por que você não deve usar todas elas? Na verdade, usar paletas pequenas não é uma tradição ultrapassada do pixel art, e há razões muito lógicas por trás desta prática.

Coesão - Quando você estiver usando menos cores, as mesmas cores reaparecerão por toda a peça com mais frequência. Uma vez que diferentes áreas do trabalho compartilham as mesmas cores, a paleta envolve as peças, unificando o trabalho.

Controle - Quanto menor a paleta, mais fácil de gerir. Você pode, e provavelmente irá, querer ajustar uma cor mais tarde. Se você tem 200 cores, vai levar muito mais tempo para fazer os ajustes, porque por mudar uma cor você muda toda a relação dessa cor com as cores vizinhas na sua paleta, e ajustá-la significa mudar as relações entre as cores e seus vizinhos! Você pode ver como isso rapidamente acrescenta-se a um monte de trabalho. Com uma pequena paleta, o efeito de mudar uma única cor é mais substancial, e existe menos micro relações a se preocupar.

Tom, saturação e luminosidade

Tom:
O Tom refere-se à identidade de uma cor. Se uma cor é definida como azul, vermelho, laranja, etc. Depende da sua tonalidade:

Na foto acima, o tom é representado ao longo do eixo-x.

Assim como você pode mudar a forma de como clara ou escura uma cor aparece por rodeá-la com pixels claros ou escuros, o tom percebido de uma cor depende do seu ambiente. Aqui temos um cinza completamente neutro, médio:

Nesta foto (um detalhe desta peça por iLKke) o verde nas árvores não é realmente verde em si, mas o mesmo cinza da imagem anterior:

Porque o fundo é tão roxo (que é o oposto do verde na roda de cores), o cinza parece mais verde do que realmente é.

O tom será um conceito importante depois, quando falarmos de hue -shifting.

Saturação:

A saturação é a intensidade de uma cor. Quanto menor a saturação, mais próximo fica a cor do cinza:

O problema mais comum que novos artistas encontram se refere à saturação. É o uso de cores muito saturadas. Quando isso acontece, as cores começam a queimar os olhos. Este pode ser um problema em qualquer mídia, mas porque as cores em pixel art são feitas de luz, ao invés de pigmento como na pintura, o potencial para cores serem muito claras ou irritantes é muito maior. Observe como as cores na segunda imagem são muito mais fáceis para os olhos:

Luminosidade (brilho):

Luminosidade (também conhecida como brilho ou valor) é o quanto mais clara ou mais escura é uma cor. Quanto maior a luminosidade, mais perto fica a cor do branco. Se a luminosidade é 0, então a cor é preta.
Aqui está uma paleta organizada como uma escala de luminosidade para sua aprendizagem visual:

Luminosidade baixa (cores mais escuras)na esquerda, alta (cores mais brilhantes) na direita

Em uma dada paleta, você vai querer ter uma ampla gama de valores. Se você só tem cores no mesmo intervalo de luminosidade, então você não será capaz de criar bom contraste. Uma gama completa de valores permite que você use destaques, meios-tons e sombras. A diferença entre o brilho de duas cores é conhecido como contraste. Um problema comum em artistas recentes é não ter contraste suficiente. Aqui está um exemplo de uma imagem que o contraste é muito baixo:

E essa mesma imagem, ajustada. Logo, os valores estão espalhados de forma mais uniforme do claro para o escuro:

O valor de uma cor é um número definido, mas as cores podem parecer mais claras ou mais escuras dependendo do seu plano de fundo. Por esta razão, você não vai sempre querer usar sua cor mais brilhante para toda parte iluminada. Uma cor que faz um bom destaque em um objeto pode ser muito brilhante para uso em um objeto mais escuro.

Luminosidade é especialmente relevante para pixel art: O brilho de um pixel ou linha determina o quanto grosso ele aparece:

O primeiro exemplo é uma simples linha preta. A largura da linha parece consistente. Abaixo disso é uma linha com pixels que variam de brilho. Observe como a linha aparece mais fina no centro em 1x.

Rampas de cores

A rampa de cores é um grupo de cores que podem ser utilizadas em conjunto, organizadas de acordo com a luminosidade. Uma paleta pode consistir de uma rampa única com muitas rampas diferentes.

Aqui está uma paleta:

E aqui está essa mesma paleta, organizada de acordo com as rampas de sua cor (as quais existem duas):

Não é necessário que você crie um modelo como o descrito acima (embora alguns artistas acharem útil). O que é importante é que você entenda quais as relações de suas cores, isto é, o que suas rampas são.

Não é necessário que uma cor se restrinja a uma só rampa. Muitas vezes, rampas irão compartilhar cores. Frequentemente, a cor mais escura ou mais clara irá pertencer à maioria ou a todas as rampas da paleta, como no exemplo acima, em que ambas as rampas partilham os mesmos tons mais escuro e mais claro.

Também é possível meios-tons trabalharem em rampas múltiplas. Nestes casos, a cor versátil toma o lugar de duas ou mais cores diferentes, auxiliando na conservação da paleta. No caso da rampa de multi-sombras e luzes, os extremos na luminescência permitem a cor a ser flexível (porque eles se aproximam do preto ou branco). Desde que os meios-tons não têm esta vantagem, eles muitas vezes são as cores mais neutras, o que significa que estão mais perto de marrom ou cinza.

Aqui está uma paleta que usa um tom de cinza para unir as lacunas em várias rampas:

Você também tem que ser cuidadoso sobre ter cores em uma rampa que não se encaixam. Se uma cor não pertence à rampa, então ele tem o potencial de perfurar a imagem, que é um erro grave em que a cor, ao invés de trabalhar como parte da imagem, parece separar-se dela, e parece quase que ela está sentada em cima da imagem. Isto é geralmente devido à saturação muito alta, ou pelos confrontos de tons com tons vizinhos, assim criando um eyeburn.

A imagem acima mostra um eyeburn criado por uma cor com saturação muito alta.

... e nesta imagem, o eyeburn é criado pelo confronto do verde com o roxo. A tonalidade deve logicamente seguir os seus vizinhos na rampa.

Hue shifting

“Hue Shifting" se refere a transição de cores numa paleta. Uma paleta sem hue shifting é conhecida como "paleta reta". Nas paletas retas, só a luminosidade muda, enquanto em "paletas com hue shifting", o tom e a luminosidade mudam.

A primeira paleta é uma paleta reta verde. A segunda imagem é uma paleta verde com hue shifting aplicado. Ao usar hue shifting, una seus destaques a uma determinada cor (amarelo, no exemplo acima), e mova as cores mais escuras em direção a uma segunda cor (eu escolhi azul no exemplo acima). O hue shifting é usado porque rampas retas são entediantes e não refletem a variedade de cores que nos vemos na realidade, e o hue shifting pode adicionar o contraste de cores sutis dentro de uma rampa.