Pixel Art no Photoshop: Lápis, Grade e Nearest Neighbor

Fazer pixel art no Photoshop é viável se você trocar quatro padrões do programa: usar o Lápis no lugar do Pincel, tirar a suavização da borracha e da seleção, mudar a interpolação para Nearest Neighbor e exportar sempre em escala inteira. Com isso, ele desenha pixel duro, anima na Timeline e entrega PNG pronto para a engine.

Este guia é para quem já tem o Photoshop e não quer aprender outro programa agora. Ele cobre o canvas, as ferramentas, a grade de pixel, a animação quadro a quadro e a exportação, e no fim mostra com honestidade onde o Photoshop perde para um editor dedicado.

Pixel art no Photoshop: vale se você já tem

O Photoshop não foi feito para pixel art. Ele foi feito para foto e pintura, e quase tudo nele suaviza por padrão: pincel, seleção, transformação e redimensionamento. Por outro lado, ele tem camadas excelentes, ajustes de cor, seleção poderosa e você provavelmente já sabe usar.

A conta é simples. Se você já tem o programa no seu plano da Adobe e faz pixel art de vez em quando (ícones, tiles, um personagem para um protótipo), configurar o Photoshop leva 10 minutos e resolve. Se está pensando em contratar o plano só para pixel art, não faça isso: existem editores gratuitos ou de compra única feitos exatamente para isso. Os valores dos planos mudam por região e promoção, então confira o preço atual direto no site da Adobe.

Canvas, lápis e borracha no modo lápis

Canvas:

1. File > New (Ctrl+N). Width e Height em Pixels: 32x32 para um personagem, 16x16 para um tile, 320x180 para uma tela.
2. Resolution não importa para jogo. Deixe 72.
3. Background Contents: Transparent.
4. Dê zoom alto (Ctrl + ou Alt + roda do mouse). Para 32x32, trabalhe entre 1200% e 2400%.

Lápis (Pencil Tool): ele fica agrupado com o Pincel. Aperte B e depois Shift+B até chegar ao Lápis, ou clique e segure o ícone do pincel. O Lápis desenha sem suavização. Na barra de opções, escolha um pincel de 1 px com Hardness 100%.

Borracha: selecione a Borracha (E) e, na barra de opções, mude Mode para Pencil. Agora ela apaga pixel inteiro.

Seleção e preenchimento: desmarque Anti-alias na barra de opções da Varinha Mágica, do Letreiro Elíptico e do Balde de Tinta. Para o Balde, deixe Tolerance em 0 e Contiguous marcado. Sem isso, você ganha pixels de transição nas bordas.

Pixel perfeito nas curvas: o Photoshop não tem a opção pixel perfect dos editores dedicados, que remove pixels duplicados nas curvas. Você limpa à mão os "cotovelos" (dois pixels encostados formando um L) com a borracha.

Interpolação Nearest Neighbor nas preferências

Esse é o ajuste que mais evita sprite borrado:

1. Edit > Preferences > General (Ctrl+K). No Mac, Photoshop > Settings > General.
2. Em Image Interpolation, escolha Nearest Neighbor (preserve hard edges).

Isso muda o padrão das operações que reamostram a imagem, como Free Transform. Dois cuidados:

• Na transformação livre (Ctrl+T), confira o campo Interpolation na barra de opções antes de aplicar. Ele pode guardar o último método usado na sessão.
• Na caixa Image > Image Size (Alt+Ctrl+I), o campo Resample tem sua própria escolha. Para pixel art, Nearest Neighbor (hard edges).

Se você também edita fotos no Photoshop, lembre de voltar a interpolação para Bicubic Automatic depois. Nearest Neighbor em foto deixa tudo serrilhado.

Pixel art grid photoshop: grade e guias

O Photoshop tem duas grades úteis:

