Anleitung: Comic-Overlay
Etwa fünf Minuten. Du brauchst die Datei customize.html aus deinem Etsy-Download und OBS Studio oder Streamlabs Desktop.
Bevor es losgeht
- Dein Download, entpackt. Darin liegt customize.html, die Seite, die deine Overlay-Dateien erzeugt.
- Ein Computer mit aktuellem Browser: Chrome, Edge, Firefox oder Safari.
- OBS Studio, Streamlabs Desktop oder ein anderes Streaming-Programm mit Browserquelle.
Knöpfe und Menüs von OBS stehen hier so, wie OBS sie auf Englisch zeigt. In anderen Sprachen stehen sie an derselben Stelle. Die Anpassungsseite spricht deine Sprache: oben rechts wählen.
Teil 1: Dein Overlay machen
-
Anpassungsseite öffnen
Doppelklick auf customize.html. Sie öffnet sich im Browser, installiert wird nichts. Oben rechts die Sprache der Seite wählen. -
Dein Kanal
Unter Grundlagen den Kanalname eintragen und Farbvariante und Sprache im Overlay wählen. Logo oder Avatar: Bild wählen fügt dein Logo ein (PNG, JPG oder WebP). Es wird verkleinert und bleibt auf deinem Computer. -
Deine Socials
Unter Socials bis zu 6 wählen: Twitch, YouTube, TikTok, Kick, Instagram, X, Discord oder eine Website, jeweils mit deinem Namen oder Link. + Social hinzufügen fügt eins hinzu, × entfernt eins. -
Texte und Countdown
Starting Soon, Gleich zurück, Stream-Ende, Webcam-Rahmen und Info-Leiste aufklappen: Die Vorschau rechts wechselt mit. Grauer Text im Feld ist der Standard; leer lassen, um ihn zu behalten. Countdown: Minuten zählt ab dem Erscheinen der Szene, Feste Uhrzeit (z. B. 20 Uhr) bis zu deiner Startzeit. -
Dateien speichern
Alle Dateien laden (ZIP) speichert eine ZIP mit allen fünf Dateien und einer kurzen OBS-Notiz. In einen Ordner entpacken, der bleibt, zum Beispiel Dokumente/Overlay. Diese Datei speichern speichert nur das Teil, das du gerade siehst.
Teil 2: In OBS einfügen
-
Browserquelle hinzufügen
In OBS Studio unter Sources auf + klicken, Browser wählen und einen Namen vergeben. Local file anhaken und eine Datei wählen, zum Beispiel craftium-manga-starting-soon.html. -
Breite und Höhe
Width und Height einstellen:- Starting Soon, Gleich zurück, Ende: 1920 × 1080
- Webcam-Rahmen: wie auf der Seite angezeigt, zum Beispiel 960 × 540 (16:9), 800 × 600 (4:3), 600 × 600 (1:1), 540 × 960 (9:16)
- Info-Leiste: 1920 × 160
-
Bei jeder Szene frisch
Das hier einschalten, damit Auftritt und Countdown jedes Mal neu starten, wenn die Szene erscheint:Refresh browser when scene becomes active ON
Teil 3: Später etwas ändern
-
Ändern und neu speichern
customize.html wieder öffnen: Im selben Browser sind deine Einstellungen noch da. Sonst Gespeicherte Datei öffnen klicken und eine deiner gespeicherten Overlay-Dateien wählen. In denselben Ordner speichern und die alte Datei ersetzen. -
In OBS aktualisieren
In OBS Rechtsklick auf die Quelle und Refresh wählen. Die neue Fassung erscheint sofort.
Streamlabs Desktop: Add Source → Browser Source, Local File anhaken, gleiche Größen. Meld Studio und andere: eine Browserquelle mit der Datei und denselben Größen.
Mehr auf der Anpassungsseite
Alles, was du änderst, siehst du sofort in der Vorschau.
| Einstellung | Was sie macht |
|---|---|
| Farbvariante | Klassische, Nacht- oder Pastellfarben des Stils. |
| Sprache im Overlay | Standardtexte im Overlay auf Englisch, Deutsch, Spanisch, Portugiesisch oder Französisch. |
| Ruhige Bewegung (weniger Animation) | Weniger Bewegung: keine flackernden Linien, keine schwebenden Lautwörter. |
| Startzeit | Bei fester Uhrzeit: die Startzeit; die Szene zeigt sie über dem Countdown. |
| Text am Ende des Countdowns | Erscheint, wenn der Countdown bei null ist. |
| Kameraformat | Ändert nur die vorgeschlagene Größe; der Rahmen passt in jede Größe. |
| Kanalname zeigen | Namensschild unten links am Rahmen. |
| LIVE-Stempel zeigen | Roter LIVE-Stempel oben rechts, in der Sprache des Overlays. |
| Eigene Hinweise (wechseln mit den Socials) | Bis zu 4 eigene Hinweise; sie wechseln sich mit deinen Socials ab. |
| Sekunden je Eintrag | 3 bis 60 Sekunden je Eintrag in der Info-Leiste. |
Hilfe
Die Quelle bleibt leer
- Local file angehakt und die richtige Datei gewählt?
- Datei nach dem Einfügen verschoben oder umbenannt? Neu wählen.
- Breite und Höhe eingestellt?
- Doppelklick auf die Datei: Erscheint sie im Browser?
Alle Browserquellen bleiben leer (Mac)
Auch andere Browserquellen? In OBS Settings → Advanced → Sources öffnen, Enable Browser Source Hardware Acceleration ausschalten und OBS neu starten.
Der Countdown fängt neu an
Mit Refresh browser when scene becomes active zählen die Minuten ab dem Erscheinen der Szene. Für einen festen Start Feste Uhrzeit (z. B. 20 Uhr) wählen.
Kurz eine einfache Schrift
Die Comic-Schriften kommen von Google Fonts. Ohne Internet erscheint eine einfache Schrift, bis sie da sind.
Meine Einstellungen sind weg
Ein privates Fenster oder gelöschte Browserdaten vergessen sie. Gespeicherte Datei öffnen klicken und eine deiner gespeicherten Overlay-Dateien wählen: Alles ist wieder da.
Zu viel Bewegung für meine Zuschauer
Ruhige Bewegung (weniger Animation) einschalten und die Dateien neu speichern.
Hängt es noch? Schreib uns über Etsy-Nachrichten oder an craftium.berlin@gmail.com. Nenn dein Streaming-Programm und was du siehst; ein Bildschirmfoto hilft.
Updates
Updates für Version 1.x kommen als neue customize.html bei deinen Etsy-Käufen. Öffnen, Gespeicherte Datei öffnen klicken, eine deiner Overlay-Dateien wählen und neu speichern.
Ein Kauf = ein Kanal (derselbe Kanal auf Twitch, YouTube und Kick zählt als einer). Monetarisierte Streams sind erlaubt. Bitte nicht weiterverkaufen, teilen oder hochladen. Volltext: LICENSE.txt im Download.