Badge-Designer

Der Badge-Designer ist ein visueller Canvas-Editor mit drei Spalten, der in badges.ninja integriert ist und mit dem du professionelle Badge-Bilder ganz ohne externe Design-Tools erstellen kannst.

Überblick

Der Designer öffnet sich direkt im Fenster Create / Edit Badge. Er besteht aus drei Teilen:

• Linke Leiste — schaltet das mittlere Panel zwischen Templates, Uploads, Elements, Text, Attributes, QR Codes und Layers um.
• Panel — die Werkzeuge für den in der Leiste gewählten Modus.
• Canvas — eine live bearbeitbare Vorschau des Badges. Alles, was du hinzufügst, ist ein echtes, auswählbares Objekt, das du verschieben, umgestalten, neu anordnen oder löschen kannst.

Die Badge-Details (Issuer, Name, Description, Criteria und der Share Text) befinden sich direkt unter dem Canvas, sodass Design und Nachweisinformationen in einem Fenster zusammenliegen – es gibt keinen separaten Schritt.

Mit einer Vorlage beginnen

Klicke in der Leiste auf Templates, um die integrierten Designs zu durchsuchen. Die Recognition-Familie liefert ein vollständig gestaltetes, professionelles Badge – einen geformten Rahmen plus bearbeitbare Platzhaltertexte (Organisation, Titel, Untertitel und ein Verifizierungssiegel) – in acht Farbpaletten (Gold, Silver, Bronze, Blue, Green, Crimson, Purple, Graphite). Mit dem Category-Filter grenzt du die Liste ein, mit Blank canvas startest du bei null.

Klicke auf eine Vorlage, um sie anzuwenden. Ihre Texte werden zu normalen, bearbeitbaren Ebenen, die du ändern oder entfernen kannst – nichts ist fest eingebrannt.

Elements — Formen, Icons, Bänder & Hintergründe

Das Elements-Panel legt Grafiken über dein Badge:

• Lines — horizontale / vertikale Linien.
• Shapes — gefüllte und umrandete Rechtecke, abgerundete Rechtecke, Kreise und Dreiecke.
• Icons — 70 piktografische Icons (award, brain, certificate, code, crown, diploma, graduation-cap, medal, rocket, shield-check, star, trophy und viele weitere), durchsuchbar.
• Ribbons — 28 dekorative Band-Overlays, gruppiert in Straight / Pointed / Tails / Decorative.
• Bases — 80 umfärbbare Basisformen in mehreren Kategorien (Kreise, Schilde, Sechsecke, Sterne, Medaillen, Siegel, Kränze, Banner, geometrisch).

Jedes Icon, Band und jede Basis wird in der aktuellen Farbe eingefügt und kann jederzeit umgefärbt werden.

Hintergrundformen

Elements → Background shapes enthält 68 fertige Rahmen (die Bibliothek aus Form × Palette). Beim Anwenden wird der Hintergrundrahmen des Badges ausgetauscht, während deine Texte und Elemente darüber erhalten bleiben – praktisch, wenn du eine bestimmte Form-/Farbkombination ohne gestaltete Vorlage möchtest.

Ein eigenes Bild hochladen

Im Panel Uploads fügst du dein eigenes Logo, Foto oder deine eigene Grafik hinzu. Akzeptiert werden PNG, JPEG und SVG bis 5 MB. Das Bild wird als normales Vordergrundobjekt eingefügt – es liegt über dem Design und löscht nie den Hintergrund. Um den Badge-Hintergrund zu ändern, wähle stattdessen eine Vorlage oder eine Hintergrundform.

Text hinzufügen & gestalten

Das Text-Panel bietet:

• Add heading / subheading / normal text — Textobjekte mit voreingestellter Größe.
• Combinations — fertige Zusammenstellungen wie Certificate of Achievement, Awarded to oder Verify at – jede Zeile bleibt einzeln bearbeitbar.

Wähle ein beliebiges Textobjekt aus, und über dem Canvas erscheint die kontextbezogene Werkzeugleiste:

• Font — eine Bibliothek mit 50 Schriftarten, gruppiert in Sans, Serif, Handwriting, Mono und System. Wähle eine aus dem Dropdown; jede Option wird in ihrer eigenen Schrift vorangezeigt.
• + Font — lade eine Marken-Schriftart (TTF, WOFF, WOFF2, OTF) für die aktuelle Sitzung hoch.
• Font size — der −/+-Stepper (oder die Eingabe einer Zahl) ändert die Größe des ausgewählten Textes präzise, ohne an den Griffen zu ziehen.
• Colour — legt die Füllfarbe des ausgewählten Textes fest (und die Standardfarbe beim Einfügen neuer Formen/Icons).
• Alignment — sechs Schaltflächen richten die Auswahl relativ zum Canvas links / zentriert / rechts und oben / mittig / unten aus.

Dynamische Attribute

Das Attributes-Panel fügt dynamische Tokens – , , , , , – als Textobjekte ein. Jedes Token wird pro Empfänger:in bei der Ausstellung aufgelöst, sodass sich ein einziges Design für jede Person individuell anpasst, der du es ausstellst. So bringst du den Namen der Empfängerin bzw. des Empfängers oder das Ausstellungsdatum auf das Badge selbst.

QR-Codes

Das Panel QR Codes fügt einen scanbaren Code ein, der an gebunden ist. Bei jedem ausgestellten Nachweis verweist er auf dessen öffentliche Verifizierungsseite, sodass jeder das gedruckte Badge scannen und prüfen kann.

Ebenen

Das Layers-Panel listet jedes Objekt auf dem Canvas auf. Hier kannst du jede Ebene neu anordnen (nach vorne / nach hinten), aus-/einblenden, auswählen und löschen. Der Hintergrundrahmen ist unten fixiert und bleibt nicht interaktiv, sodass Vordergrundelemente alle Klicks erhalten.

Rückgängig / Wiederholen (Ctrl+Z / Ctrl+Shift+Z) geht die letzten 20 Änderungen durch, und gestrichelte Hilfslinien erscheinen, wenn du ein Objekt in die Nähe der Canvas-Mitte ziehst.

Das Badge speichern

Es gibt keinen separaten „Export"-Schritt. Wenn Design und Details fertig sind:

• Create Badge erfasst den Canvas als PNG, lädt ihn auf unser Bild-CDN hoch (Amazon S3, ausgeliefert unter einer unveränderlichen inhaltsadressierten URL) und speichert das Badge zusammen mit seinem bearbeitbaren Design – beim erneuten Öffnen des Badges werden deine einzelnen Ebenen für die weitere Bearbeitung wiederhergestellt.
• Save Draft speichert ein in Arbeit befindliches Badge serverseitig (geräteübergreifend). Entwürfe erscheinen in deiner Badges-Liste mit einer Draft-Markierung, und du kannst jederzeit daran weiterarbeiten.

Tipps für gutes Badge-Design

• Halte es einfach — klarer Text, wenig Ballast. Badges werden oft klein angezeigt.
• Nutze hohen Kontrast — Text muss sich lesbar vom Hintergrund abheben.
• Benenne den Nachweis — Betrachtende sollten ihn auf einen Blick verstehen.
• Quadratisches Format — Badges wirken quadratisch am besten.
• Einheitliche Marke — verwende die Farben und Schriftarten deiner Organisation über alle Badges hinweg.
• Speichere wiederverwendbare Designs — jedes erstellte Badge wird auch als Konto-Vorlage gespeichert, von der du beim nächsten Mal starten kannst (siehe My Templates).