Einsteiger-Tutorial

Erste Schritte mit dem InfoGrafik-Creator

Eine geführte Tour für den ersten Start: vom leeren Bildschirm bis zur fertig exportierten Infografik — in etwa zehn Minuten, ohne Vorkenntnisse.

Dauer · ca. 10 Minuten Voraussetzung · nur ein Browser, keine Installation Ausführliche Referenz · Button Hilfe in der App

Bevor es losgeht

Kein Setup, kein Konto, keine Cloud.

Der InfoGrafik-Creator läuft direkt im Browser unter einer eigenen Web-Adresse (URL) — kein Programm-Download, keine Installation, kein Konto. Öffne die dir mitgeteilte Adresse in einem aktuellen Browser (Chrome, Firefox oder Edge). Alles, was du gestaltest, bleibt in deinem Browser-Fenster, bis du es exportierst oder speicherst — deine Inhalte werden dabei nicht an einen Server übertragen.

Tipp

Lege dir die Adresse als Lesezeichen ab — du brauchst sie bei jedem Besuch erneut, es gibt keine separate App zum Öffnen.

Optional, aber praktisch: ein kurzer Blick in Einstellungen. Wer dort Organisation, Website und Logo schon einmal hinterlegt, bekommt diese Angaben in allen Vorlagen mit Kontakt- oder Fußzeilen-Feldern automatisch vorausgefüllt — spart bei jeder weiteren Grafik das erneute Eintippen. Für den allerersten Testlauf lässt sich dieser Schritt aber genauso gut überspringen und später nachholen.

Hinweis

Manche Organisationen schalten optional einen Login vor den Creator oder verlangen eine Anmeldung nur für die Funktion „Schnell speichern". Erscheint statt der leeren Fläche ein Anmelde-Fenster oder ein Login-Link am unteren Bildschirmrand, wende dich für Zugangsdaten an deine Organisation.

Die Oberfläche auf einen Blick

Oben die Menüs, links das Einfügen, Mitte die Grafik, rechts die Inhalte.

Ganz oben liegt die Toolbar: Logo, Rückgängig/Wiederholen, sechs Menüs (Datei, Vorlagen, Organisation, Design, Ansicht, Einstellungen) sowie Hilfe. Ein Klick auf einen Menü-Namen öffnet ein Dropdown mit den zugehörigen Funktionen. Darunter teilt sich der Bildschirm in drei Bereiche:

Links

Ein schmaler, dauerhaft sichtbarer Streifen zum Einfügen freier Elemente: Icons, Formen, Text & Bild, Dekor, Textbausteine, Metaplan, Logo, QR-Code, Abreißzettel, Karussell. Über den »-Button lässt er sich zwischen kompakten Icons und breiter Ansicht mit Beschriftung umschalten.

Mitte

Der Arbeitsbereich (Canvas). Zeigt live, wie die Grafik gerade aussieht — es gibt kein separates Vorschaufenster.

Rechts

Panel für Kopfzeile, Inhalt und Fußzeile der aktuellen Vorlage, darunter Export und Zoom.

Jede Änderung wirkt sich sofort auf die Mitte aus. Es gibt keinen „Anwenden"-Knopf. Wirkt die Oberfläche noch zu voll, blendet Ansicht → Vereinfachte Ansicht seltene Werkzeuge und Feineinstellungen in den Fenstern aus; „Alle Funktionen" am Ende des Einfügen-Streifens holt sie zurück. Auf schmalen Bildschirmen (Smartphone, Tablet) weichen die Menüs und der Einfügen-Streifen einem Hamburger-Symbol (☰) oben links, das ein Slideout-Menü mit denselben Funktionen öffnet.

Deine erste Infografik

Beispiel: eine einfache Kennzahlen-Grafik, Schritt für Schritt.

Vorlage wählen

Öffne oben in der Toolbar das Menü Vorlagen und klicke auf Vorlagen & Favoriten. Im Dropdown „Vorlage wählen" eine Vorlage auswählen — für den Einstieg eignet sich z. B. Kennzahlen (4 Werte) aus der Kategorie „Daten & Zahlen". Unsicher, welche passt? Der Menüpunkt ✨ Vorlage vorschlagen fragt nach Zweck und Plattform und empfiehlt selbst eine Vorlage. Bei einem neuen Start öffnet er sich sogar von selbst; wer das nicht möchte, setzt dort den Haken bei „Beim Start nicht mehr anzeigen".

Linke Sidebar mit Vorlagenkategorien und Kennzahlen-Vorlage auf der Fläche

