Social Pop Ups For Streamers and Content Creators

Social Pop Ups For Streamers and Content Creators

Hey! What's up Nerds, Keyon here with Nerd or Die, and today, I want to walk you through Nerd or Die’s most recent release, the Ultimate Social Pop Up Tags. Whether you’re creating content for YouTube, Twitch, TikTok, Instagram, Twitter or anything else, so many of us content creators just want to connect our audiences across these different platforms, where possible, without it being a headache. Well I'd like to say "Worry No More" because the Ultimate Social PopUp Tag Pack has got you covered.

With premade and customisable designs, you can drag and drop this into your editor or your livestreams, and be able to use these pop ups in lots of different settings.

Before we get started, I'd like to remind you to hit that subscribe button and turn on notifications so you're always informed when we release a new overlay pack or drop some Streaming knowledge in your lap. Recently we released our newest product, Media Looper that works hand in hand with The Ultimate Social Pop Up Tags.

This tool lets your stream do all the heavy lifting for you and make it effortless to add social popups, lower thirds, and sponsor banners to your stream with delays in between. Now you can have a popup come in every 5 seconds, then switch to a new popup, or you can switch it to 15, 30, 60 seconds, all the way up to 30 minutes between playbacks. Check out our video on Media Looper here on our YouTube or head on over to Nerd or Die dot com for more information.

I can't begin to tell you how excited I am about this product.

So with that said, let’s jump in and see how you can get started using the Ultimate Social PopUp Tags. This pack comes with pre-rendered pop-ups that are in both mov format and webM format, so you can use these on your livestream with mov or webM files, or put them in your videos when editing using the mov files. To drop these into our video editor, open up the social pop up folder, and navigate to the defaults folder, select which tags you want to put in your project, then drag them and drop them in your project window here. I'd recommend making a folder and dropping them in there for sake of keeping things organized, just in case you want to drop them all in and make them part of your editing template.

After that, you can simply click and drag these into your timeline. These are useful for editors using Premiere, Davinci Resolve, Sony Vegas, HitFilm Express, FinalCut Pro.. the list goes on, because they are mov files, they're compatible with pretty much any popular video editor out there. They all look great on their own, as they were designed by Nerd or Die's very own Defrag.

Wave to the camera buddy. What a guy! Anyway, but what if we want to personalize them? Well, if you're using Premiere, or After Effects, I've got some good news. For Premiere, you can import a MOGRT file, which is essentially a Motion Graphic Template, or MO-GART for short.

To do this in Premiere, head up to Window, and make sure you have Essential Graphics selected, with this window open, we can see a little plus button with a window in the bottom right corner, this is how we're gonna install our motion graphics template. Click this and navigate to the Premiere Pro folder within our Ultimate Social Popup Directory. Inside you can see the Motion Graphics Template. Select the MOGRT and hit open, and it's installed. If you cannot see the MOGRT right away, search in the field here for "ultimate social popup" and it should bring it up.

Click and drag this into your timeline, scrubbing through the timeline, we can see it fully open, and on our canvas, it's big. Like if this is what you're going for, more power to you, but this is what I'm looking for, so we're going to head to Effects Controls and scale it down a bit, you can also reposition it as well.

A premiere pro tip, if you select Motion in the effect controls window, you can click and drag in the Canvas area instead of using the position coordinates. That's a bit more what we're going for. It's looking good, so let's customise it a bit more.

I want to set up a TikTok popup here, so I'm going to select our popup in the timeline, then head to Essential Graphics, and from the PLATFORM field, select TikTok.

You can see right away, it's changed both the colour of the popup and the logo to the TikTok logo. I want to put a TikTok name in the popup itself, so simply type in the Handle Text area to change that. Let's put Nerd or Die. Then I'm going to change the tagline from the default 'subscribe' to Don't Forget to Follow in the Tagline Text Box.

So if I'm talking about my TikTok channel in my YouTube video, people will pop over to see what I'm doing there as well. The default font for this popup is Industry, the only fonts that will work with the Motion Graphics Template are fonts from Adobe Fonts. Chances are, if you're using After Effects or Premiere you'll have access to this font. But if you don't, don't worry about it. The program will substitute it for a different font you do have.

I like this font, but I want to try something else, so I'm going to go with Roobert Bold. I'm going to make it bigger as well.

You can adjust different settings of any font, such as the font size, font weight, even the font thickness and italics, you can set it to type in all capital letters, or so that it will type lower case in small capitals and uppercase in larger capital letters. Feel free to toy around with any of these settings to find the look you're going for.

Everything is non-destructive and your best friend, Undo, will never let you down.

We can see 4 new options, Override Box Color, a Color Swatch for the Box Color, Box Roundness and Box Padding. Overriding the Box Color and the Swatch are linked, so that when you check this box, you'll notice the color changes to the Swatch here. You can use the Swatch to then pick any color you want, or simply input a hex code or settings of your choosing to get the color just right. Color looks good to me, so moving on.

Next, we can see the Box roundness setting, and it's at 0 currently.

If we pull this up slowly, and look at the corners of the box, we can see that the corners become...don't all put your hands up at once. Rounder!

Giving it a softer look, or an entirely different look from the original box, if you put the value at the maximum value, we take away the corners entirely giving us a nice round look. Personally, I think round corners add a lot of style these days, but I don't like to over do it, so we're only going to make the corners slightly round.

Box Padding determines how much extra space is being created around your main popup text and the logo, so if I begin to decrease this, you can see that the space around the popup text and logo lessens, and of course increasing, will give it more space within the popup body. Finally, we move into the CONTENTS section. Here, you can customise the colour of the Popup handle, the tagline, and even the icon of the tag itself.

 

