Erste Schritte mit dem PanelWave CMS

Diese Anleitung macht aus einer Handvoll fertiger Panelbilder eine kleine, spielbare interaktive Graphic Novel: zwei Seiten, eine Verzweigung, zwei Sprachen, veröffentlicht als Vorschau-Link, den du Freunden schicken kannst. Jeder Schritt verlinkt auf die passende Seite der PanelWave-Dokumentation – dort kannst du jederzeit tiefer einsteigen. Lieber erst eine ausführlichere Version mit vielen Screenshots? Die Doku hat ein geführtes Tutorial: Your First Graphic Novel.

Schritt 1: Ein Werk anlegen

In PanelWave gehört alles zu einem Werk: einem in sich geschlossenen Projekt mit eigenen Kapiteln, Assets, Figuren, Übersetzungen und Einstellungen. Klick auf dem Bildschirm My Works auf Create New Work. Der vierstufige Assistent fragt nach einem Titel und einem URL-Slug (live auf Verfügbarkeit geprüft), deiner Standard- und weiteren Sprachen, den Seitenformaten, für die du gestalten willst, sowie einer Altersfreigabe und Tags. Wähl eine Startvorlage wie Webcomic oder Branching Novel, wenn du sinnvolle Voreinstellungen haben möchtest.

Für dieses Tutorial sind zwei Entscheidungen wichtig. Unter Languages wählst du Englisch als Standard und setzt einen Haken bei Deutsch (oder einer anderen zweiten Sprache), damit wir später etwas zu übersetzen haben. Unter Page Formats wählst du Mobile portrait und Desktop. Seiten werden für jedes Format einzeln gestaltet, wähl also nur aus, was du wirklich brauchst. Lass Start with a first chapter angehakt, damit der Editor mit Kapitel 1 und einer leeren Seite 1 in jedem Format öffnet. Der Assistent ist unter Creating a work Schritt für Schritt dokumentiert, und jede Einstellung lässt sich später in den Work Properties ändern.

Du hast schon Material? Derselbe Bildschirm bietet Import Script für ein Fountain-Drehbuch (Script Import) und Import Pages, bei dem eine KI fertige Seitenbilder in Panels zerlegt (Page Import). Für dieses Tutorial bauen wir von Hand, weil du den Editor so am schnellsten kennenlernst.

Schritt 2: Artwork hochladen

Das Werk öffnet sich im Editor. Wechsel in der linken Seitenleiste auf den Tab Assets und zieh deine Panelbilder an eine beliebige Stelle im Editor – es erscheint eine Ablagezone. Zu jeder Datei siehst du erst den Upload-Fortschritt, dann ein Processing-Badge: Im Hintergrund entstehen AVIF- und WebP-Varianten, ein Vorschaubild und eine responsive Größenstaffel von 640 bis 2560 Pixeln. Du arbeitest währenddessen weiter, und die Lesenden bekommen später automatisch die beste Variante für ihr Gerät.

Zwei Gewohnheiten zahlen sich vom ersten Tag an aus. Leg im Ordnerbereich einen Ordner pro Kapitel an und wähl ihn vor dem Hochladen aus, dann werden neue Dateien automatisch einsortiert. Außerdem: Gib wichtigem Artwork über Edit Metadata einen Alternativtext. Die Preflight-Validierung erinnert dich später daran, und Menschen, die einen Screenreader nutzen, sind darauf angewiesen. Alles Weitere steht unter Assets – auch fortsetzbare Uploads für große Videodateien und die Aktion Replace File, die Artwork austauscht, ohne Verweise zu zerstören.

Schritt 3: Im Editor zurechtfinden

Der Editor hat vier Zonen rund um eine zentrale Leinwand: die linke Seitenleiste mit den Tabs Tree, Assets und Tools, die Leinwand selbst, den rechten Inspektor mit den Tabs Panel, Layer, Hotspot, Speech und A11y sowie die Timeline unten für Animationen und Audio. Beide Seitenleisten und die Timeline lassen sich in der Größe ändern oder einklappen. Die Kopfzeile zeigt den Breadcrumb, den Speicherstatus, Rückgängig und Wiederherstellen, einen Sprachumschalter und die Buttons Preview, Preflight und Publish. Eine geführte Tour gibt es auf der Seite Editor Layout.

