Saltar al contenido
Volver al Blog
Tutoriales

Dibuja un corazón de pixel art de 16×16 píxeles

Crea un sprite de corazón con cuatro colores y un patrón completo de 16×16 píxeles. Pasos, PNG de referencia y fuentes de texto y JSON para descargar.

Admin6 de noviembre de 20263 min de lectura2
Dibuja un corazón de pixel art de 16×16 píxeles

Este corazón de pixel art usa cuatro colores y un lienzo de 16×16 píxeles. Puedes dibujarlo en el editor de píxeles de aukimi en el navegador sin iniciar sesión. El patrón completo permite reproducir el mismo sprite sin tener que adivinar sus proporciones.

El dibujo terminado contiene 100 píxeles de color y 156 celdas transparentes. El PNG de 16×16 tiene el tamaño nativo del sprite; al ampliarlo ocho veces se obtiene una vista de 128×128 con las mismas formas.

1. Prepara el lienzo y la paleta

Abre el editor, elige 16x16 como tamaño del lienzo y mantén visible la cuadrícula. Los cuatro colores ya están en la paleta. Identifica cada muestra por su código hexadecimal:

SímboloColorUso
O#1d2b53Contorno
R#ff004dRojo principal
L#ff77a8Brillo
D#7e2553Sombra
.—Transparente: dejar vacía

Cada línea del patrón representa una fila, de izquierda a derecha. La primera está en la parte superior del lienzo. Cuenta las filas y las columnas del 1 al 16. Los puntos se dejan vacíos: no son píxeles blancos.

2. Sigue el patrón completo de 16×16 píxeles

................
................
...OOO....OOO...
..OLLRO..ORRRO..
.ORLLRROORRRRRO.
.ORRRRRRRRRRRRO.
.ORRRRRRRRRRRRO.
..ORRRRRRRRRRO..
...ODDDDDDDDO...
....ODDDDDDO....
.....ODDDDO.....
......ODDO......
.......OO.......
................
................
................
  1. Elige el pincel y el color del contorno O. Pinta primero todas las celdas O. Son 30, incluidas las dos que unen los lóbulos en la fila 5.
  2. Elige el rojo R, selecciona el relleno y pulsa dentro del contorno cerrado, por ejemplo en la fila 6, columna 6. Se rellenan las 70 celdas interiores.
  3. Vuelve al pincel. Con el color de brillo L, sustituye cuatro celdas rojas: filas 4 y 5, columnas 4 y 5.
  4. Elige el color de sombra D. Pinta la fila 9, columnas 5 a 12; la fila 10, columnas 6 a 11; la fila 11, columnas 7 a 10; y la fila 12, columnas 8 y 9.

Si el relleno alcanza el fondo, deshaz la acción y comprueba el contorno O con el patrón. Usa la goma para vaciar una celda pintada por error. El recuento final es O: 30, R: 46, L: 4 y D: 20.

3. Exporta con las dimensiones que necesitas

En el ajuste de escala, elige 1x para una imagen de 16×16 o 8x para 128×128 y exporta el PNG. La escala cambia las dimensiones del archivo, no el número de celdas que dibujas. Guarda el resultado antes de cerrar la pestaña.

Límite de la exportación: la herramienta gratuita añade una marca de agua aukimi.com. Una suscripción la elimina; crear una cuenta gratuita no basta. Consulta los planes actuales antes de elegir. Los archivos de referencia de abajo reproducen el patrón del tutorial por separado: no son ejemplos de una exportación sin marca de agua realizada sin iniciar sesión.

Archivos de referencia y un pequeño ejercicio

El JSON es una referencia legible, no un formato de importación para este editor independiente. Para crear otra versión, dibuja la misma silueta con otro rojo y compara ambas a tamaño nativo. En un taller, pide a otra persona que reproduzca el patrón de texto y compruebe el número de píxeles de cada color.

Dibuja tu propio corazón en el editor de píxeles. Para animación y proyectos de sprites más grandes, descubre aukimi Pixel y los planes que dan acceso a ese módulo.

#pixel-art#16x16#sprites#beginner

¿Te gustó este artículo?

CompartirHN

Ayuda a construir el futuro del software creativo

Apoya el desarrollo de aukimi y obtén acceso anticipado exclusivo a la suite creativa completa.

Apoyar el proyecto