Tutorial de Photoshop: Como criar um pixel art animado com personagem de vídeo game

Antes da animação, faremos uma visão estática do personagem, e antes de fazer isso, vamos precisar descobrir sua melhor aparência.

Este tutorial, é uma tradução de envatotuts+.

Passo 1

Não é um passo tão necessário se você estiver apenas seguindo esse tutorial exatamente, mas foi parte do meu processo: Desenhar o personagem.

Esbocei apenas a cabeça. Tentei algumas opções diferentes e acabei escolhendo esse modelo.

esse modelo

Passo 2

Para tornar o coelho em pixels, comecei a desenhar os olhos diretamente no Adobe Photoshop. O esboço não foi usado além do que apenas para definir o estilo.

Se você nunca fez pixel art, você vai ter que criar um Novo Arquivo no Photoshop não muito grande, pode ser de 400px*400px. Você vai precisar trabalhar com uma alta taxa de zoom (como 700%) e usar a Ferramenta Lápis para desenhar um pixel de cada vez. Eu recomendo que mantenha uma segunda janela do mesmo arquivo aberta a 100% ou 200% de zoom, para que você possa alternar entre as janelas e verificar o progresso sem zoom.

Eu não vou seguir um tamanho pré-definido do sprite (personagem), mas vou fazer o personagem o menor possível, mantendo suas características principais. É por isso que os olhos são um bom ponto de partida.

Os olhos serão simplesmente duas linhas, uma ao lado da outra. Cada olho tem 3px de altura por 1px de largura, e uma cor quase preta.

cor quase preta

Passo 3

Com os olhos feitos, você pode prosseguir com o nariz do coelho, além de alguns outros detalhes. Tudo bem se só temos linhas simples até agora.

linhas simples

Passo 4

Agora podemos suavizar algumas dessas linhas. Também já estou adicionando alguns dentes na frente da boca, porque os coelhos tem dentes da frente grandes.

dentes

Passo 5

Vamos colocar um sorriso na boca.

sorriso

Passo 6

Vamos adicionar algumas orelhas. Agora, elas estão apontando para cima, poderia ficar legal também com este personagem, mas vamos dobrá-las um pouco.

As orelhas tem que ser as mais finas possível, com apenas 1px no interior e, em seguida, os pixels de contorno nas laterais.

orelhas pro alto

Passo 7

Aqui está uma orelha dobrada, apontando para baixo.

orelha dobrada

Passo 8

E a orelha seguinte, se dobra para baixo da mesma maneira.

dobra

Passo 9

Agora, para terminar a abeça, vamos dar ao coelho um rosto relativamente grande e inchado.

rosto

Passo 10

E agora, podemos desenhar um corpo sob a cabeça. Vamos fazer o nosso coelho antropomórfico, ou com uma forma semelhante a humana. O tronco será basicamente como uma forma de lágrima, gota.

gota

Passo 11

Vamos dar ao coelho pernas curtas e pés grandes. Podemos começar com apenas uma perna.

apenas uma perna

Passo 12

A perna de trás é do mesmo jeito que a da frente, mas movida ligeiramente para o lado, uma vez que se não fizéssemos isso, ela seria completamente bloqueada pela perna da frente.

perna de trás

Passo 13

Finalmente, mudei as pernas um pixel para a esquerda, porque acho que estavam um pouco fora do centro, e a perna da frente foi ligada a barriga, removendo o pixel que estava separando-as.

removendo

Passo 14

Só teremos um braço visível na posição em que ele está de pé. O braço terá uma forma de lágrima, mais ou menos.

Ele irá passar pela linha do tronco.

tronco e braco

Passo 15

Vamos apagar, removendo as linhas do tronco atrás do braço.

apagar

E agora, os contornos básicos do personagem estão prontos!

Agora, vamos dar o acabamento do sprite.

Passo 16

Escolha uma cor.

Qual a cor que você gostaria para o seu coelho? Eu escolhi um tipo de cor queimada e apliquei agora, em todas as áreas, exceto o nariz. Você pode preencher as áreas com o Balde de Tinta.

preenchido

Passo 17

