[TUTORIAL] Pensando em Cores - Spriting

[Thayam 187]

Bom dia, boa tarde e boa noite amigos do TK!

 

Venho hoje trazer um tutorial traduzido que tem como o tema "Pensando em Cores" na hora de criar sua sprite! Este tutorial me ajudou muito quando comecei a fazer sprites e espero que possa ajudá-los tanto quanto me ajudou!

 

Vamos lá:

 

 

Pensando em cores

Eu passo muito tempo em uma série de Fóruns de RPG e muito deste tempo que passo é gasto dando às pessoas feedback sobre suas sprites. A minha crítica mais comum se tornou uma espécie de bordão e até poderia ser pensado como uma tese para esta série inteira de tutoriais: as cores precisam de mais contraste. A escolha da cor faz ou quebra uma sprite.

Cores - e o contraste entre elas - são a base de todas as sprites. Isso é exatamente o que pixels são: pequenos blocos de cor. Spriting não é como desenhar ou colorir as linhas; trata-se de colocar cores nos lugares certos para criar a ilusão da forma. Eu vi um monte de tutoriais que falam longamente sobre linhas e técnica e sombreamento e blá blá blá, mas dão muito pouca atenção para a parte mais importante e absoluta de pixel art: cor, e tudo que vem com ela.

Dê uma olhada nessa sprite - ela foi publicada em uma discussão crítica no HBGames.org por um membro chamado Norton

Estruturalmente, não está ruim. É baseado em um personagem de Mass Effect o que é imediatamente óbvio, e eu nunca sequer joguei o jogo, por isso trabalho foi bem feito. Por outro lado, as cores são muito plana, porque lhes falta um contraste significativo.

 

(Update: Eu já disputou os jogos Mass Effect, e eu os amo.)

Isto é o que eu fiz com ele, eu mudei muito pouco da própria sprite, mas as cores atualizadas fazem uma enorme diferença. Agora parece que tem uma verdadeira profundidade. São as cores que trazem uma sprite para a vida.

 

Palavras Cor: vale a pena conhecer!

Embora existam mais do que suficientes recursos on-line que tratam sobre os seguintes termos e conceitos, eu poderia escrever a o meu próprio texto. Nota-se que na maioria das vezes essas palavras realmente não são fatos em Pixel Art, ou melhor; eles são, mas sabendo que a terminologia exata não é realmente necessária. O maior deles para se pensar quando se trata de spriting é constraste, e eu vou dedicar uma seção inteira para que em breve. Mas ainda é útil ter uma compreensão destes conceitos básicos de cores.

 

Cor

A palavra "cor" é muito vaga. Quando a luz é refletida fora de qualquer superfície, seus olhos reconhecem a cor. Desde cedo, aprendemos que "vermelho", "azul", e "amarelo" são cores. Hoje, muitas pessoas pensam de cores como "# FF0033", "# 003399" ou "# FFFF00". Mas simplesmente, uma "cor" é um pedaço de informação visual que engloba todas as seguintes definições.

 

Matriz

Quando crianças pequenas são ensinadas sobre as cores, eles estão realmente sendo ensinado matrizes. Hues são fáceis: vermelho, azul, verde, etc. O nome de uma cor é geralmente referindo-se a sua tonalidade. É possível pensar em tons como categorias de cores. Dê uma olhada:

Esta linha de todas as cores compartilham a mesma tonalidade: verde.

 

Estas cores, por outro lado, proporcionar uma gama de diferentes matizes.

 

Brilho / Luminosidade / Valor

Em nível técnico, estes termos têm significados ligeiramente diferentes (tão pequenos que realmente não vale a pena se preocupar, tem a ver com a matemática de fazer cores, mas em um nível prático eles têm a mesma função). O brilho de uma cor é apenas isso: se é claro ou escuro. A proximidade de cor para branco ou preto determina o seu brilho.

É praticamente autoexplicativo, certo?

 

Saturação

A saturação de cor é muito semelhante ao seu brilho, mas em vez de luz contra a escuridão, a saturação é forte contra o fraco. A cor com alta saturação vai realmente se destacar, enquanto uma cor com baixa saturação vai parecer desbotada. Por exemplo, um azul altamente saturado vai gritar "Eu sou azul!", Mas o mesmo azul com uma baixa saturação iria se lamentar "Estou me sentindo um pouco azul hoje."