In addition, you can scale the Icon up and down, and even adjust the shadow distance behind the handle and the logo. And if you don't want it on at all, you can just switch it off by setting it to 0. You can even adjust the opacity, allowing it to be more subtle or perhaps intensity the shadow even more. Last but not least - you can of course use these in a portrait template style, which is 9 by 16 aspect ratio. Typically that'd be 1080 x 1920 if you're setting up a project file.

And it works just the same way. You just drop it in from the Essential Graphics panel and you can resize them as we did before. If you want to export these pop ups to use them in your live stream with OBS or StreamLabs OBS, you can do that easily. Here I have an example of a sequence inside Adobe Premiere. If I just go up to the Sequence Settings here, you can see its your standard 1920 x 1080 canvas.

You can go smaller than this, if you need to, like 1280 x 720, the goal is to just make sure that the entire pop up animation is within the canvas size you've selected. Once you've customized your Social Pop up to your liking, you're going to want to export it. To do that, we go up to File, Export, and click Media, or just press Crtl + M on your Keyboard.

The two video formats we recommend you export as are Quicktime MOV and WebM. If you don't have WebM in your drop down menu selection, you can easily go to the WebM Coden website, download this file, and install the webm codec.

WebM videos tend to be a smaller size and they can include the Alpha channel in the export, allowing for transparency when you end up importing the file in your Streaming Software. If you were to export this as an Mp4 file for example, there's no alpha channel and you'll end up with a black background surrounding your animation which doesn't look the best. Assuming you have the WebM Codec installed, go to the Format menu and select WebM. Below this you have the options to export Video and Audio. We definitely want to keep Video selected, but you may not want to export audio.

You can drag in and add the audio from the default pop ups that we included with this pack, swap in audio of your own choice, or just toggle it off entirely.

Moving down even further I like to make sure that I'm matching the source of the sequence we have set up. I tend to use the VP8 Codec within WebM. You can tweak the settings to your own liking. You don't have to adjust the Method, but Constant quality tries to keep the bitrate of the export at a constant.

If for some reason you're going for an even smaller file size, change the drop down box from Constant Quality to Variable Bitrate. That way, when a lot of action isn't happening on screen, the bitrate will drop down a bit, but visually everything will still look crisp and clean. That's one of the really powerful options within the WebM Codec, but as we're keeping this file locally, we'll keep it at Constant Quality.

The most important setting you'll want to adjust next is Include Alpha Channel. Make sure this box is checked, and it will have the transparent background we talked about.

Once you're happy with your settings, Make sure you know where it's being exported to and click export. For .MOV files, we go back to the Format Dropdown and select QuickTime. In here we wanna select the video codec Animation. Much like in the WebM you can choose to Match the Source of the sequence or you can reduce the size of the sequence here as well.

So if you wanted to work in a higher resolution sequence, but then export something a little smaller, just adjust the width and height here. Like with WebM, the most important setting we want to adjust here is making sure the 8 bits per channel plus Alpha is selected. Don't forget to turn off audio if you aren't using any, make sure you know where the output destination is, and finally click export. Once you've got your file exported and ready to drop into your streaming software of choice, simply grab the file and drag it on your canvas. If this doesn't work, you just need to add it as a media source as you typically would, but Drag and Drop with OBS is an option a lot of people aren't aware of!

So the more you know. once imported, you'll see it immediately starts to play. Once the video is done playing, it vanishes. What is this magic? Well, it's not magic, it just finished playing.

If we want the video to loop, we can set it up that way by double clicking the media source, and checking the Loop box.

Now it will loop forever and ever if that's what you're going for. We're gonna keep that off for now though. You'll see now that everytime we toggle the source on and off, it appears right away and plays and then ends. If we don't want to keep this looping over and over again, we can setup a toggle for it with a hotkey.

Now if you don't have a stream deck, or something similar to a stream deck, don't worry. You can do this without any fancy software or equipment in the hot key section. Open up settings, down to hotkeys, and if you scroll down, eventually you'll find the Source we just added in. Tiktok PopUp.webM.

That's the name of the file we currently put in our scene. whatever you named the media source, is what will appear here. Click on the Restart box here, and I'm going to just set this to F8. You can make it more complex if you wanted to, but just keep it away from keys you'll find yourself pressing a bunch. If you are using a Streamdeck or Streamdeck alternative, you can setup those hotkeys to keys that aren't actually on your keyboard like F13, all the way up to F24 and a whole other keys that you wouldn't typically find which keeps these binds out of your way.

I'm gonna leave this as F8 and hit apply.

Now when I press F8, the pop up will pop up! If I want to restart it, press F8 again and it'll replay. Someone comes into chat and screams "HEy streamer! Whats your TikTok!

BOOM! Right on screen, and you can feel the follower count going up. Remember this face when you're TikTok famous. This man made this animation for you that aided in your success. For all you Streamlabs OBS users out there, you can see that the very same process will get you the same results.

Whether you want to loop it, or set it up with hotkeys for a toggled restart of the animation. And that's going to wrap it up for me! I hope you learned something today, got some ideas from this, and are looking forward to getting started with both our Ultimate Social Pop Up Tags and Media Looper, which work phenomenally together. You can download both these products directly from Nerd or Die dot com right now. If you have any trouble setting up, or have any questions, comments, or concerns with the Ultimate Social Pop Up Tags, we do have a discord server you're welcome to join, with a dedicated Help section.

It's also filled with other content creators like yourself so if you want to discuss streaming or video creation as a whole, or just surround yourself with peers, hop on in. Alternatively for assistance, you can also contact us directly through our website. I've been Keyon with Nerd or Die and I'll see you guys in the next one..

https://memberbaez56cds.krtra.com/t/oqcUAYGXROYf

Thanks for your visit!

https://youtu.be/a2R_KfQK8xQ

 

https://bit.ly/3zM7mQ8