Skip to content

Badge-ontwerper ​

De Badge-ontwerper is een visuele canvas-editor met drie kolommen, ingebouwd in badges.ninja, waarmee je professionele badge-afbeeldingen maakt zonder externe ontwerptools.

De badge-editor met 3 kolommen — linkerbalk, paneel en canvas — met daaronder de badge-details

Overzicht ​

De ontwerper opent direct in het venster Badge maken / bewerken. Hij bestaat uit drie delen:

  • Linkerbalk — schakelt het middelste paneel tussen Templates, Uploads, Elements, Text, Attributes, QR Codes en Layers.
  • Paneel — de hulpmiddelen voor de geselecteerde modus van de balk.
  • Canvas — een live, bewerkbare voorvertoning van de badge. Alles wat je toevoegt is een echt, selecteerbaar object dat je kunt verplaatsen, opnieuw opmaken, herordenen of verwijderen.

De badge-details (Issuer, Name, Description, Criteria en de Share Text) staan direct onder het canvas, zodat het ontwerp en de referentiegegevens samen in één venster staan — er is geen aparte stap.

Beginnen met een sjabloon ​

Klik op Templates in de balk om de ingebouwde ontwerpen te bekijken. De Recognition-familie biedt een volledig samengestelde, professionele badge — een gevormd kader plus bewerkbare plaatsaanduidingen (organisatie, titel, ondertitel en een verificatiezegel) — in acht kleurenpaletten (Gold, Silver, Bronze, Blue, Green, Crimson, Purple, Graphite). Gebruik het filter Category om de lijst te beperken, of Blank canvas om helemaal opnieuw te beginnen.

Klik op een sjabloon om het toe te passen. De tekst wordt gewone, bewerkbare lagen die je kunt wijzigen of verwijderen — er is niets ingebakken.

Elements — vormen, pictogrammen, linten & achtergronden ​

Het paneel Elements — lijnen, vormen, pictogrammen, linten, bases en achtergrondvormen

Het paneel Elements plaatst afbeeldingen bovenop je badge:

  • Lines — horizontale / verticale lijnen.
  • Shapes — gevulde en omlijnde rechthoeken, afgeronde rechthoeken, cirkels en driehoeken.
  • Icons — 70 pictografische pictogrammen (award, brain, certificate, code, crown, diploma, graduation-cap, medal, rocket, shield-check, star, trophy en nog veel meer), doorzoekbaar.
  • Ribbons — 28 decoratieve lintoverlays, gegroepeerd in Straight / Pointed / Tails / Decorative.
  • Bases — 80 herkleurbare basisvormen in verschillende categorieën (cirkels, schilden, zeshoeken, sterren, medailles, zegels, kransen, banners, geometrisch).

Elk pictogram, lint en elke basis wordt ingevoegd in de huidige kleur en kan op elk moment worden herkleurd.

Achtergrondvormen ​

Achtergrondvormen — een kant-en-klaar kader toegepast als badge-achtergrond

Elements → Background shapes bevat 68 kant-en-klare kaders (de bibliotheek van vorm × palet). Als je er een toepast, wordt het achtergrondkader van de badge vervangen terwijl je tekst en elementen er bovenop blijven staan — handig als je een specifieke vorm-/kleurcombinatie wilt zonder een samengesteld sjabloon.

Een eigen afbeelding uploaden ​

Gebruik het paneel Uploads om je eigen logo, foto of afbeelding toe te voegen. PNG, JPEG en SVG worden geaccepteerd, tot 5 MB. De afbeelding wordt ingevoegd als een gewoon voorgrondobject — hij komt bovenop het ontwerp te liggen en wist de achtergrond nooit. Om de badge-achtergrond te wijzigen, kies je in plaats daarvan een sjabloon of een achtergrondvorm.

Tekst toevoegen & opmaken ​

Het paneel Text — koppen, lopende tekst en kant-en-klare combinaties

