Cómo diseñar una fuente de arte pixelado para pantallas Divoom

Qué hace diferente a una fuente pixelada

Una fuente pixelada es un tipo de letra creado completamente sobre una cuadrícula fija, donde cada unidad representa un píxel visible. A diferencia de las fuentes vectoriales, que se escalan suavemente a cualquier tamaño, las fuentes pixeladas aprovechan su naturaleza cuadriculada: cada curva se aproxima mediante cuadrados discretos. En una pantalla LED Divoom, esto no es una limitación, sino precisamente la idea central. Cada LED del panel es un píxel físico real, por lo que el diseño de tu fuente se corresponde directamente con el hardware.

Algunos conceptos tipográficos se trasladan directamente a las cuadrículas de píxeles, y conocerlos te ayuda a tomar decisiones de diseño deliberadas en lugar de adivinar:

• Línea base — la fila horizontal sobre la que se apoyan la mayoría de las letras. En una cuadrícula de 5×7, la línea base suele ser la fila 6 (la segunda desde abajo).
• Altura de x — la altura de las letras minúsculas como a, c, e y x. Normalmente es de 3–4 píxeles en una fuente pequeña y de 4–5 en una mediana.
• Altura de las mayúsculas — la parte superior de las letras mayúsculas, normalmente alineada con la parte superior de la cuadrícula o una fila por debajo.
• Ascendentes — partes de las letras que alcanzan una altura superior a la altura de x, como el trazo alto de la b, d, h, k o l.
• Descendentes — partes que bajan por debajo de la línea base, como el trazo final de la g, j, p, q o y.
• Ancho de los caracteres — la mayoría de las fuentes pixeladas usan caracteres de 3 a 5 píxeles de ancho, con al menos 1 píxel de espacio entre cada letra.

Estos términos proceden de la tipografía tradicional, pero en una cuadrícula de píxeles se convierten en medidas concretas que puedes contar. La tradición del pixel art de trabajar dentro de estrictas limitaciones de cuadrícula se remonta a varias décadas atrás, desde las primeras pantallas de ordenador hasta las máquinas recreativas, y la misma disciplina se aplica hoy al diseñar para paneles LED.

Pixel Overload explica la terminología tipográfica y dos métodos prácticos para diseñar fuentes de píxeles sobre una cuadrícula.

Elegir el tamaño del lienzo

La cuadrícula de píxeles de tu pantalla Divoom determina el nivel de detalle que puede tener tu fuente. Una cuadrícula más grande te da más espacio para formas de letras con ascendentes, descendentes y detalles decorativos. Una cuadrícula más pequeña obliga a crear diseños más sencillos y gruesos que sigan siendo legibles a distancia.

Pantalla	Pixoo-64 Panel LED de 64×64 píxeles	Times Gate 5 pantallas LCD de 128×128 píxeles	Ditoo Pro Panel LED frontal de 16×16 píxeles
Tamaño de la cuadrícula	64×64 píxeles	128×128 por pantalla	16×16 píxeles
Tamaño de fuente recomendado	5×7 u 8×8	8×8 o 10×14	3×5 o 5×7
Ideal para	Fuentes detalladas, texto de varias líneas, mensajes desplazables en negrita	Fuentes muy detalladas en pantallas dedicadas, texto estilo panel de control	Nombres sencillos desplazables, citas breves, encanto compacto
Estilo de visualización del texto	Animación estática o desplazable	Estático en una pantalla, desplazable en otra	Animación desplazable (método principal)

Si estás diseñando tu primera fuente de píxeles, empieza con una cuadrícula de 5×7. Es el punto ideal: hay espacio suficiente para letras minúsculas claras con ascendentes y descendentes, pero no tanto como para que los principiantes se sientan abrumados por las opciones de píxeles.

Elegir la herramienta adecuada

No necesitas comprar software para diseñar una fuente de píxeles. Varias herramientas gratuitas funcionan directamente en el navegador y se basan en el mismo enfoque de cuadrícula que requieren las fuentes de píxeles. Así se comparan las principales opciones:

Aseprite — El mejor editor de pixel art en general

Aseprite es la herramienta estándar del sector para crear pixel art y también permite diseñar fuentes eficazmente. Admite capas, fotogramas de animación y exportación de hojas de sprites, algo importante si más adelante planeas crear animaciones de texto desplazable. La desventaja es el precio: Aseprite es una herramienta de pago (cuesta alrededor de 20 $), aunque puedes compilarla desde el código fuente de forma gratuita si tienes conocimientos técnicos. Disponible para Windows, macOS y Linux.

