Skip to content

Diseñador de insignias

El Diseñador de insignias es un editor de lienzo visual de tres columnas integrado en badges.ninja que te permite crear imágenes de insignias profesionales sin ninguna herramienta de diseño externa.

El editor de insignias de 3 columnas — barra lateral, panel y lienzo — con los detalles de la insignia debajo

Resumen

El diseñador se abre dentro de la propia ventana Crear/Editar insignia. Tiene tres partes:

  • Barra lateral — cambia el panel central entre Plantillas, Subidas, Elementos, Texto, Atributos, Códigos QR y Capas.
  • Panel — las herramientas del modo de barra lateral seleccionado.
  • Lienzo — una vista previa editable y en vivo de la insignia. Todo lo que añades es un objeto real y seleccionable que puedes mover, cambiar de estilo, reordenar o eliminar.

Los detalles de la insignia (Emisor, Nombre, Descripción, Criterios y el Texto para compartir) se sitúan justo debajo del lienzo, de modo que el diseño y la información de la credencial conviven en una sola ventana — no hay un paso aparte.

Empezar desde una plantilla

Haz clic en Plantillas en la barra lateral para explorar los diseños integrados. La familia Recognition te ofrece una insignia profesional totalmente compuesta — un marco con forma más texto de marcador de posición editable (organización, título, subtítulo y un sello de verificación) — en ocho paletas de color (Oro, Plata, Bronce, Azul, Verde, Carmesí, Púrpura, Grafito). Usa el filtro Categoría para acotar la lista, o Lienzo en blanco para empezar desde cero.

Haz clic en una plantilla para aplicarla. Su texto se convierte en capas normales y editables que puedes cambiar o quitar — nada queda fijado.

Elementos — formas, iconos, cintas y fondos

El panel Elementos — líneas, formas, iconos, cintas, bases y formas de fondo

El panel Elementos superpone gráficos sobre tu insignia:

  • Líneas — reglas horizontales / verticales.
  • Formas — rectángulos rellenos y con contorno, rectángulos redondeados, círculos y triángulos.
  • Iconos — 70 iconos pictográficos (premio, cerebro, certificado, código, corona, diploma, birrete, medalla, cohete, escudo con check, estrella, trofeo y muchos más), con búsqueda.
  • Cintas — 28 superposiciones decorativas de cinta, agrupadas en Rectas / Puntiagudas / Colas / Decorativas.
  • Bases — 80 formas de base recolorables en varias categorías (círculos, escudos, hexágonos, estrellas, medallas, sellos, coronas de laurel, estandartes, geométricas).

Cada icono, cinta y base se inserta en el color actual y puede recolorearse en cualquier momento.

Formas de fondo

Formas de fondo — un marco prediseñado aplicado como fondo de la insignia

Elementos → Formas de fondo contiene 68 marcos ya diseñados (la biblioteca de forma × paleta). Aplicar uno intercambia el marco de fondo de la insignia mientras mantiene tu texto y tus elementos encima — práctico cuando quieres una combinación concreta de forma/color sin una plantilla compuesta.

Subir una imagen personalizada

Usa el panel Subidas para añadir tu propio logotipo, foto o gráfico. Se aceptan PNG, JPEG y SVG, hasta 5 MB. La imagen se inserta como objeto de primer plano normal — se apila sobre el diseño y nunca borra el fondo. Para cambiar el fondo de la insignia, elige en su lugar una plantilla o una forma de fondo.

Añadir y dar estilo al texto

El panel Texto — encabezados, texto de cuerpo y combinaciones prediseñadas

El panel Texto ofrece:

  • Añadir encabezado / subencabezado / texto normal — objetos de texto con tamaño predefinido.
  • Combinaciones — bloques prediseñados como Certificate of Achievement, Awarded to o Verify at — cada línea sigue siendo editable de forma independiente.

Selecciona cualquier objeto de texto y aparece la barra de herramientas contextual sobre el lienzo:

Barra de herramientas contextual con el selector de fuente, el paso − / + de tamaño de fuente, color y alineación

  • Fuente — una biblioteca de 50 fuentes agrupadas en Sans, Serif, Manuscrita, Mono y Sistema. Elige una del desplegable; cada opción se previsualiza con su propia tipografía.
  • + Fuente — sube una tipografía de marca (TTF, WOFF, WOFF2, OTF) para la sesión actual.
  • Tamaño de fuente — el paso − / + (o escribe un número) redimensiona el texto seleccionado con precisión, sin arrastrar sus tiradores.
  • Color — establece el relleno del texto seleccionado (y el color de inserción predeterminado para las nuevas formas/iconos).
  • Alineación — seis botones alinean la selección a la izquierda / centro / derecha y arriba / medio / abajo respecto al lienzo.

Atributos dinámicos

El panel Atributos — tokens dinámicos resueltos por destinatario

El panel Atributos inserta tokens dinámicos, , , , , — como objetos de texto. Cada token se resuelve por destinatario en el momento de la concesión, así que un único diseño se personaliza solo para todos los que se lo entregues. Así es como pones el nombre del destinatario o la fecha de emisión en la propia insignia.

Códigos QR

El panel Códigos QR inserta un código escaneable vinculado a . En cada concesión emitida se resuelve a la página pública de verificación de esa concesión, de modo que cualquiera puede escanear la insignia impresa para confirmarla.

Capas

El panel Capas — reordena, oculta o elimina cada objeto

El panel Capas enumera todos los objetos del lienzo. Desde aquí puedes reordenar (traer al frente / enviar atrás), ocultar/mostrar, seleccionar y eliminar cada capa. El marco de fondo queda anclado abajo y permanece no interactivo, para que los elementos de primer plano reciban todos los clics.

Deshacer / Rehacer (Ctrl+Z / Ctrl+Shift+Z) recorren los últimos 20 cambios, y aparecen guías de ajuste discontinuas cuando arrastras un objeto cerca del centro del lienzo.

Guardar la insignia

La insignia terminada junto a sus detalles completados — lista para crear o guardar como borrador

No hay un paso de «exportación» aparte. Cuando tu diseño y tus detalles estén listos:

  • Crear insignia captura el lienzo como PNG, lo sube a IPFS y guarda la insignia junto con su diseño editable — así, reabrir la insignia restaura tus capas individuales para seguir editando.
  • Guardar borrador almacena una insignia en curso en el servidor (entre dispositivos). Los borradores aparecen en tu lista de Insignias con una marca de Borrador, y puedes retomar cualquiera de ellos más tarde.

Consejos para un buen diseño de insignia

  • Que sea sencillo — texto claro, sin desorden. Las insignias se muestran a menudo en tamaño pequeño.
  • Usa un contraste alto — haz que el texto se lea bien sobre el fondo.
  • Nombra la credencial — quien la vea debe entenderla de un vistazo.
  • Formato cuadrado — las insignias se muestran mejor en cuadrado.
  • Coherencia de marca — reutiliza los colores y las fuentes de tu organización en todas las insignias.
  • Guarda diseños reutilizables — cada insignia que creas también se guarda como una plantilla de cuenta desde la que puedes empezar la próxima vez (consulta Mis plantillas).

badges.ninja Documentation