• Pixel Grid: View > Show > Pixel Grid. É uma grade de 1x1 que só aparece com zoom alto, acima de 500%. Se o item não aparece no menu, confira se o uso da GPU está ativo em Preferences > Performance.
• Grade de tiles: View > Show > Grid (Ctrl+'). Configure em Edit > Preferences > Guides, Grid & Slices: Gridline Every 16 Pixels e Subdivisions 1 para tiles de 16x16. Para tiles de 8x8, use 8.

Com View > Snap To > Grid ativo, seleções e movimentos encaixam na grade, o que ajuda a recortar tiles exatos.

Uma dica que poupa trabalho: crie um documento de 16x16 com o tile, selecione tudo e use Edit > Define Pattern. Depois, numa camada grande, preencha com esse padrão (Edit > Fill > Pattern) para testar se o tile repete sem costura.

Animação na Timeline

1. Window > Timeline. No painel, clique na seta do botão central e escolha Create Frame Animation.
2. Desenhe cada frame numa camada separada: idle_1, idle_2, idle_3, idle_4.
3. No menu do painel Timeline (ícone de linhas no canto), use Make Frames From Layers. Cada camada vira um frame.
4. Embaixo de cada frame, ajuste o tempo (Frame Delay). Para um idle de 4 frames, 0,15 a 0,2 segundo por frame funciona.
5. Na parte de baixo do painel, defina o loop como Forever e use o botão de play.

Limitação real: o modo de animação por frames não tem onion skin. A forma de ver o frame anterior é reduzir a opacidade da camada de baixo enquanto desenha a de cima, e voltar para 100% no fim. Funciona, mas é manual.

Organizar 4 frames assim é tranquilo. A dificuldade aparece com várias animações por personagem, vários personagens e um jogo inteiro para manter coerente: mesmo tamanho de pixel, mesma paleta, mesma lógica de exportação. É aí que muita gente percebe que o problema não é a ferramenta, e sim o método de produção de arte para jogo.

Exportar com escala inteira

Para a engine (tamanho real):

1. File > Export > Export As (Alt+Shift+Ctrl+W).
2. Formato PNG, com Transparency marcado.
3. Escala em 100%. A engine amplia.

Cada frame como PNG separado: File > Export > Layers to Files exporta cada camada num arquivo. Escolha PNG-24 com transparência. Isso gera os frames individuais que você importa na engine ou junta num sprite sheet.

Sprite sheet manual: crie um documento com a largura de todos os frames lado a lado (4 frames de 32x32 = 128x32), ligue a grade de 32 pixels e posicione cada camada numa célula com o snap ativo. Exporte em PNG.

Para postar (ampliado): duplique o documento (Image > Duplicate), vá em Image > Image Size, mude para Percent, use um valor inteiro (400%, 800%) e Resample: Nearest Neighbor (hard edges). Exporte essa cópia. Escala de 150% ou 250% sempre deforma pixels, mesmo com Nearest Neighbor. O post sobre ampliar pixel art sem borrar explica o porquê.

GIF da animação: File > Export > Save for Web (Legacy), formato GIF, e no campo de qualidade do redimensionamento escolha Nearest Neighbor se for ampliar.

Automatize a cópia ampliada com uma Action. Como a ampliação para postar se repete em todo sprite, grave uma vez:

1. Window > Actions (Alt+F9) e clique em Create new action. Dê o nome ampliar 400 nearest e, se quiser, um atalho de tecla de função.
2. Com a gravação ligada, faça Image > Duplicate, depois Image > Image Size em 400% com Nearest Neighbor (hard edges), e File > Export > Export As em PNG.
3. Pare a gravação no botão quadrado do painel.

A partir daí, um atalho gera a versão ampliada de qualquer sprite aberto. Para processar uma pasta inteira de PNGs, use File > Automate > Batch com essa Action. É a parte em que o Photoshop compensa a falta de recursos de pixel art: automação de tarefas repetitivas sem escrever código.

Na Godot 4, importe o PNG e confira que o filtro de textura do projeto está em Nearest. Na Unity 6, importe com Filter Mode: Point (no filter) e Compression: None, e use o Sprite Editor para fatiar o sheet.

Limites em relação ao Aseprite

O Photoshop vence em edição de imagem, ajustes de cor e camadas complexas. Para pixel art em produção, cada item da tabela vira minutos perdidos por sprite. Se você chegou ao ponto de animar vários personagens, o post Aseprite vale a pena? mostra os caminhos para ter um editor dedicado, inclusive o gratuito.

Próximo passo

Configure as preferências, desenhe um personagem de 32x32 com o Lápis e anime 4 frames de respiração na Timeline. Exporte em 100% para a engine e em 400% para postar. Se o fluxo ficar confortável, siga no Photoshop. Se o onion skin manual e a montagem do sprite sheet incomodarem, teste um editor dedicado com o mesmo exercício e compare. Para os fundamentos de desenho que valem em qualquer programa, o guia de pixel art para jogos é o próximo passo.