×

Guide to Creating Reactive Images on Discord

2024/01/14
PC Repair

Key Notes

  • Reactive Images can enhance streaming by reacting to audio cues.
  • Two main methods for creating reactive images: using Fugi’s tool or custom CSS.
  • Adding PNG files to Discord is straightforward; just drag and drop.

Enhance Your Discord Experience with Reactive Images

Reactive Images on Discord provide an interactive element to your presence online, particularly for content creators looking to engage their audience. This guide will walk you through the process of creating and utilizing these images effectively, enriching your Discord experience, whether you’re gaming, streaming, or socializing.

Step-by-Step Guide to Creating Discord Reactive Images

Step 1: Create Your PNGtuber Using Fugi’s Tool

To begin, utilize Fugi’s Discord Reactive Images tool for an easy creation process. Follow these steps:

  1. Open the Discord app on your computer alongside OBS Studio, available for free download.
  2. Access your Discord settings by clicking the cog icon next to your username.
  3. In the settings menu, navigate to the Advanced section and enable Developer Mode.
  4. Scroll to Voice & Video on the left panel, select your microphone, and set your camera to OBS Virtual Camera.
  5. Go to reactive.fugi.tech and click Login with Discord.
  6. Log in using your credentials or scan the QR code and click Authorize.
  7. Configure your reactive images on the setup page that opens.
  8. Upload your images: one with a closed mouth, the other with an open mouth. Click the Plus (+) icon to add each image and then click Save.
  9. Copy the link generated for your setup.
  10. In OBS, click on the Plus (+) icon under Sources, select Browser, enter a source name, and click Ok.
  11. Paste the link in the Properties URL field and click Ok.
  12. Adjust the image size as needed before your Discord stream.
  13. Click “Start Virtual Camera” in OBS to initiate streaming.
  14. Join a voice channel in Discord and enable your camera to see the reactive image in action.

Pro Tip: Test the setup by talking into your microphone to ensure the reactive image responds correctly.

Step 2: Utilize Custom CSS with Discord’s StreamKit Overlay

For those comfortable with basic CSS, the Discord StreamKit Overlay offers another effective approach. Here’s how to do it:

  1. Visit streamkit.discord.com.
  2. Select Install for OBS or XSplit based on your streaming software.
  3. Log in to Discord if prompted; ensure Discord is open beforehand.
  4. Navigate to Voice Widget, choosing your server and voice channel. Enable the Hide Names option for privacy. Copy the generated URL displayed on the right.
  5. Authorize the application when prompted by Discord.
  6. Open OBS, click on the Plus (+) icon to add a new source, choose Browser, and paste the copied URL.
  7. Create a private text channel in Discord to upload your PNG images.
  8. Utilize the CSS generator at codepen.io.
  9. Copy your Discord ID from the Discord app and paste it into the CSS generator.
  10. For each PNG image uploaded in your Discord channel, right-click and select “Copy ID”.Paste it next to “Image URL” in the generator.
  11. Click on Generate CSS, then copy the output code.
  12. In OBS, access the StreamKit browser source properties, navigate to the Custom CSS section, and paste your code there.
  13. Finalize by clicking Ok.

Pro Tip: Make sure to adjust the position and size of your reactive image in OBS to fit your layout perfectly.

Summary

In this guide, we explored how to enhance your Discord streaming experience by creating and using Reactive Images. Through Fugi’s tool or custom CSS with StreamKit, adding personalized visual cues to your voice presence can significantly amplify engagement and enjoyment during chats.

Conclusion

Reactive Images are an innovative way to enhance your interactions on Discord, making conversations more lively and visually appealing. Whether you’re a content creator or just someone looking to express themselves, implementing reactive images can greatly improve your streaming and chatting experience. Now, take the knowledge you’ve gained and start making your Discord sessions more engaging!

FAQ (Frequently Asked Questions)

How do I create a reactive image for Discord?

You can create a reactive image using Fugi’s React Image tool or by utilizing custom CSS through the Discord StreamKit Overlay, depending on your comfort with technology.

Can I use other image formats aside from PNG?

While PNG is commonly used for reactive images due to its transparency features, you can also use other image formats as long as they are compatible with Discord.

PC Repair