Vamos dar ao coelho uma barriga branca bonita. Vamos colocar um pixel branco para os dentes da frente. O nariz terá um pequeno toque cor de rosa, mas a maioria será branca, como destaque.

branco

Passo 18

Agora, damos ao coelho algumas sombras: uma versão mais escura da cor da pele principal, aplicada em áreas onde a luz atinge menos. Este sombreamento pode ajudar a dar a textura nas bochechas se aplicá-lo com um certo padrão.

Nós estaremos mantendo os membros posteriores e as orelhas mais escuras do que os membros da frente. Assim, a perna de trás fica apenas a nova tonalidade mais escura e a orelha de trás fica na sua maioria com esta sombra, exceto no topo.

orelha preta

Passo 19

Estenderemos o sombreamento até a barriga branca. Eu adicionei uma cor cinza claro com uma tonalidade ligeiramente azul.

tonalidade

Passo 20

Alguns recursos ficam melhores com menos contraste, então vamos substituir algumas das cores quase pretas por um marrom escuro em alguns pixels internos, como a boca e o pescoço.

Também adicionaremos mais detalhes com este marrom escuro, para acentuar as bochechas inchadas.

acentuar

E agora o personagem, em sua posição de pé, está terminado.

Agora vamos dar ao coelho algum movimento. Vamos fazer uma execução em loop.

Esta animação pode ser feita com qualquer quantidade de frames, mas como este é um personagem pequeno, 6 frames são suficiente.

Passo 21

Vamos fazer os membros de outra maneira agora.

O tronco e a cabeça do coelho não vão mudar muito enquanto ele está em movimento, então nós vamos manter o que já temos praticamente constante, enquanto trabalhamos em todos os frames.

Deixei uma linha no fundo como referência para a altura da perna ou a posição do chão.

chão

Passo 22

Incline o tronco para a frente, simplesmente selecionando a cabeça e uma área abaixo do pescoço com a Ferramenta Marca de Seleção e, em seguida, empurre 1px para a direita (isso pode ser feito com a seta do teclado para a direita enquanto a Ferramenta Mover está ativa).

No final, movemos a cabeça 2px para a frente.

movemos a cabeça

Passo 23

Nós não rodamos completamente o tronco agora, o que significa que demos uma esticada, voltando ele um pouco mais. Então, para ajustar isso de volta, vamos diminuir o tronco na vertical em 1px e ajustar as linhas.

Vamos também mover o tronco em 1px mais perto da linha de fundo, porque as pernas vão ser flexionadas na maioria da animação em execução, e portanto, elas não devem ser da mesma altura.

pernas flexionadas

Passo 24

Para fazer as pernas, só precisamos trabalhar em um movimento da perna, pois o outro irá se mover da mesma maneira.

Assim, o movimento precisa ser como um pêndulo: a perna é dobrada através de mais de um movimento, exceto quando se estende para a frente (que é o primeiro frame).

Assim, estes seriam os seis quadros do movimento da perna (sinta-se livre para verificar mais referências de frames em execução). Observe a posição do pé ao fazer estes frames. Eles são feitos com uma cor brilhante para o contraste.

frames

Passo 25

Vamos trabalhar em todos os seis frames lado a lado.

Aqui estão os frames da perna, colocados sobre o coelho. Faça isso em uma nova camada.

Note que a perna não é presa a um ponto da cintura; Quando a perna vai para trás, ela está saindo da parte de trás do coelho, e quando ela vai para a frente, ela está saindo da frente do coelho, como uma extensão.

pernas tras e frente

Passo 26

Aqui está uma maneira rápida de começar a transformar as nossas linhas de orientação para as pernas finas. Primeiro, substitua a cor com a cor da pele (você pode fazer isso usando o Balde de Tinta verificando se a opção Contíguo está desmarcada) e, em vez de desenhar os contornos em torno das pernas, selecione a área branca em torno delas com a Varinha Mágica, e ajuste a seleção (Selecionar > Modificar > Ajustar…) em 1px. Em seguida, inverta a seleção (Selecionar > Inverter) e depois com a Ferramenta Balde (Contíguo desmarcado), preencha com a cor de contorno.