Speichern musst du nie. Der Editor speichert zwei Sekunden nach deiner letzten Änderung automatisch, und das Badge wechselt von Unsaved changes zu Saved just now; Strg+S speichert sofort, falls du gleich in die Vorschau willst. Der Rückgängig-Verlauf umfasst jede Änderung an Leinwand, Baum und Inspektor. Zwei weitere Tasten lohnen sich gleich: Strg+K (oder Cmd+K) öffnet die Befehlspalette, und die Fragezeichentaste öffnet die Übersicht der Tastenkürzel. Die vollständige Liste steht unter Shortcuts.

Schritt 4: Die erste Seite gestalten

Wähl im Tab Tree die Seite 1 aus. Die Leinwand wechselt in die Seitenansicht, die eine ganze Seite mit all ihren Panels zeigt. Zieh jetzt dein erstes Bild aus dem Tab Assets auf eine freie Stelle der Leinwand. Mit diesem einen Ablegen entsteht ein Panel: Das Bild wird zur Hintergrundebene, und das Panel passt sich in jedem Seitenformat des Werks an das Seitenverhältnis des Bildes an. Wiederhol das mit zwei oder drei weiteren Bildern und ordne sie dann an: Ziehen verschiebt, die Eckgriffe skalieren ohne Verzerrung, und die Smart Guides lassen Kanten und Mitten einrasten. Sind mehrere Panels ausgewählt, bietet das Kontextmenü Align und Distribute.

Ein blaues Badge mit Nummer zeigt die Lesereihenfolge jedes Panels; ändern kannst du sie, indem du Zeilen im Tree verschiebst. Panelpositionen werden als Prozentwerte der Seite gespeichert. Dasselbe Layout passt sich also an, wenn du die Formatauswahl in der Werkzeugleiste der Leinwand von Desktop auf Mobile portrait umstellst. Mehr zum Strukturbaum und zu den Seiteneigenschaften findest du unter Pages and Panels, mehr zu Zoom, Auswahl, Einrasten und zum Unterschied zwischen Seitenansicht und Panelansicht unter Canvas.

Eine Eigenheit der Leinwand überrascht Neulinge: Ziehst du in der Seitenansicht an den Kantengriffen eines Panels, streckst du es nicht, sondern beschneidest den sichtbaren Bereich. So kann ein Panel in jedem Seitenformat einen anderen Ausschnitt zeigen. Zum Skalieren nimmst du die Eckgriffe.

Schritt 5: Eine Textebene hinzufügen

Ein Doppelklick auf ein Panel öffnet die Panelansicht. Hier bearbeitest du seinen Inhalt. Ein Panel ist ein Stapel von Ebenen: Bild-, Video-, Audio-, Text- und Plugin-Ebenen, die der Player zum fertigen Bild zusammensetzt. Drück T für das Text-Werkzeug und klick auf die Leinwand, um einen Erzähltext hinzuzufügen. Im Inspektor steuert der Tab Layer Schrift, Größe, Stärke, Farbe und Ausrichtung sowie Transformation, Deckkraft und Stapelreihenfolge. Der Bereich Layers im Tab Panel listet alles im Panel auf, mit Sichtbarkeitsschaltern und Auf-/Ab-Buttons für die Z-Reihenfolge. Alles über Ebenen – auch den optionalen Wischeffekt Drag Reveal und die Parallax-Tiefe – findest du unter Layers.

Schritt 6: Mit Sprechblasen lettern

Noch in der Panelansicht drückst du S für das Sprechblasen-Werkzeug und klickst dorthin, wo die Sprechblase sitzen soll. Die Sprechblase erscheint, und der Texteditor öffnet sich direkt darin: Tipp die Zeile und drück Strg+Enter. Die Sprechblase wächst und schrumpft live mit dem Text. Sie wird von derselben Engine gerendert wie im Open-Source-Player – der Editor zeigt also genau, was die Lesenden sehen. Zum Verschieben ziehst du an der Blase selbst, die Spitze des Schwanzes ziehst du zur sprechenden Figur, und per Doppelklick bearbeitest du den Text jederzeit neu.