Het paneel Text biedt:

  • Add heading / subheading / normal text — tekstobjecten met een vooraf ingestelde grootte.
  • Combinations — kant-en-klare stapels zoals Certificate of Achievement, Awarded to of Verify at — elke regel blijft los bewerkbaar.

Selecteer een tekstobject en de contextuele werkbalk verschijnt boven het canvas:

Contextuele werkbalk met lettertypekiezer, − / + voor lettergrootte, kleur en uitlijning

  • Font — een bibliotheek van 50 lettertypen, gegroepeerd in Sans, Serif, Handwriting, Mono en System. Kies er een uit de keuzelijst; elke optie wordt in zijn eigen lettertype getoond.
  • + Font — upload een huisstijllettertype (TTF, WOFF, WOFF2, OTF) voor de huidige sessie.
  • Font size — met de − / +-knoppen (of door een getal te typen) pas je de geselecteerde tekst nauwkeurig aan, zonder aan de handvatten te slepen.
  • Colour — stelt de vulkleur van de geselecteerde tekst in (en de standaardkleur voor nieuwe vormen/pictogrammen).
  • Alignment — zes knoppen lijnen de selectie uit links / midden / rechts en boven / midden / onder ten opzichte van het canvas.

Dynamische attributen ​

Het paneel Attributes — dynamische tokens die per ontvanger worden ingevuld

Het paneel Attributes voegt dynamische tokens in — , , , , , — als tekstobjecten. Elk token wordt per ontvanger bij uitgifte ingevuld, zodat één ontwerp zichzelf personaliseert voor iedereen aan wie je het uitgeeft. Zo zet je de naam van de ontvanger of de uitgiftedatum op de badge zelf.

QR-codes ​

Het paneel QR Codes voegt een scanbare code in die is gekoppeld aan . Bij elke uitgegeven referentie verwijst die naar de publieke verificatiepagina van die referentie, zodat iedereen de afgedrukte badge kan scannen om die te bevestigen.

Layers ​

Het paneel Layers — herorden, verberg of verwijder elk object

Het paneel Layers toont elk object op het canvas. Vanaf hier kun je elke laag herordenen (naar voren halen / naar achteren sturen), verbergen/tonen, selecteren en verwijderen. Het achtergrondkader zit vast onderaan en blijft niet-interactief, zodat voorgrondelementen alle klikken krijgen.

Undo / Redo (Ctrl+Z / Ctrl+Shift+Z) doorloopt de laatste 20 wijzigingen, en gestippelde uitlijnhulplijnen verschijnen wanneer je een object bij het midden van het canvas sleept.

De badge opslaan ​

De voltooide badge naast de ingevulde details — klaar om te maken of op te slaan als concept

Er is geen aparte "exporteer"-stap. Wanneer je ontwerp en details klaar zijn:

  • Create Badge legt het canvas vast als PNG, uploadt die naar ons afbeeldings-CDN (Amazon S3, geserveerd onder een onveranderlijke inhoudsgeadresseerde URL) en slaat de badge op samen met het bewerkbare ontwerp — zodat je bij het heropenen van de badge je afzonderlijke lagen terugkrijgt voor verdere bewerking.
  • Save Draft slaat een badge in uitvoering server-side op (op al je apparaten). Concepten verschijnen in je badge-lijst met de markering Draft, en je kunt ze later gewoon weer oppakken.

Tips voor een goed badge-ontwerp ​

  • Houd het eenvoudig — duidelijke tekst, zo min mogelijk rommel. Badges worden vaak klein weergegeven.
  • Gebruik hoog contrast — maak tekst leesbaar tegen de achtergrond.
  • Geef de referentie een naam — kijkers moeten het in één oogopslag begrijpen.
  • Vierkant formaat — badges komen het best uit in vierkant formaat.
  • Consistente huisstijl — gebruik de kleuren en lettertypen van je organisatie opnieuw voor al je badges.
  • Bewaar herbruikbare ontwerpen — elke badge die je maakt, wordt ook opgeslagen als accountsjabloon waarmee je de volgende keer kunt beginnen (zie My Templates).

badges.ninja Documentation