Inhalte eintragen

Im rechten Panel auf ▲ Kopfzeile klicken, um Überschrift und Unterzeile anzupassen, auf ◼ Inhalt für die vier Kennzahlen samt Beschriftung — beides öffnet ein Bearbeiten-Fenster über der Grafik. Jede Eingabe erscheint sofort in der Mitte auf der Grafik.

Rechtes Panel mit editierbaren Kennzahlen-Feldern

Farben festlegen

Oben im Menü Design auf Farben & Design klicken und eines der acht Farbschema-Presets anklicken (z. B. „Dunkel" oder „Akzent") oder einzelne Farben — Header, Hintergrund, Textfarben — selbst wählen. Der schnelle Farbwähler oben im rechten Panel funktioniert genauso und ist oft näher an der Hand. Im selben Fenster gibt es unten den Abschnitt Schrift: Dort lassen sich getrennte Schriften für Überschriften und Fließtext wählen, darunter auch die besonders gut lesbare Atkinson Hyperlegible.

Bereich Farben & Design mit Farbschema-Presets

Format prüfen

Oben im Menü Design auf ⊡ Format & Layout klicken und festlegen, wofür die Grafik gedacht ist — etwa Instagram 1:1 oder A4 Hoch für den Druck. Das Format bestimmt die Pixelbreite; Inhalte passen sich automatisch an.

Bereich Format & Layout

Exportieren

Im rechten Panel auf Export klicken und im sich öffnenden Fenster ↓ PNG exportieren wählen — fertig. Für Weiterbearbeitung eignet sich SVG, für den Druck PDF. Wer unsicher ist, wählt oben im Fenster unter „Wofür brauchen Sie die Grafik?" den Zweck (z. B. Social Media oder Drucken): Der Creator stellt die Qualität ein und markiert das passende Format als empfohlen. Vor dem Export prüft er außerdem kurz, ob etwas abgeschnitten, unscharf oder noch Platzhaltertext ist.

Export-Bereich mit PNG-, SVG- und PDF-Export
Screenshots zeigen die KM-Online-Variante des Creators — Bedienung und Funktionen sind in jeder Adaption identisch.

Ein freies Element ergänzen

Über die Vorlage hinaus frei gestalten.

Neben den Vorlagenfeldern lässt sich jede Grafik mit frei platzierten Elementen ergänzen: Icons, Textfelder, eigene Bilder, geometrische Formen und Dekor-Elemente. Das Prinzip ist bei allen gleich:

  1. Im Einfügen-Streifen am linken Rand einen Bereich öffnen (z. B. Icons) — auf Mobilgeräten im ☰-Menü unter „Einfügen".
  2. Baustein, Größe und Farbe wählen.
  3. Auf den „Einfügen"-Button klicken — das Element erscheint auf der Grafik.
  4. Beim Überfahren mit der Maus erscheinen Griffe zum Verschieben, Drehen, Skalieren oder Duplizieren.
Tipp

Zieh ein Element nah an ein anderes heran — rote Ausrichtungslinien zeigen automatisch, wenn Ränder oder Mitten fluchten, und das Element rastet leicht ein. Mehrere Elemente markierst du mit Umschalt+Klick; oben erscheint dann eine Leiste zum Ausrichten, gleichmäßigen Verteilen und Gruppieren.

Speichern vs. Exportieren — der wichtigste Unterschied

Zwei Dateien, zwei Zwecke.

Speichern (als Datei) im Menü Datei sichert den kompletten Arbeitsstand als JSON-Datei — alle Inhalte, Farben, Elemente, Einstellungen. Diese Datei lässt sich später über Laden (aus Datei) im selben Menü wieder öffnen, um weiterzuarbeiten. Sie enthält aber kein fertiges Bild.

↓ PNG, ↓ SVG oder ↓ PDF im rechten Panel erzeugen dagegen das fertige, teilbare Bild — aber ohne die Möglichkeit, es später wieder zurück in editierbare Felder zu verwandeln.

Das komplette Backup deiner Bibliothek (Meine Vorlagen, Elemente, Karussell, Einstellungen, Favoriten) ist etwas anderes: dafür gibt es Alles sichern und Alles laden im Menü Einstellungen.

Faustregel: Speichern, wenn du später weiterarbeiten willst. Exportieren, wenn die Grafik fertig ist und geteilt werden soll.

Acht Basics, die den Einstieg erleichtern

Rückgängig ist immer da

Strg+Z macht bis zu 20 Schritte rückgängig, Strg+Y stellt sie wieder her. Der Verlauf geht nur beim Neuladen der Seite verloren — also ruhig ausprobieren.