Im Kontextmenü findest du unter Add Speech Bubble alle zehn Sprechblasentypen: normal, rechteckig, Gedanke, Schrei, Flüstern, Verbinder sowie die Erzähler- und Panel-Top-Kästen, die bündig am Panelrand einrasten. Der Stil folgt einer Kaskade: der Standard des Werks in den Work Properties, eine optionale Überschreibung pro Figur und eine Überschreibung pro Sprechblase im Bereich Balloon Style. Leg den Grundstil einmal fest, und jede Sprechblase folgt. Kaskade, Schwanz-Einstellungen und Lettering-Größe pro Format sind unter Speech Bubbles erklärt.

Weise der Sprechblase jetzt eine Figur zu. Öffne im Backstage-Bereich die Verwaltung Characters und leg deine beiden Hauptfiguren an – mit Porträt und, wenn du magst, eigenem Sprechblasenstil. Danach wählst du sie im Dropdown Speaker der Sprechblase aus. Der Name der Figur erscheint auf der Leinwand über der Sprechblase, und ihr Stil wird automatisch angewendet.

Schritt 7: Eine Entscheidung per Hotspot einbauen

Interaktivität beginnt mit einem Hotspot: einem klickbaren Bereich auf einem Panel. Drück auf deinem letzten Panel R und setz per Klick ein Rechteck über etwas, das die Lesenden wählen können, zum Beispiel eine Tür. Gib ihm im Tab Hotspot ein Label und ein ARIA-Label, klick dann auf Add Action und wähl Set Variables: Füg eine Zeile hinzu, die eine Variable namens choice auf den Wert left setzt. Füg einen zweiten Hotspot für die andere Tür hinzu, der choice auf right setzt. Hotspot-Formen, Aktionen, Mutationen und Bedingungen sind alle unter Hotspots beschrieben.

Variablen sind das Gedächtnis deiner Geschichte. Sie haben einen Typ, einen Standardwert und einen von fünf Gültigkeitsbereichen, von seitenweit bis dauerhaft über Sitzungen hinweg. Für eine Entscheidung, an die sich die ganze Geschichte erinnern soll, ist global der richtige Bereich. Wie Variablen definiert, geändert und in Bedingungen gelesen werden, steht unter Variables and Conditions; das zugrunde liegende Modell im Variablen-Konzept.

Schritt 8: Die Geschichte im Graph Editor verbinden

Leg zuerst Seite 2 mit zwei Panels an, eins für jede Tür. Öffne dann den Graph Editor über die Backstage-Seitenleiste oder das Menü Work areas in der Kopfzeile des Editors. Jedes Kapitel hat einen Flussgraphen: Panels sind Knoten, Verbindungen sind die Pfeile, denen der Player folgt. Das Einstiegspanel ist grün mit einem Stern markiert, Sackgassen sind rot, und Auto-Layout (Taste L) räumt die Karte auf. Um zwei Panels zu verbinden, wähl die Quelle aus, drück C, wähl das Ziel mit den Pfeiltasten und drück Enter. Die Verbindung wird sofort gespeichert.

Verbinde dein Entscheidungspanel mit beiden Tür-Panels. Wähl dann jede Verbindung aus und gib ihr eine Bedingung in JSON Logic. Dieses kleine Regelformat liest sich wie eine Frage: Hat die Variable choice den Wert left? Die Graph-Seite zeigt die genaue Syntax unter Edge conditions, mit Beispielen zum Kopieren und Anpassen. Bedingte Verbindungen erscheinen orange gestrichelt. Mit Simulate gehst du die Geschichte mit Live-Variablenwerten durch, und der Bereich Validation meldet unerreichbare Panels und Sackgassen. Wenn Graphen neu für dich sind, erklärt die Konzeptseite Graph Navigation, warum PanelWave sie statt einer festen Seitenreihenfolge verwendet.

Schritt 9: Übersetzen

Öffne Localization in der Backstage-Seitenleiste. Klick auf Extract Strings: Jeder Text, den die Lesenden sehen – auch deine Sprechblasentexte und Paneltitel –, erscheint in einer Tabelle mit festem Schlüssel, Quelltext und einem Used-in-Badge. Klick in eine Übersetzungszelle, um die deutsche Zeile zu tippen, oder klick auf Translate untranslated, um die ganze Sprache in einem Durchgang maschinell zu übersetzen. Maschinelle Übersetzungen tragen ein MT-Badge, bis du sie bestätigst. Weil Sprechblasen sich pro Sprache neu vermessen, passen auch längere Übersetzungen hinein. Mit dem Sprachumschalter in der Kopfzeile des Editors prüfst du jede Sprache auf der Leinwand.

