Criador de Pixel Art

O que é um criador de pixel art?

Um criador de pixel art é uma ferramenta de desenho baseada em uma grade fixa: em vez de traços livres, você coloca pixels individuais, um quadrado por vez. Essa restrição é o charme do pixel art: sprites de jogos, ícones retrô, avatares e ilustrações no estilo 8 bits são feitos escolhendo cada pixel de propósito.

Este editor traz o kit clássico de um editor de sprites: lápis, borracha, preenchimento e conta-gotas em grades de 8x8 a 64x64, além de animação quadro a quadro com pré-visualização ao vivo. Exporte o resultado como PNG nítido em qualquer tamanho, GIF animado ou sprite sheet pronta para uma engine de jogos.

E como isso é Coddy, seu desenho também é código. Um clique transforma a grade em um array 2D de Python, um trecho de canvas em JavaScript, arte CSS com box-shadow, um SVG ou um CSV para abrir em planilhas: um jeito divertido de ver que imagens são apenas arrays de cores.

O que você aprende fazendo pixel art

• Uma imagem é um array 2D: cada pixel é uma entrada com um valor de cor. A exportação de código mostra seu desenho exatamente assim, linhas e colunas de códigos hex.
• Paletas pequenas ficam melhores. Sprites clássicos usam de 4 a 32 cores; a limitação força formas limpas e silhuetas legíveis.
• Animação é só uma sequência de quadros. Um piscar ou um ciclo de caminhada são algumas grades levemente diferentes exibidas em sequência.

Como fazer pixel art passo a passo

1. 1

   Escolha o tamanho da grade

   Comece pequeno: 16x16 ou 32x32. Grades pequenas forçam formas simples e legíveis; a maioria dos sprites clássicos tem 16x16 ou 32x32. Você pode trocar o tamanho depois sem perder o desenho.

2. 2

   Defina a silhueta

   Use o lápis para contornos e o preenchimento para áreas grandes. Desenhe primeiro a forma geral em uma cor e depois acrescente detalhes. O clique direito (ou a borracha) apaga um pixel.

3. 3

   Sombreie com uma paleta pequena

   Escolha 2 ou 3 tons por material: base, brilho e sombra. A paleta integrada é ordenada para facilitar essas rampas, e o conta-gotas captura qualquer cor já presente na tela.

4. 4

   Anime (opcional)

   Duplique o quadro, mova alguns pixels e aperte reproduzir. Dois ou três quadros bastam para um piscar, um pulo ou o tremular de uma chama.

5. 5

   Exporte

   Baixe um PNG em até 32x, um GIF animado ou uma sprite sheet com todos os quadros em fila. Ou abra o painel de código e copie sua arte como Python, JavaScript, CSS, SVG ou CSV.

Referência rápida de pixel art

Tamanhos de tela e formatos de exportação comuns, e quando usar cada um.

Exemplos de pixel art para experimentar

PIXELS = [    [None, "#e43b44", "#e43b44", None],    ["#e43b44", "#a22633", "#a22633", "#e43b44"],    [None, "#e43b44", "#a22633", None],    [None, None, "#e43b44", None],]
for row in PIXELS:    print("".join("█" if c else " " for c in row))

.pixel-art {    --px: 12px;    width: var(--px);    height: var(--px);    box-shadow:        calc(1 * var(--px)) 0 0 0 #e43b44,        calc(2 * var(--px)) 0 0 0 #e43b44,        calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}

Erros comuns no pixel art

• Começar em uma grade 64x64. Telas grandes escondem formas fracas: aprenda no 16x16, onde cada pixel é uma decisão.
• Usar cores demais. Se o sprite tem 40 cores, ele não tem estilo. Escolha uma rampa pequena por material e mantenha.
• Escalar exportações com suavização. Pixel art precisa de vizinho mais próximo (esta ferramenta já faz isso) ou vira um borrão.

Perguntas frequentes do Criador de Pixel Art