Skip to content

Concepteur de badges

Le concepteur de badges est un éditeur visuel intégré à badges.ninja qui vous permet de créer des images de badges professionnelles sans aucun outil de design.

Concepteur de badges — intégré dans la fenêtre Créer un badge à côté de la barre latérale du formulaire

Aperçu

Le concepteur s'ouvre lorsque vous cliquez sur le champ image en créant ou en modifiant un badge. Il offre un espace de travail de type canevas où vous pouvez combiner modèles, texte et arrière-plans personnalisés pour créer l'image de votre badge.

Sélecteur de modèles avec filtres forme + couleur

Choisir un modèle

Le concepteur inclut plus de 80 modèles intégrés organisés selon deux dimensions pour en trouver un rapidement :

  • 8 formes — Cercle, Carré arrondi, Hexagone, Bouclier, Octogone, Losange, Banderole, Sceau
  • 8 palettes de couleurs — Or, Argent, Bronze, Bleu, Vert, Cramoisi, Violet, Graphite

Pour en choisir un :

  1. Cliquez sur Modèles dans la barre d'outils du concepteur.
  2. Utilisez les filtres Forme et Couleur en haut du sélecteur pour affiner la liste. Le compteur à droite indique combien de modèles correspondent (par ex. 8 / 84).
  3. Cliquez sur un modèle pour l'appliquer au canevas.

Les modèles générés sont volontairement épurés — choisissez une forme et une palette, puis ajoutez votre propre texte, vos icônes et vos rubans dans le concepteur.

Modèle appliqué au canevas

Ajouter formes, rubans et icônes

Popover des formes

Popover des icônes avec barre de couleur

Au-delà des modèles, le concepteur propose trois bibliothèques d'éléments supplémentaires que vous pouvez superposer à n'importe quel modèle :

  • Formes — plus de 80 formes vectorielles (cercles, boucliers, hexagones, étoiles, médailles, sceaux, couronnes de laurier, banderoles, formes géométriques) regroupées par catégories
  • Rubans — 20 superpositions décoratives de ruban
  • Icônes — 50 pictogrammes (atome, prix, cerveau, porte-documents, certificat, code, couronne, diamant, diplôme, toque de diplômé, ampoule, médaille, fusée, bouclier validé, étoile, cible, trophée, …)

Choisissez-en un depuis n'importe quel popover et il sera inséré sur le canevas dans la couleur courante. La barre de couleur à l'intérieur de chaque popover vous permet de recolorer l'élément avant de l'insérer — utile si vous voulez une couleur différente de celle par défaut de la barre d'outils.

Importer un arrière-plan ou une image personnalisée

Vous pouvez importer votre propre image à utiliser comme arrière-plan ou comme calque supérieur :

  1. Cliquez sur Importer dans la barre d'outils du concepteur.
  2. Sélectionnez un fichier image depuis votre ordinateur (PNG ou JPG recommandé).
  3. L'image est placée sur le canevas comme objet sélectionnable — déplacez-la, mettez-la à l'échelle, faites-la pivoter ou envoyez-la derrière d'autres éléments.

Importer une image n'efface pas le modèle ni aucun calque existant — elle se superpose simplement.

Pour un arrière-plan plein, utilisez une image carrée d'au moins 600×600 pixels.

Ajouter du texte

Élément texte ajouté au canevas

  1. Cliquez sur le bouton Texte dans la barre d'outils.
  2. Un nouvel élément texte apparaît sur le canevas.
  3. Cliquez sur le texte pour le sélectionner, puis saisissez votre contenu.
  4. Faites glisser l'élément pour le positionner sur le canevas.

Vous pouvez ajouter plusieurs éléments texte pour différentes parties de votre badge (titre, destinataire, date, etc.).

Changer la police

Texte passé de Arial à Georgia — police serif appliquée au texte sélectionné

Le concepteur inclut 11 polices (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display) :

  1. Sélectionnez un élément texte sur le canevas.
  2. Cliquez sur la liste déroulante Police dans la barre d'outils.
  3. Choisissez parmi les polices disponibles.

L'aperçu montre l'apparence de chaque option avant votre sélection.

Changer la couleur

Sélecteur de couleur ouvert ; choisissez n'importe quel hex — l'or donne un fort contraste sur des modèles bleu foncé

Le sélecteur Couleur de la barre d'outils contrôle deux choses à la fois :

  • Texte sélectionné — choisit la couleur de remplissage de tout élément texte sélectionné.
  • Couleur d'insertion par défaut — pour les formes, rubans et icônes insérés ensuite, ainsi que pour les objets SVG sélectionnés (recolore les contours et remplissages sur place).

Choisissez une couleur dans la palette ou saisissez un code hex. À l'intérieur de chaque popover de forme/ruban/icône, il y a aussi une barre de couleur plus petite pour des choix ponctuels qui ne modifient pas la valeur par défaut de la barre.

Aligner les éléments

Texte centré horizontalement et verticalement via les boutons d'alignement de la barre

La rangée de 6 boutons d'alignement agit sur le(s) objet(s) sélectionné(s) par rapport au canevas :

BoutonAction
Aligner à gaucheFixer au bord gauche du canevas
Centrer horizontalementCentrer sur l'axe X du canevas
Aligner à droiteFixer au bord droit du canevas
Aligner en hautFixer au bord supérieur du canevas
Centrer verticalementCentrer sur l'axe Y du canevas
Aligner en basFixer au bord inférieur du canevas

Quand vous faites glisser un élément près du centre du canevas, des guides d'accrochage pointillés violets apparaissent et l'objet s'aligne parfaitement.

Sélection multiple et superposition

  • Maintenez Shift et cliquez pour sélectionner plusieurs objets, ou tracez un cadre de sélection sur le canevas.
  • Utilisez Envoyer à l'arrière / Ramener à l'avant pour contrôler l'ordre Z.
  • Appuyez sur Suppr ou cliquez sur le bouton Supprimer de la barre pour retirer la sélection.
  • Annuler / Rétablir (ou Ctrl+Z / Ctrl+Shift+Z) parcourent les 20 derniers changements.

Supprimer des éléments

  1. Sélectionnez l'élément à retirer (ou shift-clic pour plusieurs).
  2. Cliquez sur le bouton Supprimer de la barre d'outils ou appuyez sur la touche Suppr.

Conseils pour un bon design de badge

  • Faites simple — utilisez un texte clair et évitez le superflu. Le badge sera souvent affiché à petite taille.
  • Contraste élevé — assurez-vous que le texte reste lisible sur l'arrière-plan.
  • Incluez le nom du badge — destinataires et spectateurs doivent comprendre la certification d'un coup d'œil.
  • Format carré — les badges s'affichent mieux en images carrées.
  • Cohérence de marque — utilisez les couleurs et polices de votre organisation sur tous les badges.
  • Testez en petit — prévisualisez votre badge en 100x100 pixels pour garantir la lisibilité.

Enregistrer l'image du badge

Badge final composé

Quand le design vous convient, cliquez sur Terminé ou Enregistrer dans le concepteur. L'image est capturée depuis le canevas et attachée à votre badge. Elle sera uploadée sur IPFS lors de la création ou de l'enregistrement du badge.

badges.ninja Documentation