Diseñador de credenciales

El Diseñador de credenciales es un editor visual incorporado en badges.ninja que te permite componer imágenes profesionales sin tener que usar herramientas de diseño externas.

Resumen

El diseñador se abre al pulsar el campo de imagen durante la creación o edición de una credencial. Ofrece un lienzo donde combinar plantillas, textos y fondos propios para componer la imagen de la credencial.

Elegir una plantilla

El diseñador trae más de 80 plantillas integradas organizadas en dos dimensiones para que las encuentres rápido:

• 8 formas — Círculo, Cuadrado redondeado, Hexágono, Escudo, Octágono, Rombo, Banderín, Sello
• 8 paletas cromáticas — Oro, Plata, Bronce, Azul, Verde, Carmesí, Morado, Grafito

Para elegir una:

1. Pulsa Plantillas en la barra de herramientas del diseñador.
2. Usa los filtros Forma y Color de la parte superior para acotar la lista. El contador de la derecha indica cuántas plantillas coinciden (p. ej. 8 / 84).
3. Pulsa una plantilla para aplicarla al lienzo.

Las plantillas generadas son intencionadamente sobrias — elige una forma y una paleta y luego añade tu propio texto, íconos y cintas dentro del diseñador.

Añadir formas, cintas e íconos

Más allá de las plantillas, el diseñador incluye tres bibliotecas adicionales de recursos que puedes colocar sobre cualquier plantilla:

• Formas — más de 80 formas vectoriales (círculos, escudos, hexágonos, estrellas, medallas, sellos, coronas, banderines, figuras geométricas) agrupadas por categorías
• Cintas — 20 cintas decorativas para superponer
• Íconos — 50 pictogramas (átomo, trofeo, cerebro, maletín, certificado, código, corona, rombo, diploma, birrete, bombilla, medalla, cohete, escudo marcado, estrella, diana, copa, …)

Elige uno desde cualquier popover y se coloca en el lienzo con el color actual. La Barra de color dentro de cada popover te permite recolorear el recurso antes de insertarlo — útil cuando deseas un color distinto al de la barra principal.

Subir un fondo o imagen personal

Puedes cargar tu propia imagen para utilizarla como fondo o como capa superior:

1. Pulsa Subir en la barra de herramientas.
2. Elige un archivo desde tu equipo (se recomiendan PNG o JPG).
3. La imagen aparece en el lienzo como un objeto seleccionable — puedes arrastrarlo, escalarlo, rotarlo o enviarlo detrás de otros elementos.

Cargar una imagen no borra la plantilla ni las capas existentes — simplemente se apila encima.

Para fondos completos, usa una imagen cuadrada de al menos 600×600 píxeles.

Añadir texto

1. Pulsa el botón Texto en la barra de herramientas.
2. Aparece un elemento de texto nuevo sobre el lienzo.
3. Pulsa el texto para seleccionarlo y escribe tu contenido.
4. Arrastra el elemento para colocarlo donde prefieras.

Puedes incorporar varios elementos de texto para distintas partes de tu credencial (título, destinatario, fecha, etc.).

Cambiar tipografía

El diseñador incluye 11 tipografías (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

1. Elige un elemento de texto sobre el lienzo.
2. Pulsa el desplegable Tipografía en la barra de herramientas.
3. Escoge entre las tipografías disponibles.

La previsualización muestra cómo luce cada opción antes de aplicarla.

Cambiar color

El selector Color de la barra controla dos cosas a la vez:

• Texto seleccionado — define el color de relleno del texto elegido.
• Color de inserción por defecto — para las formas, cintas e íconos que insertes a continuación, y para los objetos SVG seleccionados (recolorea trazos y rellenos al vuelo).

Elige un color desde la paleta o introduce un código hex. Cada popover de forma, cinta o ícono incorpora además una Barra de color menor para elecciones puntuales sin alterar el color de la barra principal.

Alinear elementos

La fila de 6 botones de alineación opera sobre los objetos seleccionados respecto al lienzo:

Botón	Acción
Alinear a la izquierda	Fija el objeto en el borde izquierdo del lienzo
Centrar horizontalmente	Centra sobre el eje X del lienzo
Alinear a la derecha	Fija el objeto en el borde derecho del lienzo
Alinear arriba	Fija el objeto en el borde superior del lienzo
Centrar verticalmente	Centra sobre el eje Y del lienzo
Alinear abajo	Fija el objeto en el borde inferior del lienzo

Al arrastrar un elemento cerca del centro, aparecen guías de ajuste de color morado y el objeto se alinea con precisión.

Selección múltiple y capas

• Mantén Shift y pulsa para elegir varios objetos, o arrastra un rectángulo de selección sobre el lienzo.
• Emplea Enviar al fondo o Traer al frente para cambiar el orden Z.
• Pulsa Delete o usa el botón Eliminar para quitar la selección.
• Deshacer / Rehacer (o Ctrl+Z / Ctrl+Shift+Z) recorren los últimos 20 cambios.

Eliminar elementos

1. Elige el elemento a suprimir (o usa shift-clic para varios).
2. Pulsa el botón Eliminar en la barra, o la tecla Delete.

Consejos de buen diseño

• Simplicidad — usa texto claro y evita saturar. Muchas veces la credencial se mostrará en tamaños pequeños.
• Contraste alto — asegúrate de que el texto sea legible sobre el fondo.
• Incluye el nombre de la credencial — destinatarios y verificadores deben entenderla de un vistazo.
• Formato cuadrado — las credenciales lucen mejor como imágenes cuadradas.
• Coherencia de marca — utiliza los colores y tipografías de tu organización en todas las credenciales.
• Prueba a tamaños pequeños — previsualiza la imagen a 100x100 píxeles para comprobar legibilidad.

Guardar la imagen de la credencial

Cuando estés conforme con el diseño, pulsa Listo o Guardar en el diseñador. La imagen se captura desde el lienzo y se asocia a tu credencial. Se subirá a IPFS cuando crees o guardes la credencial.