Die Elemente-Liste behält den Überblick

Im Menü Ansicht öffnet Elemente-Liste ein Panel mit allen platzierten Bausteinen. Praktisch, sobald eine Grafik mehrere frei positionierte Elemente hat und man den Überblick behalten will.

Nichts geht versehentlich verloren

Der Browser warnt beim Schließen oder Neuladen der Seite, sobald ungespeicherte Änderungen vorliegen. Zusätzlich sichert der Creator deine Arbeit laufend im Browser: Unten rechts steht „Gesichert 14:32". Steht dort „Nicht gesichert", ist der Browser-Speicher voll oder gesperrt (z. B. im privaten Modus) — speichere dann über Datei → Speichern (als Datei).

Design verbessern mit einem Klick

Im Menü Design behebt Design verbessern auf einmal schlecht lesbare Texte (Kontrast, zu kleine Schrift), holt Elemente zurück in die Fläche und richtet fast gleich liegende Kanten exakt aus. Strg+Z macht alles in einem Schritt rückgängig.

Fotos direkt nachbessern

Beim Überfahren eines Bildes öffnet der Filter-Knopf neben den fertigen Filtern vier Regler: Helligkeit, Kontrast, Sättigung und Weichzeichnen — ein zusätzliches Bildprogramm brauchst du dafür nicht.

Kleine Tipps zur rechten Zeit

Beim ersten Textfeld, Bild oder Icon erscheint einmalig ein kurzer Hinweis. Er stört dich? „Keine Tipps mehr" schaltet alle ab, Strg+K → „Tipps wieder einblenden" holt sie zurück.

Eigene Vorlagen für Wiederholungen

Wird eine Grafik öfter in ähnlicher Form gebraucht, im Menü Vorlagen unter Meine Vorlagen speichern — inklusive aller Inhalte und Elemente, jederzeit mit einem Klick wieder ladbar.

Zwei verschiedene Dunkelmodi

Hell/Dunkel im Menü Ansicht wechselt nur das Interface zwischen hell und dunkel. Die Grafik selbst wird ausschließlich über Farben & Design gesteuert.

Typische Anfängerfragen

Ich habe eine eigene Vorlage gespeichert — nach einem Update ist sie weg. Warum?
Eigene Vorlagen liegen im Browser-Speicher (IndexedDB) und sind an die genaue Web-Adresse gebunden. Vor einem Umzug auf eine neue Adresse im Menü Vorlagen unter Meine Vorlagen → Alle exportieren ein Backup anlegen.
Warum sieht mein Logo nicht wie erwartet aus?
Ein transparentes Logo zeigt den Hintergrund direkt durch. Nur bei einem weißen Grafik-Hintergrund lässt es sich unverändert platzieren; sonst hilft die weiße Schutzfläche in den Einstellungen.
Kann ich Fotos einbinden, ohne selbst welche hochzuladen?
Ja — über die optionale Unsplash- oder Pixabay-Bildsuche in den Einstellungen. Beide brauchen einen kostenlosen, selbst angelegten API-Key; ohne Key bleibt die Funktion einfach unsichtbar.
Beeinflusst der Zoom die Export-Qualität?
Nein. Der Zoom im rechten Panel (bzw. im Menü Ansicht) verändert nur die Ansicht am Bildschirm — die Exportgröße richtet sich allein nach dem gewählten Format.

Wie es weitergeht

Dieses Tutorial deckt den Einstieg ab — nicht jede Vorlage und jede Funktion im Detail. Für alles Weitere: Der Button Hilfe in der Toolbar öffnet eine vollständige Referenz mit allen über 60 Vorlagen, allen Werkzeugen und sämtlichen Tastaturkürzeln, direkt in der App.

Ein paar Bereiche lohnen sich, sobald der erste Einstieg sitzt:

Nächster Schritt

Am besten direkt ausprobieren: eine Vorlage aus einer anderen Kategorie öffnen (z. B. „Zitat / Highlight" oder „Prozess (horizontal)") und die gleichen fünf Schritte von oben durchgehen.

Kulturmanagement Online

Diese Anleitung zeigt den InfoGrafik-Creator am Beispiel von Kulturmanagement Online.

Genauso läuft er mit dem Logo und den Farben Ihrer eigenen Organisation — Bedienung und Funktionen bleiben dabei identisch.

Alle Infos zur eigenen Organisations-Version →
Erste-Schritte-Tutorial · InfoGrafik-Creator