O TEMA DO FÓRUM ESTÁ EM MANUTENÇÃO. FEEDBACKS AQUI: ACESSAR

Paleta De Cores #2 - Hue Shifting

Iniciado por Falzar Haneiko, 20/04/2014 às 13:14

20/04/2014 às 13:14 Última edição: 22/07/2019 às 13:27 por Victor Sena






[box class=plainbox]
Hue Shifting
[/box]
     Hue Shifting é o nome do termo dado ao processo de transição da matiz junto com a luminosidade na formação das novas cores de luz e sombra na paleta. Desta maneira, podemos dar maior vivacidade para as cores e uma inteiração melhor entre elas. Verifique, como exemplo, a imagem abaixo.



     Você pode perceber que há diferença entre as duas paletas. a primeira se apresenta sem Hue Shifting, portanto, o processo de formação se deu a partir apenas da mudança de luminosidade da cor principal da cor neutra, que se localiza no meio.
     Já a segunda apresenta este conceito com clareza, pois pode-se perceber que existe uma sútil mudança na tonalidade conforme são formadas as luzes e sombras. Conforme os tons vão clareando, eles passam a ser formados mais pelo ciano, de modo oposto, conformo vão escurecendo, eles passam a ser formados pelo roxo.



     Na imagem acima, desta vez, você também percebe uma diferente nas cores. A primeira imagem está bem mais valiosa, pois conta com uma melhor harmonia dos tons e uma âmpla variação das cores; na segunda imagem, os tons estão mais apenas variando sua luminosidade, onde não foi aplicado o Hue Shifiting.
     Para compreender melhor este conceito, é necessário conhecer bem o círculo cromático, pois, desta maneira, as cores estabelecidas serão mais harmônicas entre si. Veja na imagem abaixo, um bom exemplo do circulo cromático.


     Veja que, a partir da cor principal, para estabelecer as sombras, é necessário uma mudança na matiz no sentido horário, para estabelecer as cores mais claras, as luzes, é necessário uma mudança da matiz no sentido oposto. Isto vale apenas para as cores quentes, para as que são consideradas frias, é necessário realizar o procedimento inverso.
     Após dar o primeiro passo para se criar uma paleta, ou seja, após estabelecer a cor principal que formará as demais, são estabelecidas as cores mais escuras, as sombras, e as cores mais claras, as luzes. Verifique abaixo o conceito mais detalhado sobre cada cor.


Vermelho: Se a sua cor principal for o vermelho, a sombra deve puxar mais o roxo, em efeito oposto, a luz deve puxar mais o laranja.


Laranja: Se a sua cor principal for o laranja, a sombra deve puxar mais para tons avermelhados, enquanto as luzes devem puxar mais para tons amarelos.


Amarelo: Se a sua cor principal for o amarelo, não haverá muita diferença para a cor anterior. A sombra deve puxar mais para o laranja, as luzes devem puxar um pouco do branco, pois esta é a única cor mais clara que o amarelo.


Verde: Se a sua cor principal for o verde, as sombras devem puxar o ciano ou o azul e as luzes devem puxar o amarelo. Repare que o processo daqui em diante vai tornar-se invertido, pois não estamos mais lidando com cores quentes.


Ciano: Se a sua cor principal for o ciano, as sombras devem puxar o azul, já as luzes devem puxar mais para a cor verde.


Azul: Se a sua cor principal for o azul, as sombras precisam tornar-se mais tons voltados para o roxo ou violeta, já as luzes devem puxar o ciano.


Roxo: Por fim, se a sua cor principal for o roxo, as sombras precisam tornar-se mais tons voltados para o violeta ou azul escuro, já as luzes devem puxar o vermelho.

[box class=plainbox]
Aplicação Do Hue Shifting
[/box]
     Antes, perceba um jeito mais fácil de entender a mudança de tonalidade no circulo cromático, perceba que a cor mais clara é o amarelo, logo, nada faz mais sentido do que todos os tons de luzes puxarem para esta cor. Correto?
     No modelo de cor HSB (Hue/Matiz, Saturação e Brilho), normalmente o mais usado para se criar paletas, temos que o valor da Matiz pode variar entre 0º e 359º. Isto se da de tal maneira que podemos evidenciar o circulo cromático no sistema conforme mostrado abaixo:

