When it comes to vtubing, it seems like a very steep climb, but it doesn’t have to be so scary! A lot of streamers will use a PNGtuber model, which a still image or small gif that’s set to react to sound or some hotkey inputs. As you get a feel for your stream and your persona, starting as a PNGtuber is a blast! It only requires a microphone and OBS to make a basic sound reactive PNGtuber talksprite!
This uses a basic Browser Source in OBS, with a link from the Discord Streamkit. This is a simple reactive graphic that will change based on mic inputs in your Discord Channel. It’s super simple with the steps below, or you can try the wonderful Veadotube Mini for a dedicated program to help with the setup.
Two main alternatives to Discord Streamkit:
What You Need for a PNGtuber:
- A Discord Server (preferably with private channels)
- 2 .PNG or .GIF images uploaded publicly (Discord helps with this)
- An OBS program like OBS Studio or Streamlabs that can use a Browser Source.
Step One: Enable Developer Mode
On Discord, find your User Settings 
(gear icon) so that you can open the Advanced area. Turn on Developer Mode in here.
If you have OBS open, you may also need to Disable Streamer Mode as well.
Step Two: Right click your icon, and copy your Discord ID
Once Developer Mode is on, we can copy the User ID to use in the Generator below.
You can copy other people’s Discord IDs to set up talksprites for other people in your server, too! Make sure you use separate OBS Browser Sources for every character.
Step Three: Send yourself two images and "Copy Link"
Discord is a great way to send yourself images
As you can see in these screenshots, you can use a private channel to send yourself images on Discord.
Click to enlarge them and then open the Original Image, to copy the link. This was changed at some point recently!
You could use links from other image hosts aside from Discord too.
Here is a basic hairy puppet design that you can use as a talksprite in your streams! Copy the two links below:
https://cdn.discordapp.com/attachments/847957104014131250/848341798082445332/muppet-closed.png
https://cdn.discordapp.com/attachments/847957104014131250/848341796274438154/muppet-open.png
Step Four: Generate your Custom CSS below
Now that you have your Discord ID and the two Image Links from the steps above, you can paste this information into the generator below to create code you need for the sound reactive talksprite image and animation. We kept this generator a bit simple, but you can edit CSS in Notepad++ so you can change the non-speaking sprite’s brightness or even set the animation to “none” if you dislike the bounce effect.
New and improved form!
Please ensure you’re following best practices with your code and don’t remove parts nor add extra spaces.
//**raw CSS for streamkit PNGtuber below**//
li.voice-state:not([data-reactid*=”DISCORD-ID”]) { display:none; }
.avatar {
content:url(IMAGE-LINK.PNG);
height:auto !important;
width:auto !important;
border-radius:0% !important;
filter: brightness(100%);
}
.speaking {
border-color:rgba(0,0,0,0) !important;
position:relative;
animation-name: none;
animation-duration: 1s;
animation-fill-mode:forwards;
filter: brightness(100%);
content:url(IMAGE-2.GIF);
}
li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
Step Five: Open OBS and make a Browser Source
Take your CSS to your OBS program and create a “Browser Source” layer (will have an Earth icon in OBS)
You will paste the code you generated into the Custom CSS area, and set the image size to match your images.
The last thing that’s missing is a Voice Widget from Discord’s Streamkit, this will go in the URL field of the Browser Source.
With the Discord Streamkit site, choose “Install for OBS” and we can make a Voice Widget.
Choose your Server and the right Voice Channel (preferably private so you don’t have surprise guests) and Hide Names. Then copy the code on the right!
This is pretty much the last step!
Once you have your Browser Source created, you can rename, resize, and reposition it anywhere on your layout. You’re a PNGtuber now! Consider using props and designing your character in parts for other poses and outfits too.
That's it! Now you have a PNGtuber talksprite for your stream. Get the group together and have some fun!
This article was written with the average streamer in mind, so this setup is great for gamers and social streams ro help set up a PNGtuber. This would be great for explainer videos or even DnD campaigns with friends. There are other tools like Spectralizer to help with more advanced visualizer setups for DJs and live events.
Inspired by an article from a retired vtuber named Jiinh, we are not affiliated with him
Still need some help?
Reach out with this form below to provide the basic info required, and we can help you to privately fix errors related to this setup.
This Post Has One Comment
This is such a useful post! The GrifNMore site is so useful for all sorts of creative projects!
Comments are closed.