Überblick

Der Creator läuft vollständig im Browser — es muss nichts installiert werden. Öffnen Sie die HTML-Datei in einem aktuellen Browser (Chrome, Firefox, Edge).

Die Seitenleisten lassen sich durch Ziehen der Trennlinie in der Breite anpassen und über die Toolbar-Buttons ein- oder ausblenden.

Schnellstart in 5 Schritten

1. Assistent starten — Klicken Sie in der Sidebar auf ✨ Assistent starten. Er fragt nach Zweck und Plattform und schlägt die passende Vorlage mit richtigem Format vor.
2. Vorlage auswählen — Wählen Sie eine Vorlage aus dem Dropdown Vorlage wählen oder nehmen Sie die Empfehlung des Assistenten an.
3. Inhalte anpassen — Im rechten Panel erscheinen alle Felder: Überschrift, Texte, Zahlen, Icons. Die Vorschau aktualisiert sich sofort.
4. Farben wählen — Wählen Sie unter Farben & Design ein Farbschema oder stellen Sie einzelne Farben ein.
5. Exportieren — Klicken Sie in der Toolbar auf ↓ PNG, ↓ SVG oder ↓ PDF.

Toolbar

Schaltfläche	Funktion
↩ / ↪	Rückgängig / Wiederholen (bis zu 20 Schritte). Auch per Strg+Z / Strg+Y.
💾 Speichern	Arbeitsstand als JSON-Datei sichern. Enthält alle Inhalte, Farben, Elemente und Einstellungen.
📂 Laden	Gespeicherten Arbeitsstand aus einer JSON-Datei wiederherstellen.
⚙ Einstellungen	Organisations-Defaults, Logo, Sidebar-Konfiguration und Standardfarben hinterlegen.
❓ Hilfe	Diese Anleitung öffnen.
Raster	Raster und Hilfslinien über der Grafik ein-/ausblenden. Drei Ebenen: feines 40-px-Raster, Drittellinien (Rule of Thirds) und Mittellinien. Erscheint nicht im Export.
☀ / 🌙	Interface zwischen hell und dunkel wechseln. Die Grafik selbst bleibt unverändert.
/	Linke bzw. rechte Seitenleiste ein- oder ausblenden.

Linke Sidebar

Neun aufklappbare Bereiche — im Exklusiv-Modus (Standard) ist immer nur einer offen. Oben der ✨ Vorlage vorschlagen-Button für den Assistenten.

⊞ Vorlagen & Favoriten

