[Tutorial] O guia do Pixel Art

Depois dos excelentes feedbacks de nossos tutoriais sobre como criar um personagem em pixel art e como animar um personagem em pixel art, estamos trazendo um artigo completo que abrirá seus olhos para esse estilo artístico.

Este tutorial foi desenvolvido para explicar o que é pixel art, o que não é pixel art, como começar a fazer e como melhorar sua arte.

Mas, caso tenha interesse em aprender do zero Pixel Art, mesmo que nunca tenha desenhado saiba que temos um curso completo para te ajudar.

Onde você poderá se aprofundar ainda mais nas técnicas mais avançadas de Pixel Art, e descobrir os segredos dos melhores Pixel Artistas, clique na imagem ao lado e se surpreenda com o que os nossos alunos têm criado.

Pois, neste curso te ensinaremos muito mais do que apenas animar um personagem, mas a dominar de vez a pixel art!

E até quem sabe, trabalhar algum dia criando artes pra jogos, com tudo que você vai aprender…já pensou que bacana!

Mas antes diz ai você sabe o que é Pixel Art?

O que é pixel art?

A julgar pelo nome, podemos supor que pixel art é qualquer arte composta de pixels. Mas nem toda imagem digital é pixel art. Esta fotografia abaixo é feita de pixels, mas não é arte de pixel:

Mas se eu faço minha arte no computador, então é pixel art, certo? 
Não. Pixel art é uma subcategoria muito específica da arte digital. Não é o que é feito mas sim como é feito. Por exemplo, essa pintura digital abaixo é uma arte feita no computador, e é feita de pixels, mas não é pixel art:

Porquê nem toda arte digital é pixel art?

O pixel art é diferente de outras artes digitais por conta de seu foco no controle e precisão que o artista criador deve ter. Ele tem que criar uma imagem unindo um conjunto de pixels, colocando um por um, de maneira a se criar uma imagem final composta de milhares de pequenos pixels.

Basicamente, se uma ferramenta for usada para criar pixels automaticamente (por exemplo, o balde de tintas do Paint ou Photoshop), significa que o computador está tomando decisões sobre o posicionamento dos pixels, em vez do artista. Neste caso, não é considerado pixel art.

Além disso, pixel possui outras duas características únicas: o uso das cores através de suas paletas bem definidas e o tamanho minúsculo das artes.

Por onde eu começo?

Antes de colocar a mão na massa, existem alguma sugestões extremamente importantes que todo iniciante deve seguir.

Comece pequeno – Quanto maior a imagem que você está tentando fazer, mais tempo e trabalho será necessário para completá-la. Comece criando uma pequena tela. Você ficaria surpreso com o pouco espaço que você precisa para se criar pixel art.

Limite sua paleta – Usar uma paleta pequena é especialmente bom para iniciantes, pois força você a se concentrar no posicionamento de pixels e nas relações entre grupos de pixels. A paleta original de 4 cores do GameBoy é uma boa escolha para iniciantes.

Softwares – Do Paint ao Photoshop, existem milhares de programas que você pode usar para criar suas artes em pixel. Além dos dois citados, você pode optar também por: GIMP, Pyxel Edit, AseSprite, Grafx2 e Pixen.

Tipo de arquivo – Um erro comum cometido por novos artistas de pixel é salvar sua arte como JPEG/JPG. Embora esse tipo de arquivo possa ser bom para outros tipos de imagens, ele causa compactação, o que destrói a qualidade de uma peça de pixel art. Nunca salve como JPG. Em vez disso, salve como PNG ou GIF.

Objetivo

Você deve estar querendo praticar pixel art por alguma razão, certo? Tenha algum “propósito” ou meta para o que você está desenhando, isso vai te ajudar bastante. Por exemplo:

“Eu vou desenhar alguns arbustos para o meu jogo”
“Eu vou praticar formas do corpo”
“Eu vou brincar e encontrar uma paleta agradável”
“Eu vou explorar diferentes formas de desenhar pedra”

Tamanho e Escala

Lembre-se: A escala é a coisa mais importante de um pixel art!

A razão pela qual a escala é importante é porque nos ajuda a garantir que o que estamos desenhando não seja ridiculamente irrealista! Além disso, quanto maior for a área a ser criada, mais trabalho você terá. Quer um exemplo mais visual? Confira:

Tamanho 8×8 – Uma tela pequena, com poucos detalhes e pouco trabalho.

Tamanho 16×16 – Tamanho médio usado por artistas em geral, recomendado.

Tamanho 32×32 – Uma tela grande, que exigirá mais detalhes e trabalho.

A Paleta de pixel art

As paletas de cores são organizadas e formadas em torno da ideia de que elas trabalham juntas, para permitir que você, como artista, pinta de uma maneira harmoniosa.

Existe um número incontável de paletas por aí. Então qual escolher?

Abaixo deixarei um exemplo de paleta bastante utilizada. Confira:

Respectivos códigos hexadecimais das cores na barra superior (da esquerda para direita): 

#e4a672 #b86f50 #743f39 #3f2832 #9e2835 #e53b44 #fb922b #ffe762
#63c64d #327345 #193d3f #4f6781 #afbfd2 #ffffff #2ce8f4 #0484d1

Porém, se você quiser se aprofundar um pouco mais nesse estudo das cores, existem 3 outros tipos de paletas para pixel art criadas por artistas experientes. Caso queira saber mais, você pode conferi-las: Paleta de Arne 16, Paleta DawnBringer32 e Paleta Pico-8.

E como uma última opção, você pode acessar ao Lospec, um site que contém um gigante banco de dados de paletas para pixel art. Você pode conferir clicando aqui.

Pintura com pixels