Estes três azuis têm o mesmo tom e brilho, mas níveis de saturação drasticamente diferentes. A cor mais à esquerda é tão saturada que chega a ser quase cinza.

 

 

Dica, aprendizes!
Um monte de pessoas se perdem quando se trata de saturação em qualquer direção. Enquanto um esquema de cores em estilo sepia saturada pode ser muito atraente, se não for utilizada corretamente, pode matar a legibilidade e fazer toda a peça parece plana. Por outro lado, se algo está muito saturado pode ser literalmente doloroso olhar. Manter um bom equilíbrio e lembrar que o contraste é fundamental.

 

Contrastar

Essa é a minha favorita, porque quando se trata de Pixel Art, tudo é sobre o contraste. Embora as definições acima possam ser aplicadas a uma única cor, contraste não pode existir sem duas ou mais cores. O contraste é a diferença entre as cores. As cores podem ter contraste entre sua cor, brilho, saturação, ou todas as anteriores. O importante a se lembrar é que as cores com alto contraste se destacam um do outro enquanto as cores com contraste baixo irão borrar juntas.

 

O contraste entre o azul e o amarelo é muito alto por isso parece afiada, mas o menor contraste entre o amarelo e o bronze se torna uma transição mais suave.

 

Em Pixel Art, eu diria que o contraste é um dos mais importantes desses termos.

 

 

 

É isso ai pessoal, este tutorial é um tutorial simples, porém de muita eficiência e de didática extremamente notável. São conceitos básicos, mas que realmente (hoje digo com certeza, pois vejo esta deficiência em massa), a coloração é o ponto mais pesado em termos de aprendizagem sobre Pixel Art!

 

Espero que com esse tutorial algumas pessoas possam aprender mais sobre esse tipo de arte que te exige uma visão e criatividade muito aguçadas para criações.

 

Estarei em breve traduzindo mais tutoriais desse tipo para incrementar ainda mais nosso conteúdo de Spriting!! Conto com vocês para o Feedback destas traduções! Espero ver muitos novos spriters em nosso fórum haha.

 

Até o próximo tutorial

 

Créditos:

Final Boss Blues (pelo tutorial)

Thayam (pela tradução)

Way20 (por ter me indicado este fucking awesome tutorial!)

 

Link do tópico original:

Thinking in colors

[luanluciano93 1979]

Ótimo tutorial, aprovado e movido para a devida seção. Obrigado por contribuir com o fórum.

[Thayam 187]

Obrigado pelo apoio, é muito satisfatório ver os membros aproveitando os tutoriais, e quando o comentário vem de um moderador da equipe é ainda mais gratificante!

[xWhiteWolf 3001]

Apesar de eu não estar muito envolvido na área de spriting, volta e meia eu venho dar um pulo aqui pra ver oque o pesoal anda fazendo de bom haha felizmente hoje me deparei com esse tópico e geralmente eu olho, leio e fecho mas está muito bom, mereceu o meu rep+ e eu decidi fazer esse comentário. Obrigado por trazer esse tutorial pra cá, espero que ajude bastante gente que faz sprite com cores pouco destoantes umas das outras(inclusive nas areas de separação, onde deveria haver sombra) oque faz a sprite parecer que não pertence ao jogo haha.

[Thayam 187]

Muito obrigado cara! *-*

 

Estou tentando agitar a área para que possam surgir novos spriters, novos pontos de vista e novas ideias são sempre bem vindas haha

 

E no que disser respeito a empenho, tanto os usuários quanto a equipe do TK pode ter certeza que podem contar comigo! haha

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

[fabiodias 158]

Um bom tutorial,parabéns bem explicado 

reputado

[Thayam 187]

Obrigado amigo!

[WooX 688]

Perfeito Thayam, eu também estava pensando em traduzir e trazer aqui pro TibiaKing, mas você foi mais rápido, enfim... É um ótimo conteúdo, tenho certeza que vai ajudar muitos membros que venham a se aventurar na área de Spriting.

[Thayam 187]

Perfeito Thayam, eu também estava pensando em traduzir e trazer aqui pro TibiaKing, mas você foi mais rápido, enfim... É um ótimo conteúdo, tenho certeza que vai ajudar muitos membros que venham a se aventurar na área de Spriting.

Muito Obrigado mestre!

 

Já estou traduzindo mais alguns para trazer para cá haha

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