Creador de Pixel Art

¿Qué es un creador de pixel art?

Un creador de pixel art es una herramienta de dibujo basada en una cuadrícula fija: en lugar de trazos libres, colocas píxeles individuales, cuadro a cuadro. Esa restricción es el encanto del pixel art: los sprites de videojuegos, los iconos retro, los avatares y las ilustraciones estilo 8 bits se hacen eligiendo cada píxel a propósito.

Este editor trae el kit clásico de un editor de sprites: lápiz, borrador, relleno y cuentagotas en cuadrículas de 8x8 a 64x64, además de animación fotograma a fotograma con vista previa en vivo. Exporta el resultado como PNG nítido a cualquier tamaño, GIF animado u hoja de sprites lista para un motor de juegos.

Y como esto es Coddy, tu dibujo también es código. Con un clic la cuadrícula se convierte en un array 2D de Python, un snippet de canvas en JavaScript, arte CSS con box-shadow, un SVG o un CSV para abrir en una hoja de cálculo: una forma divertida de ver que las imágenes son solo arrays de colores.

Qué aprenderás haciendo pixel art

• Una imagen es un array 2D: cada píxel es una entrada con un valor de color. La exportación a código muestra tu dibujo exactamente así, filas y columnas de códigos hex.
• Las paletas pequeñas se ven mejor. Los sprites clásicos usan de 4 a 32 colores; limitarte fuerza formas limpias y siluetas legibles.
• La animación son solo fotogramas. Un parpadeo o un ciclo de caminar son unas pocas cuadrículas ligeramente distintas mostradas en secuencia.

Cómo hacer pixel art paso a paso

1. 1

   Elige el tamaño de la cuadrícula

   Empieza pequeño: 16x16 o 32x32. Las cuadrículas pequeñas fuerzan formas simples y legibles; la mayoría de los sprites clásicos son de 16x16 o 32x32. Puedes cambiar el tamaño después sin perder el dibujo.

2. 2

   Bloquea la silueta

   Usa el lápiz para contornos y el relleno para áreas grandes. Dibuja primero la forma general en un color y luego añade detalles. El clic derecho (o el borrador) limpia un píxel.

3. 3

   Sombrea con una paleta pequeña

   Elige 2 o 3 tonos por material: base, brillo y sombra. La paleta integrada está ordenada para encontrar esas rampas fácilmente, y el cuentagotas toma cualquier color ya presente en el lienzo.

4. 4

   Anímalo (opcional)

   Duplica el fotograma, mueve unos píxeles y pulsa reproducir. Dos o tres fotogramas bastan para un parpadeo, un rebote o el parpadeo de una llama.

5. 5

   Exporta

   Descarga un PNG hasta a escala 32x, un GIF animado o una hoja de sprites con todos los fotogramas en fila. O abre el panel de código y copia tu arte como Python, JavaScript, CSS, SVG o CSV.

Referencia rápida de pixel art

Tamaños de lienzo y formatos de exportación habituales, y cuándo usar cada uno.

Ejemplos de pixel art para probar

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;}

Errores comunes en pixel art

• Empezar en una cuadrícula de 64x64. Los lienzos grandes esconden formas débiles: aprende en 16x16, donde cada píxel es una decisión.
• Usar demasiados colores. Si tu sprite tiene 40 colores, no tiene estilo. Elige una rampa pequeña por material y respétala.
• Escalar las exportaciones con suavizado. El pixel art debe escalarse con vecino más cercano (esta herramienta lo hace por ti) o se convierte en un borrón.

Preguntas frecuentes del Creador de Pixel Art