Pixel Art Básico: Criando chars a partir de um template ~ Vampire Killer Team

TUTORIAL VKT – CONSTRUINDO UM SPRITE A PARTIR DE UM TEMPLATE

Olá amigos! Aqui quem fala é a Super Athena (Ou Super Tifa). Venho trazer para vocês um
tutorial bastante interessante de pixel art, de minha autoria: “Como fazer sprites a partir de um
“template”, que em bom português, significa “modelo”. Neste tutorial, vocês irão aprender o básico para fazer um sprite bonito e bem feito, a partir de um modelo definido, para ser usado da maneira que desejar, seja para fazer jogos ou emoticons para a web. Este tutorial serve para qualquer um que não entende muito de pixel art, mas que passará a ter as noções básicas desse estilo tão legal de arte digital. Bem, chega de conversinha, vamos trabalhar pessoal!

INDICE:
1 – FERRAMENTAS
2 – CONCEITUALIZANDO
3 – TRABALHANDO:

CONSTRUINDO O DESENHO DO SPRITE SOBRE O MODELO
FORMAS DE PREENCHIMENTO, SOMBREAMENTO E ILUMINAÇÃO
ACABAMENTO

4 – CONCLUSÃO E CRÉDITOS

FERRAMENTAS

Para começarmos, iremos precisar de alguns itens além do programa de pintura, que juntos
facilitarão o nosso trabalho. Vamos à lista:

1. Um editor de Bitmaps (MS Paint por exemplo.)
2. Uma paleta de cores personalizada
3. Uma referência e um conceito do que criar
4. Paciência, muito treino e dedicação; São fundamentais.

Visto que já sabemos do que vamos precisar, já podemos começar. Então ligue o player no seu som favorito, e mãos à obra!

CONCEITUALIZANDO

É necessário termos uma ideia a respeito do que queremos criar, e quanto mais clara e precisa for essa ideia, melhor. Para o nosso tutorial, eu escolhi criar um sprite baseado em Adol, protagonista da saga “Ys”

O critério de escolha foi a armadura metálica de Adol, por ser reluzente, e precisa de maior
cuidado com seus efeitos em um char. Seria então interessante ver se conseguimos transmitir esse aspecto metálico para um sprite bem menor sem causar uma péssima impressão.
Antes de desenhar o sprite, precisamos de uma paleta. A criação de paletas de cores exigem
também um grande cuidado, pois são elas que fazem toda diferença. Veja a paleta do Adol, que montei usando a ferramenta conta-gotas do MS paint :

Já devem ter notado que limitei a minha paleta com o mínimo de uma cor (como o verde e o azul
por exemplo) e o máximo de 6 cores (roxo metálico, vermelho e marrom-claro).
Calma, já já vamos por a mão na massa! O principal está faltando, basta olhar o título do tutorial
e vai saber perfeitamente do que estou falando, hehe. Entre tantos “modelos” que são usados para o RPG Maker, eu decidi usar o do Hatsuyakanzaki-kiva, O “Koemushi”. Este modelo tem um excelente visual, bonito e simples, além de não dar muito trabalho para “pixelizar”.

Pronto, já podemos começar!

TRABALHANDO

• CONSTRUINDO O DESENHO DO SPRITE SOBRE O MODELO:
Como diz o próprio título, esta etapa consiste em desenhar as formas do sprite desejado sobre
o template. Uma imagem vale mais que oito mil palavras:

Muito bem, o próximo passo é simplesmente colorir, sem fazer nenhum sombreamento por enquanto.

Sendo assim, vamos para o próximo passo.

• FORMAS DE PREENCHIMENTO, SOMBREAMENTO E ILUMINAÇÃO

Agora começa a diversão! Esta é a parte do pixel art mais importante: o preenchimento do
sprite. Não seria correto dizer que o sprite colorido na etapa anterior está em sua forma final. O que eu fiz ali foi separar e definir a camada de cores, para orientar a pessoa a escolher as demais cores de preenchimento de maneira precisa e correta. Mas, o que você entende por “preenchimento”? Veja as imagens abaixo.

Pois é. Muitos pixel artists novatos costumam usar esses tipos de preenchimento. À esquerda
temos o gradiente bilinear, que é uma variação de uma cor (nesse caso tonalidade da cor) para outra e depois voltando para a mesma na outra borda. À direita, o clássico pillow shade, onde se contorna com cores claras ou escuras a forma do sprite. Ambas as técnicas são dispensáveis, pois empobrecem completamente o sprite e o deixa sem definição. Em outras palavras...