muita coisa

Passo 27

As pernas ainda não terminaram, mas vamos adicionar um pouco de salto para o coelho agora, porque isso vai influenciar na conclusão das pernas.

Nós vamos adicionar o salto, porque durante a execução não podemos esperar que o personagem fique sempre no mesmo nível. Então, vamos elevar o coelho até 1px no terceiro quadro, quando a perna de trás é mais alargada, empurrando o coelho para cima, e nós também vamos precisar adicionar o salto no sexto quadro, quando a perna oposta estará empurrando o coelho para cima.

Os quadros com o salto são marcados aqui com linhas de fundo roxas. As outras linhas de fundo foram transformadas em linhas 20% pretas que podem servir como sombras. Em um jogo de plataforma, essa sombra pode não ser necessária, mas por agora, ela vai fazer a animação parecer melhor.

sombra na animação

Passo 28

Para concluir a perna, temos que fazer um pé gordinho, conectando a perna ao corpo e também fazer um pouco de sombreamento.

Além disso, todas as linhas de fundo estão agora transformadas em sombras.

linhas de fundo

Passo 29

Agora que uma perna está terminada, temos apenas que copiá-la.

Depois de colá-la, vamos mover a nova perna em dois pixels para a direita, assim como as pernas que estavam um pouco espalhadas na posição de pé.

Agora, parece um pouco engraçado, porque ambas as penas estão se movendo da mesma maneira, que é realmente utilizável neste personagem, já que coelhos tendem a pular. Mas, nós vamos mudar isso para torná-las como se estivessem movimentando o coelho.

mudar isso

Passo 30

Para fazer as pernas se movimentarem, elas devem ter um ciclo alternado, de modo que quando uma perna é estendida para a frente, a perna oposta seja estendida para trás.

Porque nós temos seis quadros, o que significa que uma das pernas irá mover seus frames em três posições para um lado.

A nova camada de pernas deve está por trás da camada de corpo do coelho.

por trás

Passo 31

Para terminar a perna de trás, você deve simplesmente fazer uma sombra mais escura, se você quiser manter os membros posteriores mais escuros do que os da frente, como fizemos na posição de pé.

se qusier

Esta é a forma como os frames estão ficando até agora. Não se preocupe em fazer esta animação agora. Nós vamos terminar os gráficos e fazer a animação em loop de corrida no final.

loop de corrida

Passo 32

Agora é hora de adicionar os braços.

Eles vão se movimentar muito bem como estes. Eles estão dobrados em todo o ciclo de funcionamento, o único que se estende um pouco é o do primeiro quadro. No entanto, você pode tentar suas próprias variantes para alcançar estilos diferentes de movimento.

diferentes

Passo 33

Coloque os braços dos frames do corpo sobre uma nova camada, e dê-lhes a cor e contorno, exatamente como fizemos com as pernas.

como as pernas

Passo 34

E depois dê algum volume aos braços.

volume

Passo 35

E, finalmente, proteja-os para transmitir um volume adicional.

adicional

Passo 36

Em seguida, copie o braço. Crie uma nova camada atrás do corpo.

Passo 37

E, finalmente, dê sombra aos novos braços e mova-os para que fiquem em ciclos opostos aos originais.

Lembre-se que os braços movem-se em contradição com as pernas, de modo que quando a perna esquerda está na frente, o braço esquerdo deve estar na parte de trás.

contradição

Agora, está é a forma como os braços se parecem.

resumo

Passo 38

Vamos adicionar um pouco de movimento para a cabeça, para que não fique tão estática.

Vamos fazer as orelhas corresponderem ao movimento do coelho. Aqui, nos frames em que o coelho ligeiramente pula para cima, eu fiz as orelhas apontarem para baixo, já que a inércia é mante-los para baixo, enquanto o coelho está ignorando.

ignorando

Passo 39

Sobre os frames depois do salto, eu fiz as orelhas menos curvas e mais abertas, apontando para a frente.

apontando

Passo 40

E, finalmente, eu fiz a pele do rosto se mover também. Como as orelhas, um pouco menor quando o coelho pula para cima e um pouco maior após o salto.

