Skip to content

Badge-ontwerper

De Badge-ontwerper is een visuele canvas-editor binnen badges.ninja waarmee je professionele badge-afbeeldingen kunt maken zonder gebruik te maken van ontwerpsoftware.

Badge-ontwerper — ingebed in het venster Badge aanmaken, naast de zijbalk met het formulier

Overzicht

De ontwerper opent zodra je op het afbeeldingsveld klikt tijdens het aanmaken of bewerken van een badge. Je krijgt een canvas-werkruimte waar je sjablonen, tekst en aangepaste achtergronden combineert om je badge-afbeelding samen te stellen.

Sjabloonkiezer met filters voor vorm en kleur

Een sjabloon kiezen

De ontwerper bevat meer dan 80 ingebouwde sjablonen, georganiseerd langs twee assen zodat je snel het juiste vindt:

  • 8 vormen — cirkel, afgerond vierkant, zeshoek, schild, achthoek, ruit, banier, zegel
  • 8 kleurpaletten — goud, zilver, brons, blauw, groen, karmozijn, paars, grafiet

Om er een te kiezen:

  1. Klik op Sjablonen in de werkbalk van de ontwerper.
  2. Gebruik de filters Vorm en Kleur bovenaan de kiezer om de lijst te beperken. De teller rechts toont hoeveel sjablonen overeenkomen (bijvoorbeeld 8 / 84).
  3. Klik op een sjabloon om het op het canvas toe te passen.

De gegenereerde sjablonen zijn bewust ingetogen — kies een vorm en palet en voeg daarna in de ontwerper je eigen tekst, iconen en linten toe.

Sjabloon toegepast op het canvas

Vormen, linten en iconen toevoegen

Vormen-popover

Iconen-popover met kleurbalk

Naast sjablonen biedt de ontwerper drie extra bibliotheken met elementen die je bovenop elk sjabloon kunt stapelen:

  • Vormen — meer dan 80 vectorvormen (cirkels, schilden, zeshoeken, sterren, medailles, zegels, kransen, banieren, geometrische figuren) ingedeeld in categorieën
  • Linten — 20 decoratieve lintoverlays
  • Iconen — 50 pictografische iconen (atoom, onderscheiding, brein, aktetas, certificaat, code, kroon, diamant, diploma, afstudeerhoed, gloeilamp, medaille, raket, schild-vinkje, ster, doelwit, trofee, …)

Kies er een uit een willekeurige popover en het element wordt op het canvas ingevoegd in de huidige kleur. Met de Kleurbalk binnen elke popover kun je het element opnieuw kleuren voordat je het invoegt — handig wanneer je een andere kleur dan de standaardkleur in de werkbalk wilt.

Een aangepaste achtergrond of afbeelding uploaden

Je kunt een eigen afbeelding uploaden om als achtergrond of als laag erbovenop te gebruiken:

  1. Klik op Uploaden in de werkbalk van de ontwerper.
  2. Kies een afbeeldingsbestand van je computer (PNG of JPG aanbevolen).
  3. De afbeelding wordt op het canvas geplaatst als een selecteerbaar object — sleep, schaal, roteer of stuur het achter andere elementen.

Een afbeelding uploaden wist het sjabloon niet en ook geen bestaande lagen — ze komt er gewoon bovenop.

Voor volledige achtergronden gebruik je een vierkante afbeelding van minimaal 600×600 pixels.

Tekst toevoegen

Tekstelement toegevoegd aan het canvas

  1. Klik op de knop Tekst in de werkbalk.
  2. Er verschijnt een nieuw tekstelement op het canvas.
  3. Klik op de tekst om die te selecteren en typ je inhoud.
  4. Sleep het tekstelement om het op het canvas te positioneren.

Je kunt meerdere tekstelementen toevoegen voor verschillende delen van je badge (titel, ontvanger, datum, enzovoort).

Lettertypen wijzigen

Tekst gewisseld van Arial naar Georgia — serif-lettertype toegepast op de geselecteerde tekst

De ontwerper bevat 11 lettertypen (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

  1. Selecteer een tekstelement op het canvas.
  2. Klik op de vervolgkeuzelijst Lettertype in de werkbalk.
  3. Kies uit de beschikbare lettertypen.

In het voorbeeld zie je hoe elke optie eruitziet voordat je kiest.

Kleur wijzigen

Kleurenkiezer open; kies een hex-waarde — goud geeft sterk contrast op donkerblauwe sjablonen

De Kleur-kiezer in de werkbalk regelt twee dingen tegelijk:

  • Geselecteerde tekst — kiest de vulkleur voor elk geselecteerd tekstelement.
  • Standaard invoegkleur — voor vormen, linten en iconen die je daarna invoegt, en voor geselecteerde SVG-objecten (herkleurt lijnen en vullingen ter plekke).

Kies een kleur uit het palet of voer een hex-code in. Binnen elke popover voor vormen/linten/iconen is er ook een kleinere Kleurbalk voor eenmalige kleuren die de standaardkleur in de werkbalk niet wijzigen.

Elementen uitlijnen

Tekst horizontaal en verticaal gecentreerd via de uitlijningsknoppen in de werkbalk

De rij met 6 uitlijningsknoppen werkt op de geselecteerde objecten ten opzichte van het canvas:

KnopActie
Links uitlijnenVasthouden aan de linkerrand van het canvas
Horizontaal centrerenCentreren op de X-as van het canvas
Rechts uitlijnenVasthouden aan de rechterrand van het canvas
Boven uitlijnenVasthouden aan de bovenrand van het canvas
Verticaal centrerenCentreren op de Y-as van het canvas
Onder uitlijnenVasthouden aan de onderrand van het canvas

Wanneer je een element in de buurt van het midden van het canvas sleept, verschijnen gestippelde paarse uitlijnhulplijnen en wordt het object perfect uitgelijnd.

Meervoudige selectie en lagen

  • Houd Shift ingedrukt en klik om meerdere objecten te selecteren, of sleep een selectievak over het canvas.
  • Gebruik Naar achter / Naar voren om de z-volgorde te beheren.
  • Druk op Delete of klik op de knop Verwijderen in de werkbalk om de selectie te verwijderen.
  • Ongedaan maken / Opnieuw uitvoeren (of Ctrl+Z / Ctrl+Shift+Z) loopt door de laatste 20 wijzigingen.

Elementen verwijderen

  1. Selecteer het element dat je wilt verwijderen (of shift-klik voor meerdere).
  2. Klik op de knop Verwijderen in de werkbalk of druk op de toets Delete.

Tips voor een goed badge-ontwerp

  • Houd het eenvoudig — gebruik duidelijke tekst en vermijd rommel. De badge wordt vaak klein weergegeven.
  • Gebruik hoog contrast — zorg dat de tekst leesbaar is tegen de achtergrond.
  • Zet de naam van de badge erop — ontvangers en kijkers moeten de referentie in één oogopslag begrijpen.
  • Vierkant formaat — badges komen het beste tot hun recht als vierkante afbeeldingen.
  • Merkconsistentie — gebruik dezelfde kleuren en lettertypen van je organisatie op alle badges.
  • Test op kleine formaten — bekijk je badge op 100x100 pixels om leesbaarheid te controleren.

De badge-afbeelding opslaan

Eindresultaat van de badge

Wanneer je tevreden bent met je ontwerp, klik je op Klaar of Opslaan in de ontwerper. De afbeelding wordt van het canvas vastgelegd en aan je badge gekoppeld. Ze wordt naar IPFS geüpload wanneer je de badge aanmaakt of opslaat.

badges.ninja Documentation