Editor de pixel art

Cómo usar la herramienta Editor de pixel art

1. Elige un tamaño de lienzo (16×16 y 32×32 son buenos puntos de partida) o abre un archivo PNG, GIF o .piskel.
2. Elige una paleta como PICO-8 o Endesga 32 y dibuja con el lápiz (B). El clic derecho pinta con el color secundario, que por defecto es transparente.
3. Agrega capas para el lineart, el color y el sombreado. Agrega fotogramas para animar y activa el papel cebolla (K) para ver el fotograma anterior y el siguiente.
4. Presiona Enter para reproducir la animación, ajusta los FPS y revisa la vista previa pequeña a 1×, 2× o en mosaico.
5. Abre Exportar y descarga un PNG, una sprite sheet con JSON, un GIF animado, un SVG, un ZIP de fotogramas o un archivo .piskel.

Qué obtienes

• PNG del fotograma actual de 1× a 16×
• Sprite sheet en PNG con una lista de fotogramas en JSON (cualquier número de columnas)
• GIF animado con los FPS del documento y la transparencia intacta
• ZIP con los fotogramas en PNG numerados
• SVG con un trazado por color
• Archivo .piskel que puedes volver a abrir aquí o en Piskel

Consejos de quienes la usan para hacer juegos

• Deja activado pixel-perfect (P) al dibujar contornos de 1px. Quita los píxeles dobles en las esquinas que dejan los trazos a mano alzada.
• Shift+clic con el lápiz traza una línea recta desde tu último punto. Mantén Shift mientras arrastras una línea para fijarla en pasos de 45°, o un rectángulo/elipse para hacer un cuadrado/círculo.
• La herramienta de sombreado (U) lleva un píxel al siguiente color más claro u oscuro de tu paleta, así sombreas sin salirte de ella. El clic derecho oscurece.
• Selecciona un área (S, o W para un solo color) antes de dibujar para mantener los trazos dentro, o antes de mover para desplazar solo esos píxeles.
• Activa el espejo X para personajes y sprites de frente, y al final rompe la simetría a mano para que el sprite no se vea calcado.
• Usa una capa oculta de 'boceto' con poca opacidad debajo del lineart y bórrala antes de exportar.
• Tu trabajo se guarda solo en este navegador. No se sincroniza con ningún lado, así que exporta un archivo .piskel si quieres un respaldo.
• Pega una imagen con Ctrl+V para agregarla como capa nueva; es muy útil para calcar referencias.

Casos de uso

• Dibujar personajes, objetos y tiles para una game jam sin instalar nada
• Limpiar píxel por píxel sprites generados con IA antes de importarlos a un motor
• Animar ciclos de idle, caminata y ataque y exportar una sprite sheet para Godot, Unity o GameMaker
• Hacer GIFs animados pequeños y emotes
• Editar proyectos de Piskel en una computadora donde Piskel no está instalado

Preguntas frecuentes