TUTORIAL [TUTORIAL] Entendendo o Básico sobre cores - Spriting

[Thayam 187]

Tutorial básico sobre cores.

Vejo no fórum e em outros locais, está dúvida sobre, como e que cores devo utilizar, tais motivos me levaram a passar o que aprendi sobre as cores ultimamente

Neste tutorial, vou explicar como funcionam as cores análogas, a monocromia, como usar ambas para nos spriters, e algumas técnicas de montagem de paleta. Este também, irá  nos ajudar na Pintura Básica e Antialiasing (AA). Então vamos lá ;

Cores Análogas e complementares:

 

• Cores análogas são cores que ficam lado a lado no disco de cores, e são tidas como análogas por dividirem a mesma cor base. Por exemplo, na imagem a baixo podemos ver o azul do meio ao seu lado duas cores análogas:

 

 

• 

Para que essa ideia serve no spriting?

 

• As cores análogas irão dar uniformidade e equilíbrio no sprite e também irá recheá-lo com uma elegância, será agradável ao nossos olhos de ver, cores desse tipo são muito usadas no nosso cotidiano, tornando o olhar mais agradável devido a calma que a uniformidade causa, não sendo nada diferente nos sprites. Podemos também utilizar as cores complementares para equilibrar o sprite, ou na montagem de paleta para obter uma nova pigmentação que pode atingir aquela tonalidade que você quer!
• Já as cores complementares são as cores opostas no diâmetro do circulo cromático, são sempre duas cores que se contrastam muito.
  Em uma escala monocromática para que as cores fiquem tanto análogas como complementares precisam estar sempre no mesmo nível saturação.

Monocromia:

 

• A monocromia é bem simples de entender, é simplesmente a adição de preto ou branco em uma única tonalidade de cor sem alterar a cor base. Um bom exemplo é um degrade de escala de cinza. Segue exemplo a imagem a baixo:

 

• Na primeira da esquerda para direita uma escala de cinza simples feitas apenas reduzindo o valor luminoso dela (adição de preto/branco) Já na segunda a mesma escala com a cor primária vermelho, terceira imagem apenas com adição de branco, e na quarta apenas adição de preto.

A grande maioria de nós spriters começou sombreando os sprites assim, fazendo com que o sprite fique morto e frio. Ao decorrer de treinos, novos trabalhos e muita prática, a percepção para adicionar novos pigmentos para dar o volume, sombra, contraste e os reflexos, desejados, irão aos poucos evoluindo de forma natural.

Adivinha como é feito é na teoria? Aha! Ai estão as cores análogas! Mas como assim, as cores análogas não funcionam só com cores da mesma saturação?
Sim realmente, mas duas escalas monocromáticas, uma para cada cor, teremos 2 pigmentações que se uniformizarão na imagem. É ai que está o segredo dos sprites com as cores análogas, não, logicamente, esta teoria é para ser seguida a, mas seu conceito é sim importante na criação da paleta, podendo ser complementada com cores terciárias em outra escala monocromática. Como por exemplo esse círculo cromático a baixo.


Técnicas simples para extração de cor para montagem de paleta.

De fato algo muito simples que muito provavelmente todos sabem, mas para esclarecer, e simplificar, vou mostrar métodos simples, fáceis e eficazes para mesclar cores.

Vou utilizar o programa básico que todos nós usamos, é uma técnica muito fácil  e funciona com qualquer programa  que tenha pincéis com AA automático;

 

• Inicialmente separe as cores bases que deseja usar, e selecione o pincel, faça uma mancha com a cor desejada, um circulo um quadrado de um tamanho razoável.

 

 

• Agora seleciona uma nova cor, a qual você deseja misturar, e simplesmente passe o pincel por cima da cor base.

 

 

• Feito isso, aproxime a imagem e note que o AA automático do programa mesclou as cores, gerando um meio termo entre as duas, você pode utilizar esse meio termo em uma nova mistura para pegar um pigmento ainda mais parecido com a cor caso não esteja o suficiente.

Pronto, você já sabe como fazer para mesclar agora só utilizar sua criatividade para aperfeiçoar sua paleta, buscando cada vez mais cores que irão harmonizar ou contrastar causando um efeito lindo no sprite

 

 

É isso ai meus amigos, chegamos ao fim de mais um tutorial simples, porém de extrema importância para aqueles que queiram se aventurar conosco haha

 

Espero ter ajudado alguém com este tutorial, e espero ver os resultados deste tuto aplicados nos show off's da vida por aqui haha

 

Grande abraço e até o próximo tutorial!

 

Créditos:

Weto (tutorial)

Thayam (compartilhamento no fórum)

Editado Janeiro 23, 2015 por Thayam (veja o histórico de edições)

[luanluciano93 1994]

Ótimo tutorial, aprovado e movido para a área correta. Obrigado por compartilhar ...

[Thayam 187]

Obrigado luan, é sempre uma honra receber elogios seus!

 

Abraço

[WooX 691]

Apenas corrigindo... André é o dono do P45, mas não é responsável por todo conteúdo do fórum, o autor deste tópico é o Weto, portanto os devidos créditos são dele e não do André.

 

Sem duvida é um ótimo tutorial, tenho certeza que vai ajudar muitos.

[Thayam 187]

Apenas corrigindo... André é o dono do P45, mas não é responsável por todo conteúdo do fórum, o autor deste tópico é o Weto, portanto os devidos créditos são dele e não do André.

 

Sem duvida é um ótimo tutorial, tenho certeza que vai ajudar muitos.

Créditos corrigidos, agradeço a dica Mestre!

[Ewerton Weto Costa 36]

Rapaz, legal você trazer o meu tutorial pra cá e tudo, mas porque é "meus trabalhos" na sua assinatura se você só deu um control + c + v aqui?

Editado Fevereiro 5, 2015 por Ewerton Weto Costa (veja o histórico de edições)

[Thayam 187]

Rapaz, legal você trazer o meu tutorial pra cá e tudo, mas porque é "meus trabalhos" na sua assinatura se você só deu um control + c + v aqui?

Meus trabalhos e e trabalhos de minha autoria são contextos totalmente diferentes

A autoria e os créditos são seus, mais o trabalho de trazer para o TK fui eu quem tive, então, não considero nada injusto/errado.

É um ótimo tutorial que me ajudou e ajuda até hoje, achei interessante traze-lo ao tk. Espero que não tenha problemas

Editado Fevereiro 6, 2015 por Thayam (veja o histórico de edições)