Diseñador de insignias

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

Resumen

El diseñador se abre al hacer clic en el campo de imagen mientras creas o editas una insignia. Ofrece un área de trabajo tipo lienzo donde puedes combinar plantillas, texto y fondos personalizados para crear la imagen de tu insignia.

Seleccionar una plantilla

El diseñador incluye más de 80 plantillas integradas organizadas en dos dimensiones para que encuentres una rápidamente:

• 8 formas — Círculo, Cuadrado redondeado, Hexágono, Escudo, Octágono, Diamante, Estandarte, Sello
• 8 paletas de color — Oro, Plata, Bronce, Azul, Verde, Carmesí, Púrpura, Grafito

Para elegir una:

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

Las plantillas generadas son deliberadamente limpias — elige una forma y una paleta, y luego añade tu propio texto, iconos y cintas en el diseñador.

Añadir formas, cintas e iconos

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

• Formas — más de 80 formas vectoriales (círculos, escudos, hexágonos, estrellas, medallas, sellos, coronas de laurel, estandartes, formas geométricas) agrupadas por categorías
• Cintas — 20 superposiciones decorativas de cinta
• Iconos — 50 iconos pictográficos (átomo, premio, cerebro, maletín, certificado, código, corona, diamante, diploma, birrete, bombilla, medalla, cohete, escudo con check, estrella, diana, trofeo, …)

Elige uno desde cualquier popover y se insertará en el lienzo con el color actual. La barra de color dentro de cada popover te permite recolorear el elemento antes de insertarlo — útil cuando quieres un color distinto al predeterminado de la barra de herramientas.

Subir un fondo o imagen personalizados

Puedes subir tu propia imagen para usarla como fondo o como capa encima:

1. Haz clic en Subir en la barra de herramientas del diseñador.
2. Selecciona un archivo de imagen desde tu equipo (se recomienda PNG o JPG).
3. La imagen se coloca en el lienzo como objeto seleccionable — arrástralo, escálalo, rótalo o envíalo detrás de otros elementos.

Subir una imagen no borra la plantilla ni ninguna capa existente — simplemente se apila encima.

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

Añadir texto

1. Haz clic en el botón Texto de la barra de herramientas.
2. Aparece un nuevo elemento de texto en el lienzo.
3. Haz clic en el texto para seleccionarlo y escribe tu contenido.
4. Arrastra el elemento para posicionarlo en el lienzo.

Puedes añadir varios elementos de texto para distintas partes de tu insignia (título, destinatario, fecha, etc.).

Cambiar la fuente

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

1. Selecciona un elemento de texto en el lienzo.
2. Haz clic en el desplegable Fuente de la barra de herramientas.
3. Elige una de las fuentes disponibles.

La vista previa de la fuente muestra cómo se verá cada opción antes de seleccionarla.

Cambiar el color

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

• Texto seleccionado — elige el color de relleno de cualquier elemento de texto seleccionado.
• Color de inserción predeterminado — para las formas, cintas e iconos que insertes a continuación, además de objetos SVG seleccionados (recolorea trazos y rellenos en el sitio).

Elige un color de la paleta o introduce un código hex. Dentro de cada popover de forma/cinta/icono también hay una barra de color más pequeña para elecciones puntuales que no cambian el valor predeterminado de la barra.

Alinear elementos

La fila de 6 botones de alineación actúa sobre los objeto(s) seleccionado(s) con respecto al lienzo:

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

Cuando arrastras un elemento cerca del centro del lienzo, aparecen guías de ajuste discontinuas en color púrpura y el objeto se ajusta a la alineación perfecta.

Selección múltiple y capas

• Mantén pulsada Shift y haz clic para seleccionar varios objetos, o arrastra un recuadro de selección por el lienzo.
• Usa Enviar al fondo / Traer al frente para controlar el orden Z.
• Pulsa Suprimir o el botón Eliminar de la barra para borrar la selección.
• Deshacer / Rehacer (o Ctrl+Z / Ctrl+Shift+Z) recorren los últimos 20 cambios.

Eliminar elementos

1. Selecciona el elemento que quieres quitar (o haz shift-clic para varios).
2. Haz clic en el botón Eliminar de la barra o pulsa la tecla Supr.

Consejos para un buen diseño de insignia

• Que sea sencillo — usa texto claro y evita el desorden. La insignia se mostrará a menudo en tamaños pequeños.
• Contraste alto — asegúrate de que el texto se lea bien sobre el fondo.
• Incluye el nombre de la insignia — los destinatarios y espectadores deben entender la credencial de un vistazo.
• Formato cuadrado — las insignias se muestran mejor como imágenes cuadradas.
• Coherencia de marca — usa los colores y fuentes de tu organización en todas las insignias.
• Prueba en tamaño pequeño — previsualiza tu insignia a 100x100 píxeles para asegurar la legibilidad.

Guardar la imagen de la insignia

Cuando estés conforme con tu diseño, haz clic en Hecho o Guardar en el diseñador. La imagen se captura del lienzo y se adjunta a tu insignia. Se subirá a IPFS cuando crees o guardes la insignia.