0º: Corresponde ao vermelho puro.
60º: Corresponde ao amarelo puro.
120º: Corresponde ao verde puro.
180º: Corresponde ao ciano puro.
240º: Corresponde ao azul puro.
300º: Corresponde ao roxo puro.

     Todos os valores intermediários entre esses números representam as transições entre as cores, por exemplo, o valor 275º representa um cor que esta entre o azul e o roxo, pode ser, talvez, uma coloração próxima do violeta.
     Agora, vamos começar a criar uma boa paleta de cores com o conceito que nós aprendemos. Para iniciar, vamos utilizar uma paleta com seis cores e, a princípio, escolher como a cor principal um certo tom de marrom, lembre-se que ele precisa ser uma cor intermediária, ou seja, nao muito escuro e também não muito claro.


     A Matiz da cor é 30º, portanto ela se localiza entre o vermelho puro e entre o amarelo puro, sendo, desta maneira, um tom de laranja. Para as tonalidades laranjas, as cores mais claras da paleta, as luzes, devem puxar para o amarelo, conforme está nas regras apresentadas acima. Verificamos que o amarelo puro conta com uma matiz de 60º, portanto, devemos adcionar um valor à Matiz para que ela chegue até o tom de amarelo.
     Já o brilho se da de maneira muito mais fácil. Como a luz é mais clara que a tonalidade normal, então basta retirar um pouco de brilho da cor para se formar as duas novas, vale lembrar que a matiz e o brilho devem caminhar juntos, proporcionalmente.


     Para realizar as outras tres cores, as sombras e a tonalidade de LineArt, basta fazer o processo inverso do que aquele que foi feito para se obter as cores de brilho, portanto, a partir da cor neutra, subtraia o valor da matiz e da luminosidade.
     Não são sempre todos os casos que a matiz e a saturação vão estar com o mesmo sinal, muitas vezes, uma vai estar reduzindo enquanto a outra aumentando. A luminosidade sempre se mantém constante, o que pode variar é o sinal da Matiz, pois ele é determinado pela cor principal que você escolheu, seja azul, vermelho ou qualquer outro tom.


[box class=plainbox]
Regra De Hue Shifting
[/box]
     Hue Shifting não tem necessariamente uma regra que possa fazer você consiguir tudo o que quer, basta você seguir os conceitos principais apresentados aqui, porém, para os mais confusos, sempre existe uma possibilidade de solução.
     Você pôde perceber que, com excessão do própio amarelo, quando cria-se as luzes da paleta, todas as cores tendem a puxar para os tons no sentido do amarelo no circulo cromático, de modo oposto, quando se trata das sombras, todas as cores tendem a puxar para o roxo. Tendo isto em mente, podemos tentar formular uma regra se utilizando da Matiz (H) do sistema HSB.
     Imagine que, quanto maior a quantidade de cores da paleta, menor deve ser o valor da redução ou do aumento da matiz ou da luminosidade, pois é necessário um número maior de transições até alcançar as cores da extremidade, portanto, a regra aqui apresentada não se valerá de números.

-- Luzes --
Roxo(300º) -> Vermelho (360º/0º) -> Amarelo (60º) -> Branco
Branco <- Amarelo (60º) <- Verde (120º) <- Ciano (180º) <- Azul (240º)

-- Sombra --
Amarelo (60º) -> Vermelho (360º/0º) -> Roxo (300º) -> Azul (240º)
Roxo (300º) <- Azul(240º) <- Ciano (180º) <- Verde (120º)

     De maneira mais simples, é possível formar uma regra mais geral agrupando cada cor de acordo com a sua matiz e estabelence as regras da mesma maneira. Note que o vermelho pode ser representado pelo 0º ou mesmo 360º, da mesma maneira em uma circunferencia, onde o 0º corresponde ao 360º (Uma volta completa).
     Portanto, quando dizermos que a cor roxa (300º) precisa aumentar a matiz até chegar ao vermelho (0º), estamos correto, pois a tonalidade vermelha representa o ponto inicial, é a mesma maneira que dizer o verde representa 480º (Uma volta completa, 360º, + 120º).


  • Luz
61º ~ 240º
241º ~ 60º
Reduzir Matiz
Aumentar Matiz
  • Sombra
61º ~ 240º
241º ~ 60º
Aumentar Matiz
Reduzir Matiz

Oba mais um, é sempre bom testar novas técnicas...

Oba! Há milênios eu tenho tentado saber como montar uma
paleta com Hue Shifting, mas não sabia como mudava a tonalidade
pra ficar certo. Essa parte da aplicação aí vai me servir muito.

No mais, esse é um efeito que muda muito a cara da pixel art,
principalmente a iluminação, fica bem mais natural. Muito bom
mesmo, Falzar!
  :clap:

Nossa, eu esta precisando de uma aula assim, agradeço muito por ter postado aqui.

Vou estudar o tópico com um pouco mais de foco agora.

Obrigado pessoal!
Realmente, a paleta eh uma das coisas mais importantes em um trabalho de pixel art por que ela eh a base e nao pense que eh facil assim montar uma paleta perfeita logo na primeira vez! com o tempo, essa habilidade vai se aperfeiçoando :)

 Perdi a quantidade de vezes que tive que ver esse tutorial em outro fórum para tentar fazer um bom Hue Shifting nos duelos do Coliseu. :D

Muito obrigado por trazer para cá, gostei muito do modo que explicou. Pretende fazer outras partes com outras técnicas de P.A?

2010 ~ 2016 / 2024

 Vash, pretendo sim! na verdade eu ainda pretendo fazer uma serie com varios tutoriais sobre PA, eh que este ano eu estou muito corrido, tenho que estudar para o vestibular e tenho o campeonato de volei tambem, daí estou sem tempo xD
Mas eu fico feliz que voce tenha gostado, voce comentou sobre esse tuto no meu topico de apresentação tambem hahahah assim voce acaba me motivando hein! haha