Vorlage aus dem Dropdown wählen (über 60 Vorlagen in sechs Kategorien plus „Leer & Frei"). Häufig genutzte Vorlagen mit ★ Aktuelle Vorlage merken speichern — sie erscheinen unter Zuletzt genutzt.

📁 Meine Vorlagen

Eigene Vorlagen speichern, laden, umbenennen und löschen. Jede Vorlage enthält den vollständigen Arbeitsstand inkl. aller Elemente und ein Thumbnail. Vorlagen können als JSON exportiert und in neue Versionen importiert werden.

⊡ Format & Layout

Vordefinierte Formate wie Instagram 1:1, Facebook Post, LinkedIn 2:1 oder A4 Hoch. Steuerung ob Kopf- und Fußzeile angezeigt werden. Toggle ◉ Rund / ▣ Eckig für alle Eckenradien gleichzeitig.

🎨 Farben & Design

Acht Farbschema-Presets für einen schnellen Einstieg. Header-Farbe, Hintergrund, Fließtext- und Überschriften-Farbe einzeln einstellbar. Farben tauschen wechselt Hintergrund und Schriftfarbe.

✦ Icons

Über 90 Icons in 8 thematischen Kategorien: Allgemein, Web & Digital, Kommunikation, Social Media, Kultur & Non-Profit, Strategie & Beratung, Technik & Tools, Verwaltung. Erst Icon wählen, dann Größe und Farbe, dann Icon einfügen klicken. Handles erscheinen beim Hover — inkl. 🎨 Farbe nachträglich ändern.

⬟ Formen

16 geometrische Formen inkl. freiem Viereck in 4 Schritten: Form → Größe → Farbe → Einfügen. Das freie Viereck hat vier ziehbare Eck-Handles. Alle Formen haben Handles für Drehen, Skalieren, Deckkraft und Farbe.

✦ Dekor-Elemente

16 dekorative Elemente in vier Gruppen: Linien & Striche, Bögen & Kurven, Flächen & Muster, Ornamente & Rahmen. Farbwahl, dann einfügen. Handles beim Hover: Skalieren · Farbe · Deckkraft · ⬆/⬇ Ebene.

✏ Elemente

Freie Textfelder und eigene Bilder einfügen. Handles erscheinen beim Hover. Im Tipp-Modus: Formatierungsleiste mit Schriftgröße, Fett, Kursiv.

◈ Logo

Logo in den ⚙ Einstellungen hochladen, dann hier platzieren. Position wählen, einfügen, frei verschieben. Nur auf weißem Hintergrund verfügbar.

Accordion-Verhalten

Im Standard-Exklusiv-Modus klappt sich beim Öffnen eines Bereichs der vorherige automatisch zu. In den ⚙ Einstellungen (Abschnitt Sidebar) lässt sich dieses Verhalten ändern und einzelne Bereiche können ausgeblendet werden.

Rechte Sidebar

Oben: Inhaltseingabe für die aktuelle Vorlage (drei aufklappbare Bereiche). Unten: Export und Zoom.

▲ Kopfzeile

Überschrift, Unterzeile und Label (z.B. Kampagnenname) mit Sichtbar-Toggle. Das 😊-Symbol öffnet den Emoji-Picker.

◼ Inhalt

Alle vorlagenspezifischen Felder. Mit + Hinzufügen weitere Einträge ergänzen, mit dem roten ✕ entfernen.

▼ Fußzeile

Linker und rechter Fußzeilentext (z.B. Website und Copyright).

📤 Export

PNG (2× Auflösung), SVG (verlustfrei) und PDF. Der Zoom beeinflusst nur die Ansicht, nicht die Exportgröße.

🔍 Zoom

Canvas-Ansicht auf 75%, 100% oder 125% skalieren — ohne Einfluss auf den Export.

Vorlagen im Überblick

Über 60 Vorlagen in sechs Kategorien plus „Leer & Frei". Der Assistent empfiehlt die passende Vorlage — oder direkt aus dem Dropdown wählen.

Meine Vorlagen

Eigene Vorlagen speichern und wiederverwenden — vollständig mit allen Inhalten, Farben, Hintergrundbild und frei platzierten Elementen.

Vorlage speichern

1. Bereich 📁 Meine Vorlagen in der Sidebar öffnen.
2. Namen eingeben (Pflicht), optional einen Tag wählen (Event, Zitat, Info…).
3. 💾 Speichern klicken — ein Thumbnail wird automatisch erstellt.

Vorlage laden

Klick auf das Thumbnail oder den Namen einer gespeicherten Vorlage — der vollständige Arbeitsstand wird wiederhergestellt.

Verwalten

Pro Vorlage drei Aktionen: ✏ Umbenennen · 📤 Als JSON exportieren · 🗑 Löschen.

Import & Export

📤 Alle exportieren speichert alle Vorlagen als eine JSON-Datei — zum Teilen oder als Backup. 📥 Importieren liest eine einzelne oder eine ganze Backup-Datei ein.

Farben & Design

Farbschema-Presets

Die acht Presets (Hell, Dunkel, Mittel, Grün, Korall, Nacht, Hell+, Frisch) setzen alle vier Farbebenen gleichzeitig: Header-Farbe, Hintergrund, Fließtext-Farbe und Überschriften-Farbe. Einzelne Werte lassen sich danach noch anpassen.

Einzelne Farben

Vier Farbzeilen mit je mehreren Swatches:

• Header-Farbe — Hintergrund des Kopfbalkens. Bestimmt zugleich alle farbigen Flächen in den Vorlagen (Badges, Chips, Kreise). Bei hellem Header wird die Schrift automatisch dunkel.
• Hintergrund — Füllfarbe der gesamten Grafikfläche. Nur auf Weiß kann das Logo platziert werden.
• Schriftfarbe (Fließtext) — alle normalen Texte: Beschreibungen, Listenpunkte, Metaangaben. Standard: Dunkelgrau.
• Schriftfarbe (Überschriften & Labels) — farbige Hervorhebungen: Badges, Zahlenwerte, Abschnittstitel, fette Textfelder.

Schnell-Farbwähler im rechten Panel

Oben im Inhalts-Panel (rechts) sind Fließtext- und Überschriften-Farbe als kompakte Swatch-Reihen verfügbar — ohne in die linke Sidebar wechseln zu müssen. Beide Panels sind synchronisiert.

Farben tauschen

Vertauscht Hintergrund- und Fließtext-Farbe — praktisch für einen schnellen Hell/Dunkel-Wechsel.

Format & Layout

Format (Bildgröße)

Im Bereich ⊡ Format & Layout wählen Sie das Ausgabeformat: Quadrat (1:1), Querformat (16:9), Hochformat (4:5, 9:16) oder benutzerdefiniert. Das Format bestimmt die Pixelbreite des Canvas — Inhalte passen sich automatisch an.

Elementform: Rund / Eckig

Der Toggle ◉ Rund / ▣ Eckig steuert die Rundung aller Karten, Boxen, Badges und Labels in den Vorlagen gleichzeitig:

• Rund — Standard. Karten mit 8 px, Badges mit 6 px, große Container mit 10 px Radius.
• Eckig — Alle Rundungen werden auf 0 gesetzt. Icon-Hintergründe (Kreise mit 50 %) bleiben unverändert — sie sind konzeptionell rund.

Die Einstellung gilt global für alle Vorlagen und bleibt auch beim Vorlagenwechsel aktiv. Sie wird im JSON-Arbeitsstand gespeichert.

Inhaltsskalierung & Position

Mit dem Schieberegler unter „Skalierung" vergrößern oder verkleinern Sie den Inhaltsbereich zwischen Kopf- und Fußzeile. ↺ Zurücksetzen stellt 100 % wieder her. Über ✥ Inhalt verschieben aktivieren Sie den Verschiebe-Modus: Bei aktivem Button lässt sich der gesamte Inhaltsbereich per Maus frei innerhalb des Canvas positionieren — nützlich, um mehr Platz für Kopf- oder Fußzeile zu schaffen.

Kopf- & Fußzeile

Die Buttons ✓ Kopfzeile und ✓ Fußzeile blenden Kopf- und Fußzeile ein oder aus. Inhalte der Vorlage füllen den freien Platz automatisch auf.

Elemente einfügen

Icons

1. Bereich ✦ Icons in der Sidebar öffnen.
2. 1 · Icon wählen — Kategorie oder Suche, dann Icon anklicken (wird blau markiert).
3. 2 · Größe und 3 · Farbe wählen.
4. 4 · Icon einfügen klicken — es erscheint auf der Grafik.
5. Handles erscheinen beim Hover: Ziehen zum Verschieben · 🎨 Farbe nachträglich ändern · Doppelklick zum Löschen.

Freie Formen

1. Bereich ⬟ Formen öffnen.
2. 1 · Form wählen — pro Gruppe mehrere Varianten: Raute (quadratisch · hochgestreckt · flach) · Dreieck (gleichschenklig · rechtswinklig · breit) · Trapez (breit · schmal · asymmetrisch) · Rechteck (quer · hoch · schmal) · sowie Kreis, Oval, Stern, Sprechblase, Pfeil.
3. 2 · Größe und 3 · Farbe wählen.
4. ⬟ Form einfügen klicken.
5. Handles erscheinen beim Hover: ✕ Löschen · ↻ Drehen (Shift = 1°-Schritte) · ⤡ Größe · ◑ Deckkraft · 🎨 Farbe ändern.
6. Winkel-Badge — klicken zum direkten Eingeben, ↑/↓ = ±1°, Shift+↑/↓ = ±15°.
7. Doppelklick auf die Form → löschen.

Freies Viereck

1. Bereich ⬟ Formen öffnen, Farbe wählen, dann ⬠ Viereck klicken.
2. Das Viereck erscheint als Trapezoid-Startform auf der Grafik.
3. Handles erscheinen beim Hover: vier grüne Eck-Handles — jeden Eckpunkt unabhängig ziehen, um die Form frei zu verformen (Trapez, Parallelogramm, schiefes Viereck u. v. m.).
4. Auf den Kanten: ✕ Löschen (obere Kante) · ◑ Deckkraft (rechte Kante) · 🎨 Farbe ändern (untere Kante).
5. Doppelklick auf die Fläche → löschen.

Textfelder

1. Bereich ✏ Elemente öffnen — die Vorschau-Buttons zeigen wie die Textfelder auf der Grafik aussehen. Gewünschten Stil anklicken.
2. Handles erscheinen beim Hover. Stift-Button → Tipp-Modus: Text bearbeiten.
3. Im Tipp-Modus: Formatierungsleiste mit −/+ Schriftgröße, B Fett, I Kursiv.
4. Drag-Button → zurück in den Ziehen-Modus.

Bilder & Fotos

1. + Grafik / Foto einfügen klicken und Bilddatei wählen (JPG, PNG, SVG, GIF).
2. Bild erscheint auf der Grafik — frei verschiebbar und skalierbar.

Hintergrundbild

1. Bereich Hintergrundbild öffnen, 📷 Bild hochladen klicken.
2. Skalierung per Schieberegler (50–300 %) anpassen.
3. Position: direkt auf dem Canvas-Hintergrund ziehen (außerhalb aller platzierten Elemente).
4. ✕ Bild entfernen setzt wieder auf Hintergrundfarbe zurück.

Logo

Das Logo wird in den ⚙ Einstellungen hinterlegt (Abschnitt „Logo") und gilt dann projektübergreifend. Auf der Grafik:

1. Bereich ◈ Logo in der Sidebar öffnen — die Vorschau zeigt das aktuell hinterlegte Logo.
2. Position wählen (oben rechts/links, unten rechts/links).
3. ◈ Logo einfügen klicken — das Logo erscheint an der gewählten Ecke und ist frei verschiebbar.
4. ✕ Entfernen löscht es wieder. Das Logo ist nur auf weißem Hintergrund verfügbar.

Dekor-Elemente

1. Bereich ✦ Dekor-Elemente öffnen.
2. 1 · Element wählen — vier Gruppen: Linien & Striche, Bögen & Kurven, Flächen & Muster, Ornamente & Rahmen.
3. 2 · Farbe wählen.
4. ✦ Dekor einfügen klicken.
5. Handles erscheinen beim Hover: ⤡ proportional skalieren · 🎨 Farbe · ◑ Deckkraft · ✕ Löschen · ⬆ Vordergrund · ⬇ Hintergrund.
6. Standard-Ebene: hinter Vorlageninhalten — ideal als Gestaltungselement im Hintergrund.
7. Doppelklick → löschen.

Einstellungen

Über ⚙ Einstellungen in der Toolbar hinterlegen Sie projektbezogene Voreinstellungen, die beim nächsten Start automatisch geladen werden und auch im JSON-Arbeitsstand gespeichert werden.

Feld	Bedeutung
Projektname	Interne Bezeichnung — erscheint nicht auf der Grafik.
Organisation / Absender	Standard-Absender für Vorlagen und Kontaktelemente.
Website	Standard-URL für CTAs und Kontakt-Vorlagen.
Hashtag / Social Handle	Optional — z. B. für Social-Media-Vorlagen.
Dateiname-Präfix	Wird allen Exportdateien vorangestellt, z. B. MeinProjekt_Infografik.png.
Standard-Akzentfarbe	Hex-Wert (z. B. #3a7bd5) oder Farbfeld klicken.
Logo-Datei	PNG mit Transparenz empfohlen · wird automatisch auf 360 × 142 px skaliert · SVG wird direkt übernommen. ✕ Zurücksetzen stellt den Platzhalter wieder her.
Exklusiv-Modus	Wenn aktiv (Standard), klappt sich beim Öffnen eines Sidebar-Bereichs der vorherige automatisch zu.
Sichtbare Bereiche	Nicht benötigte Sidebar-Bereiche ausblenden. Ein dezenter Hinweis am Ende der Sidebar erinnert an ausgeblendete Bereiche.
Label (Kopfzeile)	Obere Zeile der Kopfzeile — z. B. Kampagnen- oder Organisationsname.
Fußzeile links	Meist die Website Ihrer Organisation.
Fußzeile rechts	Copyright oder Organisationsname. Leer lassen = kein Text.

↓ Exportieren speichert die Einstellungen als Einstellungen.json — zum Weitergeben oder für andere Rechner. ↑ Importieren liest sie ein; Werte werden erst nach Übernehmen aktiv.

Speichern & Export

Format	Wann verwenden
PNG	Social Media, E-Mail, Präsentationen. Die Exportgröße entspricht der Canvas-Breite in Pixeln (2× für scharfe Darstellung).
SVG	Wenn die Grafik später skaliert oder weiterbearbeitet werden soll. Verlustfrei.
PDF	Für den Druck oder die Weitergabe als Dokument.
JSON (💾)	Arbeitsstand sichern, um später weiterzuarbeiten. Kein Bild — nur Daten.

Tastaturkürzel

Kürzel	Aktion
Strg + Z	Rückgängig (Undo)
Strg + Y	Wiederholen (Redo)
Strg + P	Drucken (öffnet Browser-Druckdialog)