Assim, é necessário evitar ao máximo fazer isto, pois estas formas de preenchimento dão um
aspecto feio, como se fossem iguais aos dos blocos da direita, na imagem. Mas isto quer dizer que pillow shading e gradiente são totalmente condenáveis? De forma alguma. Se forem trabalhadas
corretamente, ambas técnicas podem ser usadas para representar plataformas metálicas, grades, placas de metais reluzentes, concreto simples (sem textura), luzes neon, entre outros. Sendo assim, ponham na mente que são dispensáveis quando se trata de sprites de natureza viva, como pessoas e animais, que possuem forma e anatomia.

Então, como fazer o preenchimento correto do sprite? Bem, isso se constitui na seguinte
ordem: Contorno, cor, luz e sombra. O resto são detalhes adcionais. Como já temos a cor e o contorno, vamos à iluminação, o famoso contraste luz-sombra.

Para isto, precisamos saber o que é um ponto de luz, que basicamente é um ponto de origem, de onde provém a luz. Como assim? Veja o sol e a terra, por exemplo. O sol pode apenas iluminar uma metade da terra, enquanto que a outra fica totalmente escura, até a terra se rotacionar e fazer com que a luz do sol atinja a escura, clareando-a(por sua vez, a que estava clara passa a ser escura). Este é um exemplo clássico de ponto de iluminação. A luz pode vir de qualquer direção, mas por padrão, o ponto que vai ser usado no nosso tutorial vai ser a luz natural do sol, porque assim, o sprite pode se adaptar a qualquer ambiente em que esteja. Veja a imagem, se não entendeu o que falei vai sacar na hora:

Interessante, não? Eu transmiti para a forma do sprite o ponto de iluminação, para entenderem
melhor o que estou falando. Mas atenção, não vá preencher o char igualmente ao estilo da imagem à direita! Você deve levar em conta os elementos do sprite, isto é apenas um exemplo.
Tudo bem, sei que é meio chato ficar lendo um monte de teorias, mas paciência, o melhor está
por vir. Finalmente, hora de fazer o sprite: Vamos utilizar aquele primeiro char, que foi simplesmente pintado sobre o template.

Perfeito. Decidi iniciar pelo cabelo, onde pintarei as extremidades inferiores (somente as debaixo, levando em conta o ponto de luz) com uma cor um pouco mais clara que o contorno e um pouco mais escura que a cor atual do cabelo. Quanto ao brilho dos fios, deve ser levada em conta a textura do cabelo do sprite, se é liso , cacheado, curto, grisalho, ou seja, se quer realidade, vai ter que prestar muita atenção nos mínimos detalhes. Não entendeu nadinha, né? Veja:

veja, na ultima figura da sequência, o brilho da ombreira da direita está direcionado assim como o brilho da ombreira da esquerda, pois foi levado em conta o ponto de iluminação. É importante evitar girar a parte da imagem ao contrário e colar em cima da outra que é similar, pois ai a iluminação vai se espalhar e fugir do alcance do ponto, fisicamente sendo algo sem noção:

Certo. Comparando os processos, e observando muito, é possível concluir todo o resto:

• FINALIZANDO
Estamos chegando à reta final. Muitos já iriam logo declarar o seu sprite pronto, mas ainda
falta alguns detalhes, como Anti-Aliasing (AA). A técnica funciona para tirar aquele serrilhado da
imagem, suavizando a imagem no fundo. No contraste entre uma cor escura e clara, é inserida entre elas umas cor intermediária, algo desse gênero:

Mas visto que, queremos utilizar o sprite em qualquer fundo, não seria nada prudente fazer AA fora do sprite, mas sim dentro dele e em seus contornos.

Além de AA, coloquei no sprite elementos adicionais:

Pronto. Vamos comparar com a proposta inicial?

CONCLUSÃO

Bem, chegamos ao fim do tutorial! Espero que tenha saciado as dúvidas e que também tenha
conseguido transmitir com eficiência o conteúdo do tutorial, e que através dessa aula, consigam fazer sprites bonitos. O segredo também está na persistência, muito treino e dedicação, sem parar de consultar aulas de pixel art. E olha, recomendo que vejam outros tutoriais, comparem as ideias e continuem a fazer pixel art por um bom tempo (eternamente, se Deus quiser \o/ ).
É ISSO AI GALERA! PIXELIZEM!!!

CRÉDITOS:

• A Hatsuyakanzaki-Kiva , pelo template maravilhoso utilizado no tutorial, o Koemushi
• Aos tutorias do Derek Yu, que mudaram meu conceito de Pixel art
• A todos vocês, que leram este tutorial e aqueles que curtem meu trabalho!

Kisses and PIXELIZE!
Download - Aula versão PDF