Como usar: Editor de Pixel Art
- Escolha o tamanho da tela (16×16 e 32×32 são bons pontos de partida) ou abra um arquivo PNG, GIF ou .piskel.
- Escolha uma paleta como PICO-8 ou Endesga 32 e desenhe com o lápis (B). O botão direito pinta com a cor secundária, que é transparente por padrão.
- Adicione camadas para lineart, cor e sombreamento. Adicione frames para a animação e ative o onion skin (K) para ver o frame anterior e o próximo.
- Pressione Enter para reproduzir a animação, ajuste o FPS e confira a pequena prévia em 1×, 2× ou em mosaico.
- Abra Exportar e baixe um PNG, um sprite sheet com JSON, um GIF animado, um SVG, um ZIP de frames ou um arquivo .piskel.
O que você recebe
- PNG do frame atual de 1× a 16×
- Sprite sheet PNG com lista de frames em JSON (qualquer número de colunas)
- GIF animado usando o FPS do documento, com transparência preservada
- ZIP de PNGs numerados, um por frame
- SVG com um path por cor
- Arquivo .piskel que você pode reabrir aqui ou no Piskel
Dicas de quem faz jogos com ela
- Deixe o pixel-perfect ligado (P) ao desenhar contornos de 1px. Ele remove os pixels duplicados nos cantos que os traços à mão livre deixam.
- Shift+clique com o lápis desenha uma linha reta a partir do último ponto. Segure Shift enquanto arrasta uma linha para travá-la em passos de 45°, ou um retângulo/elipse para virar quadrado/círculo.
- A ferramenta de sombreamento (U) leva o pixel para a próxima cor mais clara ou mais escura da sua paleta, então você sombreia sem sair dela. O botão direito escurece.
- Selecione uma área (S, ou W para uma cor) antes de desenhar para manter os traços dentro dela, ou antes de mover para deslocar só esses pixels.
- Ative o espelho X para personagens e sprites de frente, e no final quebre a simetria à mão para o sprite não parecer carimbado.
- Use uma camada de 'rascunho' oculta com baixa opacidade embaixo do lineart e apague antes de exportar.
- Seu trabalho é salvo automaticamente neste navegador. Ele não é sincronizado com nada, então exporte um arquivo .piskel se quiser um backup.
- Cole uma imagem com Ctrl+V para colocá-la como nova camada, o que ajuda muito para decalcar referências.
Casos de uso
- Desenhar personagens, itens e tiles para uma game jam sem instalar nada
- Limpar pixel a pixel sprites gerados por IA antes de importar na engine
- Animar ciclos de idle, caminhada e ataque e exportar um sprite sheet para Godot, Unity ou GameMaker
- Criar pequenos GIFs animados e emotes
- Editar projetos do Piskel em uma máquina sem o Piskel instalado
Perguntas frequentes
Este editor de pixel art é grátis?
Sim. Todos os recursos de desenho, animação, importação e exportação são grátis e não há marca d'água. O editor roda inteiro no seu navegador.
Onde meu desenho fica salvo?
No armazenamento local do seu navegador, só neste dispositivo. Ele sobrevive a um recarregamento da página, mas não a limpar os dados do site ou trocar de navegador. Exporte um .piskel ou PNG para guardar uma cópia.
Dá para abrir arquivos do Piskel?
Sim. Abra um arquivo .piskel e as camadas, frames e o FPS vêm junto. Você também pode exportar de volta para .piskel.
Qual é o tamanho máximo da tela?
512×512 pixels. Pixel art costuma ter de 16 a 128 pixels por lado, e manter o limite aí deixa o desenho fluido em celulares e notebooks mais antigos.
Como faço um sprite sheet para minha engine?
Desenhe cada frame da animação na timeline e escolha Exportar → Sprite sheet. Defina o número de colunas e a escala. Você recebe um PNG e um arquivo JSON com a posição e a duração de cada frame.
Funciona no celular ou tablet?
Sim. Desenhe com um dedo e faça pinça ou use dois dedos para dar zoom e mover a tela. Mouse e teclado ainda são mais rápidos para trabalho detalhado por causa dos atalhos.
Posso importar um GIF ou um sprite sheet?
Sim. Um GIF abre com um frame para cada frame do GIF. Quando você abre um PNG que parece um sprite sheet, o editor oferece dividi-lo em frames usando a grade que detectar.