Animated Overwatch Overlay Featured

Animated Overwatch Overlay for OBS, Twitch and More

Our animated Overwatch Overlay is now available in the Nerd or Die store.  In this post we’ll talk about how you can set it up in a couple of minutes, as well as customize it a bit to your liking.

Get the Overlay Here!

Before we get started, you can download a completely free, non-animated version – which is available as a pay what you want item.  You can watch the video below to learn how to set up the animated Overwatch overlay, or read on for full instructions.

Downloading the Animated Overwatch Overlay

Let’s talk about how to set up everything inside of OBS Studio.  This process will be very similar in XSplit as well.

After you checkout of the store you’ll be presented with multiple download links on the webpage. You’ll also have download links Emailed to the address that you entered.  You can use the product preview images on the website or open up the preview image that comes with the download to know what each file will looks like.  Download any of the files that you’d like to use, or you can of course download all of them.

Setting Up Your Animated Overwatch Overlay in OBS Studio

Adding in Your Webcam Overlay

Once your downloads are finished open up OBS Studio and add in a media source.  Click browse and find the file I’d like to add in – to start, I generally add in the webcam first.  In my example I’ll add the cam-nameplate-blank-animated.mov file.  Make sure it’s set to loop and hit okay.  Once added in you can re-size and re-position this source as needed.

Adding Animated Webcam Overlay

Next, we need to add in our webcam. To do this we can simply add in a video source with my webcam selected.  If you need any help with sources in OBS studio, check out my video on sources that will walk you through everything. Next, we need to move the webcam source under the media file, so that the webcam overlay is on top. Get a rough size and position of your camera, and then hold alt to crop out the areas that exceed the webcam overlay boundaries.  It might take a little bit of finesse, but you should be able to crop it so the edges of your webcam are hidden.

If you have any trouble getting this just right, you can always right click your webcam source and go to Transform then Edit Transform. From this menu you can click inside the appropriate box in the crop section and use the up or down arrow on your keyboard to make more precise adjustments.  You can even adjust the X and Y position in here as well.

Edit Transform

Creating Your Supporters Section

With the webcam set up, let’s go ahead move on the supporters section.  The pack comes with a variation of different types of supporters section files. There’s two types of files here: with labels and blank labels. To load in either kind, you’ll want to add in a new media source. The files with label are pretty straight forward, but let’s say that you want these labels to say something different. Perhaps you don’t want to include some of this information on your stream. You can always choose one of the blank versions, and add your own text labels inside of OBS Studio.

Label Example

Let’s add in the file panel-3-animated.mov as a media source, and and make sure that we set it to loop.  From here, you can size and position as needed.

Before you add any text sources – make sure you have the font Big Noodle Titling installed on your system.  You don’t have to use this font of course, but the animated Overwatch overlay was designed with this font in mind.

We need to give each section a label.  To do so, add in a new text source inside of OBS Studio.  Let’s put something like “Latest Tip” in the text field.  Select a dark colored text that we’ll use for the labels, since the text will be on a white background. Next, click select font, and then in the font selection box find the Big Noodle font. You can also set the type to regular or italic, whatever you prefer.  One quick thing that I want to mention is that it’s always better to select a bigger font size than you need.  This is because when we go to reposition and scale the text – it will become blurry if we scale up by clicking and dragging in the preview area.  In this instance I’ll select 48 for my font size.  I’ll hit okay and then position the text inside the label.

Latest Tip Text Source

Next, you’ll want to add another text source that will display names of your supporters.  To do this we want to make sure to use read from file inside the properties.  I’ll also go back into select font and choose the same font as before, but this time make sure I set the color to something lighter. Feel free to play around with different fonts and colors though, and you might also want to try out adding an outline or drop shadow to the text here as well.

Read From File

For this specific panel we will need to right align the text, so that everything looks good when the names change. To do this, right click the text source we added and go to Transform > Edit Transform.  Change the positional alignment to “Top Right”. We just need to position this to where we’d like it. Don’t forget that you can use the arrow keys for fine tuning with your positioning inside of OBS Studio.

If you prefer left aligned versions of these media files.  You can also right click the media source, and go to Transform > Flip Horizontal to mirror the image. This will of course only work with the blank supporter sections – where you add in your own labels.

Adding in the HUD File

Finally, let’s finish setting up our animated Overwatch overlay by adding in the HUD file.  It’s a very straight forward file that will be added as another media source.  We can easily position this file at the top or bottom of the scene. To flip vertically if needed, you can right click the source and go to Transform > Flip Vertical.  You can also use Reset Transform to return the file to its original size and orientation.

HUD File

This file is sort of like a blank canvas, where you can put whatever you’d like in it. For example you could add in messages about your social media or even use it as your supporter section.

Customizing These Files

Let’s take a quick moment and discuss how to customize these files a bit. One of the big advantages of using OBS Studio is that we can add a filter on any source.  If you don’t know about filters, check out my video that talks all about them.  Let’s add a color correction filter on the HUD source file.  For starters, we could do something like adding a high amount of contrast in the filter, to make the overlay appear a bit brighter against the game play.

We can even select a color and change the appearance to match your brand colors.  Let’s say you play a lot of Reaper and you want your animated Overwatch overlay to look like dark smoke – you could choose a dark purple, and play around with the contrast and brightness to get a cool effect out of these files, and make them unique to your stream if you’d like.

Dark Smoke Example

 

I hope you all like this design – myself and Chris worked pretty hard to perfect small details about it.  We also wanted to make sure we put it at as low of a price as possible. Purchasing this really helps support us in making new free resources in the future.

  • Ronald Thompson

    Do these even work in XSplit?

    • Derek

      Unfortunately not – I very much recommend moving to OBS Studio if you’re looking to use these files. https://twitter.com/xsplit/status/743167838979035136

      • Ronald Thompson

        Thanks for the heads up – No loss here, I picked up OBS and am finding OBS’s UX way more intuitive for the time being.anyways.

  • is there any way to convert this mov files to another format and keep the alpha channel?

  • Is there any way to get the cam overlays in a 4:3 ratio and 1:1? (Still going back and forth on which I prefer). I would be happy to buy multiple packages to make this happen. Thanks!