Diseñador de insignias

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

Resumen

El diseñador se abre directamente dentro de la ventana Create / Edit Badge. Tiene tres partes:

• Barra lateral izquierda: cambia el panel central entre Templates, Uploads, Elements, Text, Attributes, QR Codes y Layers.
• Panel: las herramientas del modo seleccionado en la barra lateral.
• Lienzo: una vista previa en vivo y editable 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) están justo debajo del lienzo, de modo que el diseño y la información de la credencial conviven en una sola ventana, sin un paso aparte.

Empezar desde una plantilla

Haz clic en Templates 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 editable: organización, título, subtítulo y un sello de verificación) en ocho paletas de colores (Gold, Silver, Bronze, Blue, Green, Crimson, Purple, Graphite). Usa el filtro Category para acotar la lista, o Blank canvas para empezar desde cero.

Haz clic en una plantilla para aplicarla. Su texto se convierte en capas normales y editables que puedes cambiar o eliminar: nada queda fijo.

Elements — Formas, iconos, cintas y fondos

El panel Elements superpone gráficos sobre tu insignia:

• Lines: reglas horizontales / verticales.
• Shapes: rectángulos, rectángulos redondeados, círculos y triángulos, rellenos y con contorno.
• Icons: 70 iconos pictográficos (award, brain, certificate, code, crown, diploma, graduation-cap, medal, rocket, shield-check, star, trophy y muchos más), con búsqueda.
• Ribbons: 28 cintas decorativas superpuestas, agrupadas en Straight / Pointed / Tails / Decorative.
• Bases: 80 formas base recoloreables en varias categorías (círculos, escudos, hexágonos, estrellas, medallas, sellos, coronas de laurel, banderines, geométricas).

Cada icono, cinta y base se inserta en el color actual y puedes recolorearlo en cualquier momento.

Formas de fondo

Elements → Background shapes contiene 68 marcos listos para usar (la biblioteca de forma × paleta). Al aplicar uno, se cambia el marco de fondo de la insignia conservando tu texto y tus elementos por encima, algo útil cuando quieres una combinación concreta de forma y color sin una plantilla completa.

Subir una imagen personal

Usa el panel Uploads para añadir tu propio logotipo, foto o gráfico. Se aceptan PNG, JPEG y SVG, de hasta 5 MB. La imagen se inserta como un objeto normal de primer plano: 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 Text ofrece:

• Add heading / subheading / normal text: objetos de texto con tamaño predefinido.
• Combinations: 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 aparecerá la barra de herramientas contextual encima del lienzo:

• Font: una biblioteca de 50 fuentes agrupadas en Sans, Serif, Handwriting, Mono y System. Elige una en el menú desplegable; cada opción se muestra con su propia tipografía.
• + Font: sube una tipografía de tu marca (TTF, WOFF, WOFF2, OTF) para la sesión actual.
• Font size: el control − / + (o escribir un número) cambia el tamaño del texto seleccionado con precisión, sin arrastrar sus controladores.
• Colour: define el relleno del texto seleccionado (y el color de inserción predeterminado para nuevas formas e iconos).
• Alignment: seis botones alinean la selección a la izquierda / centro / derecha y arriba / en medio / abajo respecto al lienzo.

Atributos dinámicos

El panel Attributes inserta tokens dinámicos (, , , , , ) como objetos de texto. Cada token se resuelve para cada destinatario en el momento de la emisión, así que un único diseño se personaliza solo para cada persona a la que lo emites. Así es como puedes poner en la propia insignia el nombre del destinatario o la fecha de emisión.

Códigos QR

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

Capas

El panel Layers lista todos los objetos del lienzo. Desde aquí puedes reordenar (traer adelante / enviar atrás), ocultar/mostrar, seleccionar y eliminar cada capa. El marco de fondo queda fijado en la parte inferior y no es interactivo, para que los elementos de primer plano reciban todos los clics.

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

Guardar la insignia

No hay un paso de «exportar» aparte. Cuando el diseño y los detalles estén listos:

• Create Badge captura el lienzo como PNG, lo sube a nuestro CDN de imágenes (Amazon S3, servido bajo una URL inmutable direccionada por contenido) y guarda la insignia junto con su diseño editable, de modo que al reabrirla se restauran tus capas individuales para seguir editando.
• Save Draft guarda en el servidor una insignia en curso (disponible en todos tus dispositivos). Los borradores aparecen en tu lista de Insignias con una marca Draft, y puedes retomar cualquiera de ellos más tarde.

Consejos para un buen diseño de insignia

• Que sea sencillo: texto claro y poco desorden. Las insignias suelen mostrarse en tamaño pequeño.
• Usa un contraste alto: haz que el texto se lea bien sobre el fondo.
• Pon nombre a la credencial: quien la vea debería entenderla de un vistazo.
• Formato cuadrado: las insignias se ven mejor en formato cuadrado.
• Coherencia de marca: reutiliza los colores y las fuentes de tu organización en todas tus insignias.
• Guarda diseños reutilizables: cada insignia que creas también se guarda como plantilla de tu cuenta desde la que puedes empezar la próxima vez (consulta My Templates).