Overlay-Designer
Eranio Veröffentlicht am: 13. Oktober 2026
Overlay-Designer (Beta)
Der Overlay-Designer ist der freie Editor für deine Stream-Overlays. Du kannst darin eigene Leinwände anlegen, Widgets per Maus platzieren, in der Größe anpassen und mit Inhalten füllen, und bekommst für jede Leinwand einen eigenen Link für OBS. Menü: Overlay → Designer (Beta).
Der Editor trägt bewusst den Zusatz "Beta": es wird noch aktiv daran weitergearbeitet, deshalb kann es gelegentlich noch zu Fehlern oder kleinen Änderungen kommen. Du kannst ihn trotzdem schon für deinen echten Stream verwenden.
Diese Anleitung beschreibt den Editor selbst (Leinwände, Werkzeuge, Bedienung). Eigene Anleitungen zu den einzelnen Widget-Typen folgen in einer späteren Runde.
Leinwand-Übersicht
Beim Aufruf von Overlay → Designer (Beta) siehst du eine Liste all deiner Leinwände (Overlays). Du kannst beliebig viele davon anlegen, zum Beispiel eine für den normalen Stream und eine zweite für besondere Events.
| Spalte | Bedeutung |
|---|---|
| Name | Der Name, den du der Leinwand gegeben hast. |
| Widgets | Wie viele Widgets gerade auf dieser Leinwand platziert sind. |
| Erstellt am | Zeitpunkt der Erstellung. |
Über den Button Neues Overlay legst du eine weitere Leinwand an. Du vergibst dabei einen Namen (Standard: "Mein Overlay") und landest danach direkt im Editor dieser neuen Leinwand.
Pro Zeile stehen dir folgende Aktionen zur Verfügung:
| Aktion | Was passiert |
|---|---|
| Bearbeiten | Öffnet den Editor für diese Leinwand. |
| Overlay-Link | Öffnet den OBS-Link dieser Leinwand in einem neuen Tab (zum Nachschauen, nicht zum Einbinden). |
| Duplizieren | Legt eine unabhängige Kopie mit allen Widgets an. Du kannst in der Kopie frei experimentieren, ohne das Original zu verändern. Die Kopie bekommt einen eigenen, neuen Link. |
| Umbenennen | Ändert nur den Namen der Leinwand. |
| Löschen | Entfernt die Leinwand mit allen ihren Widgets unwiderruflich. |
Der Editor
Klickst du auf Bearbeiten, öffnet sich der eigentliche Editor. Er ist in drei Bereiche aufgeteilt:
- Links: Widget hinzufügen (oben) und Ebenen (unten), zwei getrennt scrollende Listen.
- Mitte: die Leinwand selbst, in der echten Auflösung deines Overlays, verkleinert dargestellt.
- Rechts: die Eigenschaften des gerade ausgewählten Widgets.
Auf schmalen Bildschirmen (Handy/Tablet) werden diese drei Bereiche zu Reitern zusammengefasst: Ebenen, Widget hinzufügen, Leinwand, Eigenschaften.
Obere Werkzeugleiste
| Element | Was es tut |
|---|---|
| Auflösung (Dropdown) | Wählt eine feste Auflösung (720p, 980p, 1080p, 1440p, 4K) oder "Manuell..." für eine freie Breite/Höhe (160 bis 7680 Pixel Breite, 90 bis 4320 Pixel Höhe). |
| Rückgängig / Wiederholen | Macht die letzten Änderungen rückgängig bzw. wiederholt sie (auch per Tastenkombination, siehe unten). |
| Duplizieren | Dupliziert das gerade ausgewählte Widget. |
| Raster anzeigen | Blendet ein Hilfsraster über der Leinwand ein oder aus. |
| Am Raster einrasten | Schaltet das Einrasten von Widgets am Raster beim Verschieben/Skalieren ein oder aus. |
| Rastergröße | Abstand der Rasterlinien in Pixel (20, 40, 60 oder 80 px). |
| Ereignis-Sounds | Öffnet die Verwaltung der Sounds, die dieses Overlay bei bestimmten Ereignissen abspielt. |
| Alle Ziele, Timer und Zähler zurücksetzen | Setzt sämtliche laufenden Fortschritte (Ziele, Timer, Zähler) aller Live-Widgets dieser Leinwand auf ihren Startwert zurück. |
| Medienbibliothek | Öffnet die Medienbibliothek dieser Leinwand (siehe unten). |
| Widget-Hilfe | Öffnet eine kurze Beschreibung zu jedem vorhandenen Widget-Typ. |
| Overlay-Link (Augen-Symbol) | Zeigt oder versteckt den Link für OBS. |
| Link kopieren | Kopiert den aktuell angezeigten Link in die Zwischenablage. |
| Link neu generieren (Kreis-Pfeil) | Erzeugt einen neuen, zufälligen Link für diese Leinwand. Der alte Link funktioniert danach nicht mehr, du musst die Browser-Source in OBS aktualisieren. |
Darunter steht ein Hinweis, dass sich der Editor im Beta-Stadium befindet.
Widget hinzufügen
Im linken oberen Bereich stehen alle verfügbaren Widget-Typen, nach Kategorien geordnet. Ein Klick fügt das Widget in Standardgröße und -position auf der Leinwand hinzu. TikTok: in Planung und Bearbeitung.
Ebenen
Darunter zeigt die Ebenen-Liste alle Widgets dieser Leinwand, oberste Ebene zuerst. Pro Zeile kannst du:
- auf den Namen klicken, um das Widget auf der Leinwand auszuwählen,
- per Ziehen am Griff die Reihenfolge (und damit die Stapelung) ändern,
- über das Augen-Symbol die Sichtbarkeit des Widgets umschalten,
- über das Schloss-Symbol das Widget vor versehentlichem Verschieben/Skalieren sperren.
Die Leinwand
In der Mitte siehst du die Leinwand in echten Proportionen, nur verkleinert dargestellt, damit sie auf den Bildschirm passt. Ein Button oben rechts auf der Leinwand schaltet in den Vollbildmodus.
Widgets auswählen, verschieben, skalieren:
- Klick auf ein Widget wählt es aus (Eigenschaften erscheinen rechts).
- Ziehen verschiebt das Widget.
- Ziehen an den Eckgriffen ändert Breite und Höhe.
- Ist "Am Raster einrasten" aktiv, springt das Widget beim Verschieben/Skalieren automatisch auf die nächste Rasterlinie bzw. auf den Rand oder die Mitte der Leinwand (Einrast-Hilfslinien werden dabei angezeigt).
- Ein gesperrtes Widget lässt sich nicht verschieben, skalieren oder drehen.
Rechtsklick-Menü: Ein Rechtsklick auf ein Widget öffnet ein Kontextmenü mit folgenden Schnellaktionen:
| Aktion | Wirkung |
|---|---|
| Horizontal zentrieren / Vertikal zentrieren / Beides zentrieren | Zentriert das Widget auf der Leinwand. |
| Breite ausfüllen / Höhe ausfüllen / Leinwand ausfüllen | Streckt das Widget über die volle Breite, Höhe oder die ganze Leinwand. |
| Links / Rechts / Oben / Unten ausrichten | Schiebt das Widget an den jeweiligen Rand. |
| Eine Ebene nach vorne / nach hinten | Ändert die Stapelreihenfolge um eine Position. |
| Duplizieren | Erstellt eine Kopie, leicht versetzt. |
| Sperren / Entsperren | Siehe oben. |
| Ausblenden | Schaltet die Sichtbarkeit aus. |
| Löschen | Entfernt das Widget endgültig (mit Sicherheitsabfrage bei wichtigen Typen). |
Dieselben Schnellaktionen (außer Löschen/Sperren/Ausblenden) findest du auch direkt im Eigenschaften-Bereich eines ausgewählten Widgets.
Tastenkombinationen (wenn kein Textfeld aktiv ist):
| Tastenkombination | Wirkung |
|---|---|
| Strg+Z | Rückgängig |
| Strg+Y (oder Strg+Umschalt+Z) | Wiederholen |
| Strg+D | Ausgewähltes Widget duplizieren |
| Entf oder Rücktaste | Ausgewähltes Widget löschen |
| Esc | Schließt ein offenes Menü bzw. verlässt den freien Text-Positionierungsmodus |
Rückgängig/Wiederholen merkt sich die letzten Änderungen dieser Sitzung (bis zu 100 Schritte zurück).
Eigenschaften
Ist ein Widget ausgewählt, zeigt der rechte Bereich alle seine Einstellungen. Welche Felder das genau sind, hängt vom Widget-Typ ab. Ist kein Widget ausgewählt, steht dort ein Hinweis, dass du erst eines auf der Leinwand oder in der Ebenen-Liste anklicken sollst.
Darstellung (für alle Widgets)
Viele Widgets teilen sich gemeinsame Gestaltungs-Optionen im Eigenschaften-Bereich, zum Beispiel Schriftart, Schriftgröße, Farben, Rahmen, Hintergrund-Deckkraft oder die Wahl zwischen Balken-/Kreis-/Prozent-Darstellung bei Fortschrittsanzeigen.
Medienbibliothek
Über den Button Medienbibliothek in der Werkzeugleiste öffnest du eine Übersicht deiner hochgeladenen Bilder, Videos und Audiodateien. Du kannst dort:
- Dateien oder ganze Ordner per Ziehen-und-Ablegen hochladen, oder über die Buttons Dateien auswählen / Ordner auswählen,
- nach Bildern, Videos, Audio oder den mitgelieferten Standard-Dateien filtern,
- eine Datei vergrößert ansehen,
- eine Datei löschen.
Die Medienbibliothek wird vom Overlay-Designer und vom älteren Overlay-Alerts-System gemeinsam genutzt. Details zu Dateitypen, Limits und dem Speicherkontingent stehen in der Anleitung Medien-Bibliothek.
Testbereich
Am unteren Rand des Editors findest du einen auf- und zuklappbaren Testbereich. Er zeigt dir, nach Gruppen sortiert, Testknöpfe für alle Widgets, die auf der aktuellen Leinwand tatsächlich vorhanden sind:
- Events: löst einen Beispiel-Alert aus (Follower, Abo, Trinkgeld, Cheer, Raid, Bot-Nachricht und, falls vorhanden, Ko-fi Mitgliedschaft/Shop).
- Weitere: Hype Train, TTS und Werbung.
- Effekte: alle übrigen Live-Widgets (Zähler, Ziele, Timer und so weiter).
- Minigames: eines der platzierten Minispiel-Widgets.
Ein Klick spielt die Animation direkt auf der Leinwand im Editor ab und schickt zusätzlich ein echtes Testereignis an deinen Overlay-Link, damit du es auch in OBS prüfen kannst. Gibt es noch kein passendes Widget auf der Leinwand, ist der entsprechende Testknopf nicht sichtbar.
Overlay-Link speichern und ändern
Jede Leinwand hat ihren eigenen, geheimen Link. Diesen Link trägst du als Browser-Source in OBS ein (siehe Anleitung Overlay in OBS einbinden). Behandle ihn wie ein Passwort: Wer ihn kennt, kann über ihn Testereignisse an dein Overlay schicken. Teile ihn nicht öffentlich.
Über Link neu generieren kannst du jederzeit einen neuen Link erzeugen. Danach funktioniert der alte Link nicht mehr, du musst die Browser-Source in OBS mit dem neuen Link aktualisieren.
Speichern
Jede Änderung (Widget verschieben, Einstellung ändern, Widget hinzufügen oder löschen) wird automatisch und sofort gespeichert, es gibt keinen separaten Speichern-Button. Ist das Overlay bereits als Browser-Source in OBS eingebunden, lädt es sich nach einer Änderung von selbst neu (mit kurzer Verzögerung, damit mehrere schnelle Änderungen nicht zu mehrfachem Neuladen führen und ein gerade laufender Alert zuerst zu Ende spielen kann).
Häufige Fragen
Wie viele Overlays kann ich anlegen? Es gibt keine feste Obergrenze. Du kannst zum Beispiel ein Overlay für den normalen Stream und ein zweites für ein besonderes Event anlegen und in OBS zwischen den zugehörigen Browser-Sources wechseln.
Ich habe versehentlich ein Widget gelöscht. Kann ich das rückgängig machen? Ja, solange du die Seite nicht neu geladen hast, funktioniert Strg+Z (Rückgängig) auch für ein Löschen.
Warum ist der Editor als "Beta" markiert? Es wird noch aktiv weiterentwickelt. Die Funktionen, die bereits da sind, funktionieren zuverlässig, aber es kann noch zu kleinen Änderungen oder vereinzelt zu Fehlern kommen.
Was ist der Unterschied zwischen "Ausblenden" (Augen-Symbol) und "Löschen"? Ausblenden lässt das Widget bestehen, es wird im Overlay nur nicht angezeigt. Löschen entfernt es endgültig.
Ich finde den Link für OBS nicht mehr. Öffne die Leinwand im Editor und klicke oben auf das Augen-Symbol neben "Overlay-Link", der Link wird dann angezeigt und du kannst ihn kopieren.
Zeigt jede Leinwand alle Widgets? Nein, jede Leinwand hat ihre eigenen Widgets. Ein Widget, das du auf Leinwand A hinzufügst, erscheint nicht automatisch auf Leinwand B.