Un editor de cuadrícula, no un programa de dibujo
El pixel art es una disciplina de restricciones. Cada celda es una decisión, la paleta es pequeña a propósito, y todo el sentido está en que puedas ver cada cuadrado individual. Un programa de dibujo de propósito general pelea contra eso: los pinceles tienen bordes suaves, los colores se mezclan y los niveles de zoom emborronan.
Así que esto es una cuadrícula y nada más. Cuatro tamaños, dieciséis colores, un borrador, deshacer, rehacer, limpiar y un botón de exportar. No hay capas, ni formas de pincel, ni degradados, porque ninguno de ellos pinta nada en un sprite de 16 por 16.
Todo vive en la página mientras está abierta. Nada se sube y nada se guarda en tu dispositivo automáticamente, así que trata la exportación como el botón de guardar.
Veinte píxeles por celda, y por qué importa
El lienzo sobre el que dibujas y el archivo que descargas tienen la misma resolución: veinte píxeles de pantalla por cada celda de la cuadrícula. Eso no es un accidente de maquetación. Mantener una sola escala para ambos significa que el dibujo que ves es exactamente el dibujo que obtienes, sin ninguna vista previa reducida aparte que pueda discrepar de la exportación.
El aspecto de bloques sobrevive porque el suavizado se desactiva antes de cada dibujado. Los navegadores interpolan las imágenes escaladas por defecto, que es lo correcto para fotografías y completamente equivocado aquí, así que la opción se apaga explícitamente y cada celda se representa como un cuadrado duro.
La consecuencia práctica es que tu exportación ya es un recurso utilizable. Un dibujo de 32 celdas aterriza a 640 por 640, que es lo bastante grande para publicarlo, usarlo de avatar o meterlo en un diseño sin que nada lo vuelva a ampliar y le ablande los bordes. Los cuatro tamaños salen a 160, 320, 480 y 640 píxeles.
Un deshacer que se comporta como esperas
Dos detalles hacen que el historial se comporte como debe hacerlo una herramienta de dibujo.
El primero es la granularidad del trazo. Mientras mantienes el puntero pulsado, el pintado ocurre sobre una copia de trabajo de la cuadrícula, y solo al soltar se confirma el resultado terminado como una única entrada de historial. Arrastra una diagonal a lo largo de treinta celdas y un solo deshacer quita las treinta.
El segundo es la regla de rehacer. Deshaz algo, luego dibuja algo nuevo, y la pila de rehacer se vacía. Ese es el invariante correcto y es fácil equivocarse: mantener vivo el camino de rehacer antiguo te dejaría saltar a un estado que nunca existió en el camino en el que estás ahora.
El historial está limitado a cien entradas en cada dirección, así que una sesión larga no puede hacerlo crecer sin límite.
Adónde va la exportación después
Un PNG transparente de 320 o 640 píxeles de lado es un buen punto de partida para varias cosas. Para un icono de pestaña de navegador, el generador de favicons produce los tamaños y formatos que necesita un sitio a partir de una sola imagen cuadrada, y PNG a ICO hace la conversión suelta si ya sabes qué tamaño quieres. Si lo que buscas es convertirlo en algo para pegar en un chat, el creador de stickers parte de una imagen y prepara el formato que esperan las aplicaciones de mensajería.
Dibujar un sprite de 16 por 16
- Elige un tamaño de cuadrícula. Las cuatro opciones son 8, 16, 24 y 32 celdas de lado, y la pista junto al desplegable te dice el tamaño en píxeles de la exportación.
- Pulsa una muestra de color en la paleta. Pasar por encima de una muestra enseña su nombre.
- Pulsa una celda para pintarla, o pulsa y arrastra para pintar una tirada de celdas en un solo trazo.
- Pulsa Borrador para devolver celdas a transparente, y vuelve a pulsar cualquier muestra para volver a pintar.
- Deshacer y Rehacer recorren tus trazos. Los dos botones se desactivan solos cuando no queda nada a lo que ir.
- Limpiar vacía el lienzo sin cambiar el tamaño de cuadrícula, y es reversible.
- Pulsa Descargar PNG para guardar el resultado. El archivo lleva el nombre de la cuadrícula.
Empieza en 16 salvo que tengas un motivo para no hacerlo. Es el tamaño que asume la mayor parte del trabajo con sprites, es lo bastante grande para un personaje reconocible y lo bastante pequeño para terminarlo, y 8 es genuinamente difícil, no fácil.
