OBS Overlay einfügen (2026): So baust du es mit Bild- und Browserquelle

Um in OBS ein Overlay einzufügen, klickst du auf den Button + unter dem Dock Sources (Quellen) und fügst eine Bildquelle (Image, für feste Grafiken) oder eine Browserquelle (Browser, für eine Webadresse von einem Alert- oder Chat-Widget) hinzu. Dann setzt du sie in der Liste über die Spielquelle. Drei Dinge entscheiden, ob es klappt: der richtige Quellentyp, die Ebenenreihenfolge und ein transparenter Hintergrund. Die Menünamen unten entsprechen den englischen Strings von OBS Studio 32.2.2 und der offiziellen Wissensdatenbank, Stand 6. Oktober 2026, für Windows-PCs. Wie du eine Webcam platzierst, steht in Spiel mit Facecam aufnehmen – dieser Guide bleibt bei Bild- und Browserquellen.

Fazit: OBS bringt keine eigenen Alerts mit

OBS Studio hat keine eingebauten Stream-Alerts; die offizielle FAQ rät, das Overlay eines Drittanbieters für Alerts als Browser Source hinzuzufügen. In der Praxis heißt das: Alerts und Chatboxen kommen als Adresse, die du einfügst, während ein Logo oder Rahmen eine Datei ist, die du selbst erstellst und lädst. Dieser Guide empfiehlt keinen Anbieter und keine Vorlagenseite. Wenn dir das ganze Bauen von Szenen zu aufwendig ist, lohnt sich auch ein Beitrag zum Umstieg auf automatische Aufnahme, wenn OBS zu kompliziert ist.

Bild- und Browser-Overlays der Reihe nach hinzufügen

1. 1Szene wählen und die Spielquelle zuerst anlegenWähl die Szene im Dock Scenes aus. Das offizielle Tutorial Stream Layout fügt zuerst die Spielquelle hinzu – über Display Capture, Game Capture (nur Windows), Window Capture oder Video Capture – und passt sie dann mit Edit > Transform > Fit to screen (Strg+F) an die Leinwand an. Overlays sind Ebenen, die darüber liegen.
2. 2Die Bildquelle hinzufügenKlick auf den Button + unter dem Dock Sources, um das Fenster Add Source zu öffnen, und wähl in der Liste Source Type den Eintrag Image. Prüf, ob Make source visible angehakt ist, und klick auf Add a new Image; die Quelle bekommt automatisch einen Namen, und ihr Eigenschaftenfenster öffnet sich. Die offizielle Wissensdatenbank beschreibt einen älteren Bildschirm (Create New, ein Name, dann OK), dein Fenster kann also leicht anders aussehen. Klick im Eigenschaftenfenster auf Browse, wähl die Datei und bestätige mit OK. Unterstützt werden BMP, TGA, PNG, JPEG und GIF, mit Alphakanal (Transparenz), wo zutreffend. Der Dateipfad steht in der Eigenschaft Image File.
3. 3Die Browserquelle hinzufügenWähl im selben Fenster Add Source in der Liste Source Type den Eintrag Browser, klick auf Add a new Browser und füg die Adresse des Anbieters im Feld URL des sich öffnenden Eigenschaftenfensters ein. Dokumentierte Standardwerte sind Width 800 und Height 600; FPS 30 ist der Wert, der gilt, wenn Use custom frame rate eingeschaltet ist (Seite vom 11. Januar 2022). Das Alert-Tutorial sagt nur, eine passende Größe zu wählen – nimm also Base (Canvas) Resolution unter Settings > Video als Referenz, wenn du Width und Height anpasst, und achte in der Vorschau darauf, dass nichts abgeschnitten wird. Eine Seite, die auf deinem eigenen Rechner liegt, braucht stattdessen die Option Local file.
4. 4Prüfen, ob der Hintergrund transparent istEin Bild lässt das Spiel nur dann durchscheinen, wenn die Datei selbst mit transparentem Hintergrund gespeichert wurde. Bei einer Browserquelle sorgt laut Doku das Standard-Custom-CSS body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; } dafür, dass der Seitenhintergrund transparent ist. Erscheint ein einfarbiger Kasten, prüf, ob dieses Feld bearbeitet wurde. Eine andere Methode für Transparenz beschreibt die Wissensdatenbank nicht.
5. 5Größe und Position festlegenEine ausgewählte Quelle zeigt in der Vorschau einen roten Begrenzungsrahmen. Zieh sie, um sie zu verschieben, und nutz die roten Anfasser an Ecken und Kanten zum Skalieren. Für exakte Werte öffnest du Edit > Transform > Edit Transform (Strg+E unter Windows) und nutzt Position, Size und Crop. Hältst du beim Ziehen eines Anfassers Alt gedrückt, schneidest du zu; mit gedrückter Strg-Taste schaltest du das Einrasten ab.
6. 6Die Ebenenreihenfolge festlegenQuellen weiter oben in der Liste werden über die darunter gezeichnet. Liegt das Overlay hinter dem Spiel, wähl es aus und klick auf den Pfeil nach oben unter der Liste oder nutz im Menü Order die Optionen Move Up oder Move to Top. Bei mehreren Overlays gilt für jedes dieselbe Regel.
7. 7Sichtbarkeit prüfen, sperren und aktualisierenEin graues Augensymbol bedeutet, dass die Quelle ausgeblendet ist, ein weißes, dass sie angezeigt wird. Sitzt ein Overlay an der richtigen Stelle, kannst du es mit Lock sperren. Zeigt eine Browserquelle immer noch eine alte Seite, klick in ihren Eigenschaften auf Refresh cache of current page.

Welche Quelle zu welchem Overlay passt

Letzte Checks vor Aufnahme oder Livestream

• Die Bilddatei ist BMP, TGA, PNG, JPEG oder GIF und, falls nötig, mit Transparenz gespeichert
• Die Browser-URL entspricht genau dem, was der Bildschirm des Anbieters zeigt, und Local file ist wie gewünscht an oder aus
• Width und Height sind mit Base (Canvas) Resolution abgeglichen, in der Vorschau ist nichts abgeschnitten oder leer
• Das Overlay liegt in der Liste Sources über der Spielquelle
• Das Augensymbol ist weiß, und das Standard-Custom-CSS wurde weder gelöscht noch verändert
• Page permissions steht noch auf dem Standard Read access to OBS status information, sofern du es nicht absichtlich geändert hast

Wenn das Layout steht: Übergabe an die Aufnahme

Alles oben baut ein Layout innerhalb von OBS. DOR setzt in der Aufnahmephase an und erspart dir die Einrichtung von Szenen, Quellen und Ausgabe wie in OBS: Starte ein unterstütztes Spiel wie VALORANT, und die kostenlose Windows-App erkennt es und nimmt das komplette Match als mp4 auf. VALORANT gehört zu den sieben Spielen, in denen zusätzlich Kill-Highlights automatisch als Clips entstehen. Danach legst du mit dem Zuschneide-Tool der Bibliothek Start und Ende fest und wählst 16:9, 9:16 oder 1:1 als Ausgabe, und im Browser-Editor DOR Studio, der ohne Installation läuft, fügst du beim Schneiden Text hinzu – das ist ein anderer Arbeitsschritt als ein Live-Overlay.

Offizielle Quellen

• Sources Guide (Leitfaden zu Quellen)
• Image Sources (Bildquellen)
• Browser Source (Browserquelle)