Elige Aseprite si planeas crear tanto pixel art como fuentes, o si quieres integrar la compatibilidad con animaciones en tu flujo de trabajo.

Piskel — Editor de píxeles gratuito basado en el navegador

Piskel funciona completamente en el navegador y no requiere instalación. Ofrece una interfaz limpia con ajuste a la cuadrícula, una línea de tiempo de animación y exportación a PNG o GIF. Es más sencilla que Aseprite, pero esa sencillez es una ventaja cuando estás aprendiendo. Diseña cada letra en un fotograma independiente y luego exporta el conjunto como archivos PNG individuales o como una hoja de sprites.

Elige Piskel si quieres una herramienta sin costes de configuración que puedas abrir en cualquier pestaña.

FontStruct — Creación de fuentes para cuadrículas

FontStruct adopta un enfoque diferente. En lugar de dibujar arte pixelado, colocas «ladrillos» en una cuadrícula para construir cada glifo, y la herramienta exporta tu diseño como un archivo de fuente TrueType (.ttf) real que puedes instalar en cualquier ordenador. Es gratuita, funciona en el navegador y está diseñada específicamente para este tipo de diseño tipográfico restringido a una cuadrícula.

Elige FontStruct si quieres una fuente instalable de verdad además de imágenes de arte pixelado, o si prefieres un flujo de trabajo de arrastrar y soltar en lugar de dibujar a mano alzada.

Aplicación Divoom — Editor de píxeles integrado

La aplicación gratuita Divoom Smart App (disponible en iOS y Android) incluye un editor de píxeles básico. Puedes dibujar diseños de texto sencillos y enviarlos directamente a tu dispositivo sin pasos de exportación ni importación. Tiene funciones limitadas para diseñar un alfabeto completo, pero es ideal para mensajes puntuales rápidos o para probar cómo se ve un concepto de fuente en tu pantalla real.

Empieza solo con tu nombre o una frase corta antes de diseñar un alfabeto completo. Una palabra de 5 letras te permite probar el espaciado, la legibilidad y el estilo sin comprometerte con 26 caracteres más la puntuación.

Tres formas de diseñar tu primera letra

Hay tres enfoques habituales para construir formas de letras en una cuadrícula de píxeles. Cada uno produce un carácter visual diferente, y la mejor opción depende del tamaño de la cuadrícula y del estilo que busques.

Método de líneas

Dibuja cada carácter línea por línea en la cuadrícula, como si fuera caligrafía, pero limitado a trazos horizontales, verticales y de 45 grados. Esto produce formas de letras finas y limpias que transmiten precisión y modernidad. Funciona bien a partir de un tamaño de 5×7. La principal consideración es que las fuentes basadas en líneas tienden a verse ligeras: en tamaños muy pequeños, los trazos finos pueden volverse difíciles de leer sobre un fondo LED brillante.

Método de bloques

Comienza con formas rectangulares rellenas para cada letra y, después, elimina espacio negativo para definir el carácter. Esto produce formas de letras más gruesas y marcadas que siguen siendo legibles incluso en un tamaño de 3×5. El método de bloques es el más permisivo para principiantes que trabajan con cuadrículas pequeñas, como el panel de 16×16 del Ditoo Pro, donde cada píxel tiene un gran peso visual.

Píxel a píxel

Coloca los píxeles individuales uno a uno y construye cada letra desde cero. Este es el método más preciso, pero también el más lento. Resulta especialmente útil en cuadrículas de 8×8 o más grandes, donde tienes espacio suficiente para añadir detalles sutiles: una ligera curva en una S, una serifa puntiaguda en una T o un cuenco redondeado en una B. En un Pixoo-64 con su cuadrícula de 64×64, trabajar píxel a píxel te da espacio para perfeccionar cada carácter.

Cómo hacer que tu fuente sea legible

Una fuente de píxeles depende por completo de su legibilidad. En una pantalla LED, donde los píxeles son puntos físicos de luz, los pequeños errores de legibilidad se hacen más visibles que en un monitor. Estas son algunas reglas que mejoran la legibilidad de forma constante:

