Anleitung zum Erstellen reaktiver Bilder auf Discord

Schritt 1: Erstellen Sie Ihren PNGtuber mit dem Fugi-Tool

Nutzen Sie zunächst Fugis Discord Reactive Images-Tool für einen einfachen Erstellungsprozess. Folgen Sie diesen Schritten:

1. Öffnen Sie die Discord-App auf Ihrem Computer zusammen mit OBS Studio, das kostenlos heruntergeladen werden kann.
2. Greifen Sie auf Ihre Discord-Einstellungen zu, indem Sie auf das Zahnradsymbol neben Ihrem Benutzernamen klicken.
3. Navigieren Sie im Einstellungsmenü zum Abschnitt „Erweitert“ und aktivieren Sie den Entwicklermodus.
4. Scrollen Sie im linken Bereich zu „Sprache und Video“, wählen Sie Ihr Mikrofon aus und stellen Sie Ihre Kamera auf „OBS Virtual Camera“ ein.
5. Gehen Sie zu reactive.fugi.tech und klicken Sie auf „Mit Discord anmelden“.
6. Melden Sie sich mit Ihren Anmeldeinformationen an oder scannen Sie den QR-Code und klicken Sie auf „Autorisieren“.
7. Konfigurieren Sie Ihre reaktiven Bilder auf der sich öffnenden Setup-Seite.
8. Laden Sie Ihre Bilder hoch: eines mit geschlossenem Mund, das andere mit offenem Mund. Klicken Sie auf das Plus-Symbol (+), um die einzelnen Bilder hinzuzufügen, und klicken Sie anschließend auf „Speichern“.
9. Kopieren Sie den für Ihr Setup generierten Link.
10. Klicken Sie in OBS unter „Quellen“ auf das Plus-Symbol (+), wählen Sie „Browser“ aus, geben Sie einen Quellennamen ein und klicken Sie auf „OK“.
11. Fügen Sie den Link in das Feld „Eigenschaften-URL“ ein und klicken Sie auf „OK“.
12. Passen Sie die Bildgröße nach Bedarf vor Ihrem Discord-Stream an.
13. Klicken Sie in OBS auf „Virtuelle Kamera starten“, um das Streaming zu starten.
14. Treten Sie einem Sprachkanal in Discord bei und aktivieren Sie Ihre Kamera, um das reaktive Bild in Aktion zu sehen.

Profi-Tipp: Testen Sie das Setup, indem Sie in Ihr Mikrofon sprechen, um sicherzustellen, dass das reaktive Bild richtig reagiert.

Schritt 2: Benutzerdefiniertes CSS mit dem StreamKit-Overlay von Discord verwenden

Für alle, die mit grundlegendem CSS vertraut sind, bietet das Discord StreamKit Overlay einen weiteren effektiven Ansatz. So geht’s:

1. Besuchen Sie streamkit.discord.com.
2. Wählen Sie je nach Ihrer Streaming-Software „Installieren für OBS“ oder „XSplit“ aus.
3. Melden Sie sich bei Discord an, wenn Sie dazu aufgefordert werden. Stellen Sie vorher sicher, dass Discord geöffnet ist.
4. Navigieren Sie zum Voice Widget und wählen Sie Ihren Server und Sprachkanal aus. Aktivieren Sie die Option „Namen verbergen“ aus Datenschutzgründen. Kopieren Sie die generierte URL, die rechts angezeigt wird.
5. Autorisieren Sie die Anwendung, wenn Sie von Discord dazu aufgefordert werden.
6. Öffnen Sie OBS, klicken Sie auf das Plus-Symbol (+), um eine neue Quelle hinzuzufügen, wählen Sie Browser und fügen Sie die kopierte URL ein.
7. Erstellen Sie in Discord einen privaten Textkanal, um Ihre PNG-Bilder hochzuladen.
8. Nutzen Sie den CSS-Generator unter codepen.io.
9. Kopieren Sie Ihre Discord-ID aus der Discord-App und fügen Sie sie in den CSS-Generator ein.
10. Klicken Sie bei jedem in Ihren Discord-Kanal hochgeladenen PNG-Bild mit der rechten Maustaste und wählen Sie „ID kopieren“.Fügen Sie es im Generator neben „Bild-URL“ ein.
11. Klicken Sie auf „CSS generieren“ und kopieren Sie dann den Ausgabecode.
12. Greifen Sie in OBS auf die Quelleigenschaften des StreamKit-Browsers zu, navigieren Sie zum Abschnitt „Benutzerdefiniertes CSS“ und fügen Sie dort Ihren Code ein.
13. Mit einem Klick auf „OK“ schließen Sie ab.

Profi-Tipp: Stellen Sie sicher, dass Sie die Position und Größe Ihres reaktiven Bildes in OBS anpassen, damit es perfekt zu Ihrem Layout passt.

Wie erstelle ich ein reaktives Bild für Discord?

Kann ich außer PNG auch andere Bildformate verwenden?