In einem echten Projekt würdest du die Texte an eine Übersetzerin oder einen Übersetzer geben: Das Menü Export erzeugt CSV oder XLIFF 1.2 für CAT-Tools, und Import holt das Ergebnis zurück. Translation Memory schlägt frühere Arbeit vor, ein Glossar hält Schlüsselbegriffe konsistent, und eine Prüfung auf veraltete Texte markiert Übersetzungen, deren Quelltext sich geändert hat. All das steht unter Localization; gesprochene Zeilen lassen sich pro Sprache unter Audio Localization aufnehmen oder generieren.

Schritt 10: Mit den Augen der Lesenden testen

Klick in der Kopfzeile des Editors auf Preview Work. Der eingebettete Player ist derselbe Open-Source-PanelWave-Player, der auch veröffentlichte Werke rendert – du siehst also keine Annäherung, sondern das Original. Mit den Tasten 1, 2 und 3 wechselst du den Geräterahmen, mit L die Sprache. Im Bereich Variables setzt du choice erst auf left, dann auf right. So prüfst du beide Zweige, ohne dich durch die Hotspots zu klicken. Speichere die Kombination als Szenario, wenn du sie noch einmal testen willst. Die Bedienelemente, inklusive simulierter Berechtigungen für Paywall-Tests, sind unter Preview dokumentiert.

Schritt 11: Prüfen und veröffentlichen

Klick auf Preflight. Die Validierung prüft acht Kategorien, von Barrierefreiheit (Bildebenen ohne Alternativtext) und Lokalisierung (fehlende Übersetzungen) über den Fluss (Panels, die vom Kapiteleinstieg aus unerreichbar sind) und Performance (zu große Assets) bis zur Integrität (kaputte Verweise). Fehler blockieren das Veröffentlichen, Warnungen nicht. Jedes Problem führt über den Link Open in editor direkt zum betroffenen Panel, viele lassen sich per Fix-Button beheben. Für Bilder über dem Größenlimit gibt es die Korrektur Optimize: Sie kodiert das Bild im Hintergrund neu, dein Original bleibt unangetastet. Siehe Validation and Preflight und die Referenz der Problemcodes.

Klick dann auf Publish. Der vierstufige Assistent führt Preflight erneut aus, fragt nach einer Umgebung, bietet ein Versions-Tag und ein Backup an und zeigt live, wie er das Manifest baut und die Assets hochlädt. Wähl für dein erstes Werk die Umgebung Preview: Sie erzeugt einen nicht erratbaren, widerrufbaren Link, den alle ohne CMS-Login in einem PanelWave Player öffnen können. Schick ihn jemandem und schau, welche Tür gewählt wird. Jede Veröffentlichung landet im Release-Verlauf mit Vergleich nebeneinander und Rollback-Vorschau. Der ganze Ablauf steht unter Publishing.

Wie es weitergeht

Du hast jetzt eine verzweigte Graphic Novel mit zwei Seiten und zwei Sprachen – und einen Link als Beweis. Von hier aus stehen dir im Editor alle Wege offen:

Falls du dich fragst, was das CMS eigentlich für dich schreibt: das offene PanelWave-Manifest, Feld für Feld dokumentiert in der Schema-Referenz. Dein Werk gehört dir – in einem Format, das du lesen kannst.

• Animations und Audio: Kamerafahrten, Keyframes und ein Mix aus vier Bussen für Ambience, Musik, SFX und Stimme auf der Timeline.
• Video Panels: Videoebenen mit Wiedergabe- und Startmodi, Loops und Posterframes.
• Canvas Layout: die unendliche Leinwand. Panels liegen auf einer durchgehenden Fläche, die Kamera fährt sie nach deinen Vorgaben ab.
• Extras: Cover, Character Sheets, Bonus-Artwork und Interviews in der Werkzeugleiste des Players.
• Monetization: Paywall-Regeln pro Werk, Kapitel oder Panel und der Berechtigungssimulator.
• Export: PDF für den Druck, PowerPoint für Pitches, Video für Trailer und ein Werkarchiv, mit dem das ganze Projekt zwischen Systemen umzieht.
• Analytics: Lesetrichter, Panel-Engagement und Hotspot-Klick-Heatmaps, sobald die ersten Lesenden kommen.