Existem 6 etapas básicas para se desenhar um sprite. Dê uma olhada na imagem a seguir:

Aqui temos o exemplo de um sprite rápido de se fazer de uma planta parecida com uma palmeira com formas muito básicas. Uma coisa interessante é usar um pincel/lápis de 2×2 pixels. Isso pode fazer a sua arte parecer um pouco mais volumosa e mais harmoniosa para os olhos.

1. Aqui começamos com uma “moita” aleatória, que será as nossas folhas.
2. Este é o primeiro estágio de iluminação das folhas. Talvez seja interessante ir de cima para baixo em 45 graus, mas você pode ir de qualquer direção.
3. Este é o segundo e último estágio de iluminação das folhas. Pense no volume e brinque com o quanto de brilho existe naquelas folhas.
4. A forma básica do tronco é colocada.
5. A iluminação do tronco é colocada. Agora, lembre-se que as folhas geram sombra. E profundidade é incrivelmente importante para tornar a sua arte incrível! Então há uma sombra vindo das folhas no tronco.
6. Última camada de iluminação feita e alguns detalhes extras.

• • Dê à luz uma direção agradável;

• • Lembre-se de que apesar de ser uma imagem 2D, devemos passar uma ideia de 3D. Logo, mantenha sempre a profundidade em mente;

• Tente manter as formas limpas, não exagere demais na mistura das cores.

Personagens e Técnicas

Saca só o processo criativo do personagem abaixo:

O personagem acima foi criado a partir de uma tela de 32×32 pixels de tamanho, isso permite que o personagem possa ser mais alto (ou largo, se preferir).  O mais interessante, é que conforme podemos visualizar no primeiro frame (à esquerda), o personagem foi esboçado aleatoriamente com a ferramenta lápis para só depois ser finalizado.

Então você pode simplesmente criar algumas “bolhas” na tela e ir preenchendo, até formar alguma coisa e você torná-las vivas! Perceba também os detalhes das cores e iluminações, que são extremamente importantes no pixel art.

Reserve algum tempo e tente criar um personagem. Se você precisar redesenhar algumas vezes, não tem problema. Afinal, poderão acontecer várias tentativas até chegar a um ponto perfeito para você.

Linhas e curvas

Aqui está um dos erros mais cometidos por iniciantes em pixel art: o mal ordenamento de linhas e curvas em pixels. Confira as duas imagens abaixo, as linhas da esquerda foram criadas de maneira desordenada e as da direita, foram feitas da maneira correta:

Mas qual o segredo por trás disso? Bom, quando se trata de desenhar linhas, é importante manter a matemática em mente. Como assim? Pense em múltiplos de 1, 2, 3, 4 e etc.

No primeiro exemplo, as linhas vão de uma ponta a outra seguindo, obrigatoriamente, a cada 2 ou 1 pixel. Isso mantém as coisas “limpas” e evita linhas aleatórias bagunçadas.

No segundo exemplo, as curvas seguem um pré-ordenamento numérico, sendo, no caso, 1,1,2,3,8,3,2,1,1,1.

Outro exemplo de linhas e curvas:

Delinear

Caso você opte por delinear o sprite, deverá seguir a regra para a forma inteira, ao invés de apenas o contorno. Por exemplo:

• Na primeira imagem, temos o personagem sem contorno, o que está bem agradável visualmente.
• Na segunda imagem, temos um contorno apenas em volta dele. Além de deixar visualmente horrível, é uma má prática.
• Na terceira imagem já temos a aplicação da técnica de delineação correta.
• Na quarta imagem, temos o personagem com cores ainda mais escuras nas linhas para dar mais profundidade, o que torna o efeito realmente incrível.
• Lembre-se: jamais use a cor preta para delinear, mas sim uma cor extremamente escura.

Outro exemplo de contorno bem aplicado:

Saturação

O problema mais comum que os novos artistas encontram em relação à saturação é o uso de cores com saturação muito alta. Quando isso acontece, as cores começam a queimar os olhos. Na imagem abaixo, observe como as cores na segunda imagem (à direita) são muito mais suaves para os olhos:

Criando rochas

A simplicidade é a chave do sucesso, quando falamos de pixel art. Quer um exemplo disso? Confira essa rocha criada abaixo:

As rochas são relativamente fáceis de construir. Tendo em mente que uma pedra é formada por camadas e pedaços, ficará fácil de criar a sua, não exigindo uma paleta complexa de cores.

Criação de armas e itens

Desenhar armas e itens é processo muito simples. Você não precisará ser tão preciso assim. Dê uma comparada nos designs abaixo, da esquerda para a direita:

• Primeiramente, confira que todos os itens em questão foram criados em uma tela de 16×16 pixels.
• Os itens à esquerda utilizam de técnicas simples. Os da direita foram finalizados da forma correta.
• Pequenos detalhes fazem a diferença: dê detalhes a uma picareta de que ela foi utilizada; dê a uma espada algumas rachaduras; faça o pão meio comido, etc.
• Lembre-se: cada pixel conta.

Conclusão

Não subestime esse estilo artístico por parecer “velho”. O pixel art é usado – e muito – até hoje em projetos de variados tamanhos. Inclusive, o game Celeste foi feito em pixel art e “mesmo assim” ainda concorreu ao prêmio de melhor jogo do ano de 2018 contra o God of War 4 e Red Dead Redemption 2.

Espero que essas dicas possam te dar uma boa direção para criar suas próprias artes em pixel art. Lembre-se de praticar bastante, afinal, a prática leva a perfeição.

Você pode ainda conferir o nosso curso exclusivo sobre design de jogos 2D, com foco especial em pixel art, clicando aqui.