[Tutorial] Criando um personagem em Pixel Art

Você já ouviu falar de Pixel Art? É um estilo artístico muito utilizado em diversos tipos de jogos. À primeira vista, lembra muito jogos antigos, mas o Pixel Art vai muito além da nostalgia. Neste tutorial de pixel art, iremos te ensinar a criar o personagem abaixo:

Antes de iniciarmos, você sabe o que é o Pixel Art? Trata-se de um estilo artístico extremamente utilizado principalmente por desenvolvedores independentes e por alguns motivos.

1. A arte fica incrível! Aquele design “quadradinho” dá um charme a mais para qualquer jogo.
2. Nostalgia. Sim! O Pixel Art nos remete à nostalgia dos jogos antigos, principalmente quem cresceu jogando em consoles como o Nintendo, Super Nintendo e afins.
3. Fácil de aprender. Quem domina Pixel Art brinca que até um programador é capaz de aprender também! Então, vale a pena dar uma estudada no assunto.

Então vamos aprender a criar um personagem simples? Garanto que o aprendizado deste tutorial te tornará capaz de criar várias outras coisas posteriormente.

Ah! O único requisito que teremos para este tutorial será você possuir um software que permita criar pixel art. Você pode usar o Piskell (software gratuito) ou o Adobe Photoshop.

E caso você tenha interesse em 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.

Afinal, o que é o Pixel Art?

Antes de iniciarmos o tutorial, é importante explicarmos a diferença entre uma arte Pixel Art e uma arte convencional, e o jeito mais fácil de definirmos isso é explicando o que não é um Pixel Art.

Gradientes: Duas cores dividindo um espaço e sendo “mescladas” entre si. Pode ser bonito, mas não é Pixel Art.

“Borrões” / Desfoques: Imagens levemente desfocadas e editadas para serem mescladas com outras imagens. Novamente não é um Pixel Art.

No final, pixel art tem tudo a ver com grande cuidado com a colocação de cada pixel em um sprite, na maioria das vezes manualmente e com uma paleta limitada de cores.

Começando

Regra número 1 do Pixel Art: ele não é facilmente redimensionável!  Se você tentar reduzi-lo, vai parecer uma bagunça. Se você tentar escalá-lo, ficará “pixelado”.

Então para evitar esse tipo de problema, planejar bem qual será o tamanho do seu personagem – ou arte a ser criada – é fundamental. Claro, isso deve ser baseado no tamanho de tela em que a arte aparecerá e no tamanho que você deseja que seja exibida.

Supondo que você queira que sua arte apareça em uma tela de Smartphone com a resolução de 480×320 pixels, a resolução ideal seria a metade disso, 240×160 pixels.

Vamos abrir o Photoshop e criar um novo documento (Arquivo > Novo) e crie um novo arquivo com o tamanho de 32×32 pixels.

Criando o personagem

Pixel Art é um estilo artístico no qual podemos facilmente identificar elementos na arte criada, tais elementos como um rosto, olhos, partes do corpo, etc. Mas quanto menor for o seu personagem, mais difícil será de criar isso.

Com isso, sempre faça as partes mais legíveis de um personagem. Você pode sempre criar os olhos, por exemplo, já que eles sempre dão uma vida ao personagem.

Com o Photoshop aberto, selecione a ferramenta Lápis. Se estiver difícil de encontra-la, basta clicar em cima da ferramenta Pincel e segurar, a opção da ferramenta Lápis será a segunda a ser exibida. Na barra de ferramentas na parte superior, definiremos o tamanho do Lápis para 1.

Uma outra ferramenta que você precisará bastante é a Borracha! Então clique nela (ou se preferir, pressione a tecla E) e mude nas opções da barra superior o “Mode” da Borracha para “Pencil”, conforme o exemplo abaixo:

E mãos na massa! Comece criando duas sobrancelhas e um olho em cada, conforme o exemplo:

Show de bola! Já demos o primeiro passo! Agora vamos partir para o corpo.

Poderíamos desenhar todo o corpo do personagem de uma vez. Entretanto, é muito mais fácil e prático fazermos uma silhueta antes de criarmos os detalhes do corpo do personagem. Não precisa ser perfeito, apenas tente reproduzir a pose inicial do personagem e seus membros, conforme a imagem:

Você não precisa preencher a tela inteira, até porque criaremos alguns pixels por cima das “linhas” do personagem ainda, para dar um efeito mais bonito na imagem.

Com a silhueta pronta, iremos iniciar o lineart. Trata-se do momento em que definiremos os traços do personagem. Recomendo fortemente que você crie uma nova camada no Photoshop só para o lineart.

> Veja também o nosso ebook sobre os passos para criar um jogo de sucesso!

Aplicando cor e sombreamento

Agora vamos dar vida ao nosso personagem! Você pode, por enquanto, apenas utilizar as cores padrão do próprio Photoshop (Janela > Amostras).

Vá em frente e não tenha medo de ser feliz! Aplique as cores que desejar em seu personagem. A única dica que darei é de usar cores com um bom contraste, para facilitar a “leitura” da imagem. Aqui mostraremos um exemplo, mas pode seguir conforme achar melhor, segue:

Para facilitar o processo, você pode experimentar utilizar a ferramenta Balde de Tinta, ao invés de ir colorindo pixel por pixel com o Lápis. Selecione o Balde de Tinta (ou pressione a tecla G) e a configure para ter a tolerância 0 e desmarque o “Anti-alias”:

Agora vou dar uma dica bastante legal. Para dar um grau maior de qualidade visual à sua criação, é interessantíssimo colocarmos sombras no personagem. Caso você ainda não tenha prática com desenhos, isso pode ser algo difícil. Porém, para facilitar, basta tomar a referência abaixo como modelo e utilizar no seu:

Você também pode dar alguns efeitos de luzes e mais clareza na roupa do personagem, conforme o exemplo:

Melhorando a sua paleta de cores

Utilizar somente a paleta de cores padrão do Photoshop poderá te limitar um pouco. Mas sabia que você pode criar as suas facilmente? Basta clicar na paleta principal na parte inferior da barra de ferramentas.

Em seguida, a janela “Color Picker” abrirá e nela você poderá configurar da maneira que achar melhor a sua cor, podendo deixá-la mais clara ou escura ou mesmo mais ou menos saturada, veja:

Fique a vontade para colorir e apimentar as suas cores. Deixe o seu personagem o mais chamativo o possível.

Por fim, faça testes com o fundo, criando uma camada e a colorindo para testar como o seu personagem reage a certas cores de background:

Dica extra: Como editar um Pixel no Photoshop?

Você pode utilizar alguma ferramenta de seleção (tecla M) e demarcar alguma área do seu personagem a ser modificada e pressionar Ctrl + T para selecionar a ferramenta Free Transform, assim você será capaz de redimensionar ou rotacionar a área selecionada.

Mas é interessante você desmarcar o “anti-alias” da ferramenta Free Transform, para que todas as cores que você aplicou sejam preservadas mesmo após uma edição na parte selecionada. Para isso, vá em Edit > Preferences > General (ou Ctrl + K) e mude a “Image Interpolation” para “Nearest Neighbor”.

Pronto! Assim nós temos um personagem totalmente feito em Pixel Art!

Caso você queira se aprofundar ainda mais no assunto, você pode ainda conferir o nosso curso exclusivo sobre design de jogos 2D, com foco especial em pixel art, clicando aqui.

Créditos do tutorial: Raywenderlich

Gostou desse artigo? Temos mais em nosso blog: www.crieseusjogos.com.br

Também temos vídeos toda semana em nosso canal do Youtube: Crie seus jogos – Youtube

Baixe gratuitamente: os passos para desenvolver jogos de sucesso