após o salto

E aqui está o resultado quase pronto!

quase pronto

Passo 41

O último pouco de trabalho que teremos será no tronco, pela primeira vez vamos animar a mancha branca na barriga. O peito deve estar virando um pouco enquanto o coelho corre, então a mancha branca deve responder a esse movimento.

Assim, quando os braços dianteiros apontam para a parte de trás, devemos ter mais da mancha branca visível, e menos quando os pontos de braços dianteiros se movem para a frente.

mais e menos

Passo 42

Nós não precisamos fazer a cauda quando o coelho estava de pé, mas agora que ele está correndo, parece que a cauda deve aparecer.

Então, primeiro eu coloquei uma marcação onde eu acho que a cauda deve ficar, um quadrado vermelho. Ele vai em uma nova camada, e agora pode ser em cima das outras camadas.

em cima

Passo 43

Agora, dê a cada um, um pouco de cor, sombras e contornos.

um pouco

Passo 44

Um toque extra para a cauda: ela se esconde um pouco atrás do corpo do coelho quando o peito do coelho é mais visível.

extra

Passo 45

Para terminar a cauda, mova a camada para a parte de trás e termine qualquer sombreamento/limpeza.

sombreamento limpeza

E o trabalho sobre os frames está completo. Aqui está o coelho em movimento, o detalhe do trabalho extra compensa, não é?

framess

Vamos transformar esses frames em um loop.

Passo 46

Copie os quadros em um novo arquivo.

Você vai ter que copiar uma imagem de cada vez, na ordem correta (da esquerda para a direita). Para copiar todas as camadas ao mesmo tempo, você tem que fazer uma cópia mesclada (Editar > Cópia Mesclada), e lembre-se de não ter cor de fundo ao copiar.

Quando você colá-los eles devem se alinhar adequadamente; A linha de fundo permanece a mesma em todas as camadas, e o nariz também, exceto nos dois frames em que o coelho pula até 1px.

1px

Você ter no final, um arquivo com 6 camadas no total; uma por frame.
Nenhuma com fundo.

nenhuma com fundo

Passo 47

Para fazer a animação no Photoshop, você vai precisar abrir a janela de Timeline (Janela > Timeline ou Linha do Tempo). Deve criar um quadro de animação.

quadro de animação

Passo 48

Pressione o botão Criar quadro de animação, e em seguida, pressione o botão de opções da janela Timeline, no canto superior direito.

canto superior direito

Selecione criar quadros de camadas.

selecione criar

Passo 49

Então, finalmente, selecione os frames e ajuste o seu atraso, se você quiser (eu escolhi um segundo de atraso 0,1) e defina as opções de looping para sempre.

looping

E aqui você tem o seu coelho correndo em loop!

resultado final

Agora você pode usar esse sprite em jogos ou exportar o arquivo em GIF.

Este tutorial, é uma tradução de envatotuts+.

Compartilhe este artigo:

Guia de Estudos para Aprender Design por Conta Própria

Baixe o nosso guia e receba dicas e as novidades do Clube do Design no seu email:

Deixe uma resposta

Mais artigos pra você ler:
Affinity Photo #4 - Abrindo imagens RAW

Affinity Photo #4 - Abrindo imagens RAW

Você pode abrir imagens raw de sua câmera digital diretamente no Affinity Photo. Ao fazer isso, você será capaz de…
Como vetorizar o seu lettering de forma rápida e fácil no Adobe Illustrator

Como vetorizar o seu lettering de forma rápida e fácil no Adobe Illustrator

Hoje vou compartilhar com vocês um dos primeiros vídeos do canal Corporação Criativa onde ensino sobre a vetorização automática feita…
Affinity Photo #3 - Abrindo documentos

Affinity Photo #3 - Abrindo documentos

Você pode abrir fotografias e imagens rasterizadas, bem como uma variedade de imagens raw de câmeras populares no Affinity Photo,…
Como criar um lettering em 8 passos

Como criar um lettering em 8 passos

Que tal aprender mais uma técnica para o desenho de lettering? Nesse vídeo eu vou te ensinar como desenvolver um…
Fechar Menu