Badge-Designer

Der Badge-Designer ist ein visueller Canvas-Editor, der in badges.ninja eingebaut ist und mit dem du professionelle Auszeichnungsbilder ohne jegliche Designtools erstellst.

Überblick

Der Designer öffnet sich, wenn du beim Erstellen oder Bearbeiten einer Auszeichnung auf das Bildfeld klickst. Er bietet einen Canvas-Arbeitsbereich, in dem du Vorlagen, Text und eigene Hintergründe kombinieren kannst, um dein Auszeichnungsbild zu erstellen.

Eine Vorlage auswählen

Der Designer enthält 80+ eingebaute Vorlagen, die in zwei Dimensionen organisiert sind, damit du schnell eine findest:

• 8 Formen — Kreis, Abgerundetes Quadrat, Sechseck, Schild, Achteck, Raute, Banner, Siegel
• 8 Farbpaletten — Gold, Silber, Bronze, Blau, Grün, Karmesinrot, Violett, Graphit

Zum Auswählen:

1. Klicke in der Designer-Werkzeugleiste auf Vorlagen.
2. Verwende die Form- und Farb-Filter oben in der Auswahl, um die Liste einzugrenzen. Der Zähler rechts zeigt, wie viele Vorlagen passen (z. B. 8 / 84).
3. Klicke auf eine Vorlage, um sie auf die Leinwand anzuwenden.

Die generierten Vorlagen sind bewusst schlicht gehalten — wähle Form und Palette und füge dann eigenen Text, Icons und Bänder im Designer hinzu.

Formen, Bänder und Icons hinzufügen

Neben den Vorlagen liefert der Designer drei zusätzliche Asset-Bibliotheken mit, die du auf jede Vorlage legen kannst:

• Formen — 80+ Vektorformen (Kreise, Schilde, Sechsecke, Sterne, Medaillen, Siegel, Kränze, Banner, geometrische Formen) in Kategorien gruppiert
• Bänder — 20 dekorative Band-Overlays
• Icons — 50 Piktogramm-Icons (Atom, Auszeichnung, Gehirn, Aktenkoffer, Zertifikat, Code, Krone, Diamant, Diplom, Doktorhut, Glühbirne, Medaille, Rakete, Schild mit Häkchen, Stern, Zielscheibe, Trophäe, …)

Wähle eines aus einem beliebigen Popover, und es wird in der aktuellen Farbe auf die Leinwand eingefügt. Die Farbleiste innerhalb jedes Popovers lässt dich das Asset vor dem Einfügen neu einfärben — praktisch, wenn du eine andere Farbe als den Werkzeugleisten-Standard möchtest.

Eigenen Hintergrund oder Bild hochladen

Du kannst dein eigenes Bild als Hintergrund oder als Ebene darüber hochladen:

1. Klicke in der Designer-Werkzeugleiste auf Hochladen.
2. Wähle eine Bilddatei von deinem Computer (PNG oder JPG empfohlen).
3. Das Bild wird als auswählbares Objekt auf der Leinwand platziert — du kannst es ziehen, skalieren, drehen oder hinter andere Elemente schicken.

Ein Bild hochzuladen löscht weder die Vorlage noch bestehende Ebenen — es wird einfach darüber gestapelt.

Für Vollbild-Hintergründe nutze ein quadratisches Bild mit mindestens 600×600 Pixeln.

Text hinzufügen

1. Klicke in der Werkzeugleiste auf die Schaltfläche Text.
2. Ein neues Textelement erscheint auf der Leinwand.
3. Klicke den Text an, um ihn auszuwählen, und tippe deinen Inhalt ein.
4. Ziehe das Textelement, um es auf der Leinwand zu positionieren.

Du kannst mehrere Textelemente für unterschiedliche Teile deiner Auszeichnung hinzufügen (Titel, Empfänger, Datum usw.).

Schriftart ändern

Der Designer enthält 11 Schriftarten (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

1. Wähle ein Textelement auf der Leinwand aus.
2. Klicke das Schriftart-Dropdown in der Werkzeugleiste an.
3. Wähle aus den verfügbaren Schriftarten.

Die Schriftvorschau zeigt, wie jede Option aussieht, bevor du sie auswählst.

Farbe ändern

Der Farbe-Wähler in der Werkzeugleiste steuert zwei Dinge gleichzeitig:

• Ausgewählter Text — legt die Füllfarbe für jedes ausgewählte Textelement fest.
• Standard-Einfügefarbe — für als Nächstes eingefügte Formen, Bänder und Icons sowie ausgewählte SVG-Objekte (färbt Striche und Füllungen direkt um).

Wähle eine Farbe aus der Palette oder gib einen Hex-Code ein. In jedem Form-/Band-/Icon-Popover gibt es außerdem eine kleinere Farbleiste für einmalige Farbwahlen, die den Standard der Werkzeugleiste nicht verändern.

Elemente ausrichten

Die 6-Schaltflächen-Reihe wirkt auf die ausgewählten Objekte relativ zur Leinwand:

Schaltfläche	Aktion
Links ausrichten	An linker Leinwandkante fixieren
Horizontal zentrieren	Auf der X-Achse der Leinwand zentrieren
Rechts ausrichten	An rechter Leinwandkante fixieren
Oben ausrichten	An oberer Leinwandkante fixieren
Vertikal zentrieren	Auf der Y-Achse der Leinwand zentrieren
Unten ausrichten	An unterer Leinwandkante fixieren

Wenn du ein Element in die Nähe der Leinwandmitte ziehst, erscheinen gestrichelte violette Einrast-Hilfslinien und das Objekt rastet präzise ein.

Mehrfachauswahl und Ebenen

• Halte Shift und klicke, um mehrere Objekte auszuwählen, oder ziehe einen Auswahlrahmen über die Leinwand.
• Nutze Nach hinten / Nach vorn, um die Z-Reihenfolge zu steuern.
• Drücke Entf oder klicke in der Werkzeugleiste auf Löschen, um die Auswahl zu entfernen.
• Rückgängig / Wiederherstellen (oder Ctrl+Z / Ctrl+Shift+Z) durchlaufen die letzten 20 Änderungen.

Elemente löschen

1. Wähle das zu entfernende Element aus (oder Shift-Klick für mehrere).
2. Klicke in der Werkzeugleiste auf Löschen oder drücke die Entf-Taste.

Tipps für gutes Badge-Design

• Halte es einfach — nutze klaren Text und vermeide Überladung. Die Auszeichnung wird oft in kleinen Größen dargestellt.
• Hoher Kontrast — stelle sicher, dass der Text vor dem Hintergrund lesbar ist.
• Name der Auszeichnung einbinden — Empfänger:innen und Betrachter sollen den Nachweis auf einen Blick erkennen.
• Quadratisches Format — Auszeichnungen wirken als quadratische Bilder am besten.
• Markenkonsistenz — nutze die Farben und Schriften deiner Organisation für alle Auszeichnungen.
• Teste in klein — sieh dir die Auszeichnung in 100x100 Pixeln an, um die Lesbarkeit sicherzustellen.

Auszeichnungsbild speichern

Wenn du mit dem Design zufrieden bist, klicke im Designer auf Fertig oder Speichern. Das Bild wird von der Leinwand erfasst und an deine Auszeichnung angehängt. Beim Erstellen oder Speichern der Auszeichnung wird es auf IPFS hochgeladen.