• Mantén una separación mínima de 1 píxel entre los caracteres. Las letras que se tocan se convierten en manchas, especialmente en paneles LED, donde la luz se difumina ligeramente entre píxeles adyacentes.
• Mantén constantes los anchos de los caracteres. Si tu A tiene 5 píxeles de ancho, la mayoría de tus otras letras mayúsculas también deberían tener entre 4 y 5 píxeles de ancho. Una variación excesiva hace que el texto se vea irregular al desplazarse.
• Prueba pronto en el tamaño real de la pantalla. Reduce el zoom hasta que cada píxel tenga aproximadamente el tamaño de un LED de tu dispositivo. Si las letras se vuelven indistinguibles, debes rediseñarlas.
• Cuidado con los pares confusos. La I mayúscula y la l minúscula, la O mayúscula y el cero, la secuencia rn en minúsculas y la letra m — en tamaños de píxel pequeños, estas formas se vuelven idénticas a menos que diseñes diferencias deliberadas.
• Evita las serifas por debajo de 5×7. Las serifas consumen píxeles que necesita el cuerpo de las letras. En 3×5, un diseño sans serif limpio siempre superará a uno con serifas.

Del diseño a tu pantalla Divoom

Una vez diseñada tu fuente, el último paso es instalarla en tu dispositivo. El flujo de trabajo varía según quieras texto estático o desplazamiento animado.

Texto estático

1. En tu herramienta de diseño, compón el mensaje completo usando las letras de tu fuente personalizada.
2. Exporta el resultado como un único PNG con las dimensiones exactas en píxeles de tu pantalla (por ejemplo, 64×64 para Pixoo-64).
3. Abre la aplicación Divoom, selecciona tu dispositivo y sube el PNG como pixel art personalizado.
4. Envíalo a tu pantalla y ajusta el brillo según tus preferencias.

Texto en desplazamiento o animado

1. Diseña cada letra como un mosaico o fotograma independiente.
2. Crea una secuencia de animación en la que el texto se desplace 1–2 píxeles hacia la izquierda en cada fotograma.
3. Exporta la animación como un GIF; la aplicación Divoom permite subir y reproducir GIF.
4. Sube el GIF a través de la aplicación, configura la velocidad de repetición y elige el modo de visualización.

Para mostrar texto en desplazamiento en Times Gate, puedes dedicar una de las cinco pantallas a tu animación personalizada mientras las demás siguen mostrando relojes, el tiempo o widgets de datos. Así puedes tener texto personalizado en desplazamiento junto con información en tiempo real, una combinación que ninguna plantilla de la galería de la comunidad puede reproducir.

Qué pantalla Divoom muestra mejor las fuentes

Cada pantalla Divoom aporta algo diferente a la tipografía personalizada. La elección adecuada depende del nivel de detalle que quieras en tus fuentes y del lugar donde vaya a estar la pantalla.

Pixoo-64 es el mejor lienzo para trabajar con fuentes. Con 64×64 píxeles, puedes incluir varias líneas de texto, mostrar mensajes más grandes de una sola línea con espacio para elementos decorativos o crear banners animados con desplazamiento fluido. Es la elección natural si el diseño de fuentes es uno de los motivos principales por los que compras una pantalla de píxeles. La conexión WiFi de doble banda también garantiza que tus animaciones personalizadas se mantengan conectadas de forma fiable para una visualización continua. Consulta la página del producto Pixoo-64 para conocer los precios y la disponibilidad actuales.

Times Gate ofrece una ventaja única para los entusiastas del texto: cinco pantallas independientes de 128×128. Puedes dedicar una pantalla a mostrar una fuente personalizada, otra a mensajes en desplazamiento y dejar las tres restantes para relojes, el tiempo y widgets de datos. La resolución de 128×128 por pantalla permite mostrar el mayor nivel de detalle de fuentes de toda la gama Divoom. Si quieres un panel de escritorio que incluya la tipografía personalizada como un elemento más, Times Gate te ofrece la máxima flexibilidad.

Ditoo Pro adopta un enfoque diferente. El panel frontal de 16×16 es pequeño, pero esa limitación puede ser una ventaja creativa. Los nombres sencillos con desplazamiento, las citas breves o los mensajes minimalistas en píxeles tienen un encanto particular en este altavoz de estilo retro. Las teclas del teclado mecánico y el joystick añaden una interacción táctil que las otras pantallas no ofrecen. Si quieres un compañero compacto para tu escritorio que reproduzca música y muestre tu texto personalizado, el Ditoo Pro lo hace más personal.

Para consultar las instrucciones de configuración del dispositivo y los detalles de emparejamiento, la página del manual de productos de Divoom incluye los pasos para conectarse mediante WiFi y Bluetooth en las tres pantallas.

Preguntas frecuentes