Tutorial de Pixel Art II

Compartilhar:

Autor

Bem, vamos continuar o tutorial do Derek. Dessa vez focando no sombreamento e finalização da sua pixel art.

 6. Sombreamento

Sombreamento é um passo importantíssimo em sua jornada para se tornar um deus da pixel art. É aqui que o sprite vai ficar lindo ou horrível. Ouça minhas palavras e você obterá o sucesso.

 Passo 1: Escolhendo uma fonte de luz

Primeiramente, temos que escolher uma fonte de luz. Se seu sprite for se integrado em uma cena grande, é possível que a luz venha de diversas fontes (como lâmpadas, fogo, lâmpadas pegando fogo, etc…). Isso pode tornar o processo de criação do slide em algo mais complexo. Para a maioria dos casos no entanto, escolher uma fonte de luz distante (como o sol, por exemplo) é uma ideia melhor. Para jogos, você vai querer um sprite que possa servir em qualquer situação.

Geralmente eu escolho uma fonte de luz distante, a cima e do lado do sprite. Assim todas as partes do corpo recebem um bom sombreamento. Esse tipo de luz parece bem natural quando aplicada um slide.


 2º Passo: Aplicando o sombreamento

Uma vez que a fonte de luz já esteja definida, devemos começar a sombrear as áreas mais longes da fonte de luz com uma cor mais escura. Nossa fonte, em sentido noroeste em relação ao sprite, indica que as partes mais escuras devem ser as partes de baixo dos braços, da cabeça, das pernas, etc…

Lembre-se de que o contraste entre o claro e o escuro vão indicar as coisas que não são planas. Pegue uma folha A4, embrulhe-a e então abra ela. Como você percebe que ela não é mais reta? É porque as deformações geram sombras, coisas que não existiam antes. Use o sombreamento para tornar visíveis os amassos das roupas e para definir musculatura, cabelo, pelos, rachaduras, etc….

 Passo C: Sombras leves

Um segundo sombreamento, mais claro que o primeiro, deve ser usado para as sombras leves. Essas são as áreas que estão sendo afetadas indiretamente pela luz. Essa técnica também pode ser usada na transição do claro para o escuro, principalmente em superfícies curvas.

Último passo: destaques

Lugares que estão sendo atingidos diretamente pela luz devem possuir destaques. Destacamentos devem ser usados com moderação (muito mais do que as sombras), porque eles puxam muita atenção e podem acabar distraindo a pessoa.

Sempre aplique os destaques após o sombreamento. Se as sombras não estiverem presentes quando você for colocar eles, pode acabar fazendo-os muito largos.

Dicas e desaconselhamentos (principalmente desaconselhamentos)

O sombreamento é a parte em que a maioria dos iniciantes se da mal. Aqui estão algumas regras pra você seguir enquanto estiver fazendo sua pixel art.

 1. Não use gradiente. O maior erro dos iniciantes. Gradiente da uma aparência horrível  e não chega nem perto de simular a luz de forma realista.

2. Não faça o “Pillow-shading”. Pillow-shading é quando você faz um sombreamento que indica que a luz está vindo de dentro do objeto, e não de uma fonte exterior. Ainda pode se referir também a um sombreamento que não condiz com a posição da(s) fonte(s) de luz.

Imagem relacionada
Pillow-Shading / Sombreamento correto (vindo de uma fonte de luz específica)

3. Não coloque muitos tons para as sombras. É fácil pensar “Mais cores = mais realista”. No entanto, no mundo real, tendemos a ver as coisas como grandes peças escuras e claras. Nossos cérebros excluem qualquer coisa que esteja no meio. Tente se limitar a dois tons de preto (escuro e muito escuro) e dois tons de luz (claro e muito claro).

4. Não use cores muito parecidas. Não existe razão para usar duas cores que sejam quase iguais. A não ser que você queira que os sprites fiquem turvos.

 7. Dithering

Conservar cores é algo que sempre faz os artistas de pixel art ficarem preocupados. Um jeito de conseguir mais sombreamento sem usar mais cores é uma tecnica chamada “dithering”. Você vai pegar duas cores e entrelaça-las para obter um tom que fica entre as duas.

 Exemplo básico

Aqui está um exemplo simples usando duas cores para criar quatro tipos diferentes de sombras usando o dithering.

 

 Exemplo avançado

Compare a figura de cima, que foi feita usando o gradiente do photoshop, e a de baixo, que foi criada com três cores diferentes e teve o dithering aplicado. Note que as três cores diferentes foram utilizadas para criar cores intermediárias. Tente usar cores diferentes para criar outras texturas.

 Aplicação

Dithering pode proporcionar ao seu sprite um visual retro, já que uma porrada de jogos antigos usava essa técnica devido a sua palheta limitada de cores. Não é uma coisa que eu uso seeeeeempre, mas resolvi colocar no nosso sprite (talvez tenha até abusado um pouco) para que vocês possam visualizar.

Você pode usar o dithering o tanto quanto quiser. Pra falar a verdade, essa é uma técnica que poucas pessoas usam.

8. Detalhando o contorno

Detalhar o contorno, conhecido também como “selout”, é como sombrear o contorno. Ao invés de usar preto no sprite todo, nós aplicaremos um tom que se assemelha mais a cor do sprite em si. Lembre-se de escurecer essa cor a medida que a linha se afasta da fonte de luz.

Até aqui nós mantivemos o contorno preto. E não tem nada de errado com isso, já que deixa o sprite bem bonito e o separa bem do resto do ambiente, deixando claro qual é a forma do sprite. Mas, quando usamos apenas o preto, estamos sacrificando o realismo que nos também curtimos, já que deixa o sprite com um jeito meio “cartoonizado”. O  Selout é uma boa forma de contornar esse problema. (piada não intencional)

Você pode perceber que eu usei o selout para tornar mais suave as dobras dos seus músculos. Assim, o sprite passa a parecer algo mais realista ao invés de um monte de peças separadas.

Comparando com o original:

 

 Na ultima parte, que chega semana que vem, vamos ler sobre anti-aliasing e finalização, além de algumas dicas finais.

Parte 1
Parte 3

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Posts Relacionados