This guide will show you how to add a great looking animated social media popup to your stream, that displays your different social networks, in just a couple of minutes. This can be used for your Twitch, Hitbox, or YouTube Gaming streams in both Xsplit and OBS!

I created this social media popup for my own channel, but decided to figure out a way that I could share it with others. If you follow my instructions below, you should have no problem getting this set up. It currently supports Twitch, Twitter, Facebook, Instagram, Youtube, Tumblr, Patreon, Paypal, SnapChat, Xbox Live, Playstation Network and Steam… however I may be adding more in the future.

To begin, go to this link.  I don’t want to spend too much time on what exactly you’re seeing, but basically it’s the code to make this popup work, however I set it up to where you should be able to customize it with your information, and enable or disable any networks of your choice.

Just follow these instructions:

Customizing your settings

First, let’s enter in our network names or addresses. You will only need to change the ones that you will be using. It’s extremely important to leave the formatting of the code exactly how it is. So if you made a mistake, or things aren’t working properly, just refresh the page and start again. All we need to do is replace the word “change this” inbetween the quotations marks with our own networks names. As long as you only change the word inside the quotation marks, everything should work fine.

For example, I’m going to change “ChangeThis” for the Twitch Name to NerdOrDie, I’ll set my Twitter username to @NerdsPwn and I’ll update the Patreon section To NerdOrDie. Once you’ve updated all the networks to your own, it’s time to enable or disable the networks you’d like to use.  Remember only update the word inside the quotation marks, do not change anything else

By default, all networks are enabled. So, scroll down a bit more and we’ll see “this is where you enable or disable networks”. A 1 means it is enabled where a 0 will mean it will be disabled. So, for my example, I’m going to leave Twitter, Twitch, and Patreon at a 1 to keep them enabled. I’ll simply change the other networks to a 0, to disable them.

Finally, the last thing we can customize are the times. There are two times, one for the amount of time each social network displays and another that is delay inbetween cycles of all the networks that we have enabled. The first time we can update is by default it is set at 4. This means our each social network will stay on the screen for 4 seconds. I leave mine at the default value.

The next time represents the amount of time that the animation will pause after it cycles through your networks. This number is in seconds.

By default, it is set at 120 seconds or 2 minutes. If this is too short, you could change the number to something like 900 seconds which will make it display every 15 minutes, or if the pause it too long, drop it to 60 seconds, or 1 minute.

You can see the live results being updated below.

Adding the popup into OBS

Once everything is customized to our needs let’s go ahead and click Save, next click the Share button at the top and then click Export .zip. This will download a zip file with all the files we need. I’m going to open the zip file, and I’ll use WinRar to move the files onto my computer. I’m going to make a folder called SocialPopup on my desktop, you can put your folder wherever you’d like. Now, I’m going to simply drag and drop all the files from the zip folder into my SocialPopup folder.

Finally, let’s add this into OBS and Xsplit.

For OBS, you’ll need the CLR browser plugin installed. If you don’t have this installed, check out my video about setting this up.

What we need to do is get the file path of the file called Index in our SocialPopup folder. I should note there can be two files named index (most of the time there is only one), we only want the one that is an HTML document, we do not want the XML document.  The easiest way to get the file path is simply double click the index file. This should now open up in your browser, such as chrome, firefox, or internet explorer. If it doesn’t all you need to do is drag the index file into your browser like so. Now, we need to copy the address found in the address bar.

With OBS open, add a new CLR browser source. Paste the file path into the URL section, and finally let’s change the width to 470 and height to 60.

And that’s it for OBS. You can hit preview and see that it’s working. You can then use Edit Scene to drag it to wherever you’d like in your scene set up!

Adding the popup into XSplit

For Xsplit simply hit Add >Media File and then find the SocialPopup folder. Now, select the file named index, remember, there can sometimes be two files named index, we need to make sure to select the file that an HTML document, we do not need the XML document. Once the index html file is selected, hit open.

Sometimes my Xsplit file took a bit of time to load, but after a few seconds it should appear. We can now move the popup to where we would like it. Also, in the settings of this source, we can go into layout and change the width to 470 and the height to 60.

I know this is a bit longer of a tutorial than normal, but it’s something I really thought would be awesome for people to add to their streams. If you use this in your streams or videos please let me know in the comments below.

Update:

CodePen.IO changed the layout of their share and export buttons after this video tutorial was released.

You can now find the share and export buttons in the bottom right.

The post Animated Social Media Popup for Twitch, Hitbox, or YouTube Stream appeared first on Nerd or Die.

I’m excited to release another free resource for all of you Twitch streamers!  This time, I’m going to help you set up some great looking Twitch panels for your channel.  I want to give a huge thank you to MiiSTYMiiSTY, who gave permission to adapt a design we did for her, and let us release it for all to download, for free!

So, if you plan on using this, I recommend swinging by her channel and saying thank you.

Free to use Twitch Panels

So, stream panels are actually something that are just a little more complicated than meets the eye, but don’t worry, we got you covered with the set up.  The reason for this is because of the margin that is added to non-link panels, but the lack of margin to panels that are links.

Which file should I use for my panels?

If your panel includes a “image links to” link – use the design that ends in -link, this is because it has an extra 15 pixels at the bottom.

If your panel is does not use a link – use the design that does not have -link at the end, it does not have any extra pixels, so Twitch will add those in for you.

How do I use these panels?

Simply right click, and Save image As for the files you’d like to use.  Save the Twitch panels you’d like to use, go to your own Twitch Channel, scroll below your video area and flip the Edit Panels switch on.

Next, click Add Image and then choose the appropriate image for the panel you are making.  A cropping window will appear, but it should be automatically adjusted to the full size needed.  Remember, if you’re using a -link file, there will be extra space on the bottom, this is intended.   You will not need to add in a panel title, these images basically work as your title.  Now, you just need to fill out any additional information in the description box, and hit Submit.  If you want to add more, just click the plus box to add another panel and repeat this process.

What if I want more panels?

If you need different Twitch panels, please let me know in the comments on this site or on my YouTube video about setting this up.  You can also send me a Tweet.  If there are some popular requests, I will do my best to add them to this post, so make sure to check back later.

Remember, if you use this resource, don’t forget to let me know on Twitter, YouTube, or even share with your friends. I also included a “graphics” panel, that you could use to link back to my site if you’d like. Enjoy these Twitch Panels!

The post Twitch Panels for free, and Setup Guide appeared first on Nerd or Die.

The spooky times are upon us, and to kick off this month, I’d like to release a free overlay that I designed specifically for Halloween. I separated each piece of the overlay, so that you can pick and choose which graphics you’d like to use for your own overlay.

I actually made this design on my stream, with the help of viewer input.

Downloading the Files

Right click any file you would like to use, and then click “Save Image As…”  Save these to a folder somewhere on your computer, and then add into OBS or StreamPro.IO.

Adding into OBS and XSplit directly

If you want to add these into your stream directly into OBS, create a new Halloween Scene and add each image as an image source into OBS.  You can use edit scene to resposition and resize the images exactly as you’d like.

Adding into StreamPro.Io

You can also add these images into the app StreamPro.IO.  First, login to your account.  Next, create a new overlay named Twitch Halloween Overlay at 1920 x 1080 pixels.   Use their Insert Image feature and add in all the images you’d like to use.  you can quickly and easily organize the images however you’d like.  Once you’re finished grab your overlay URL and add it into OBS via the CLR browser plugin or into XSplit via the Webpage URL source.  The only disadvantage of using this method, at the moment, is that you won’t be able to resize or crop the images if you need to.  So, for full control, adding these images into OBS/XSplit is recommended for the moment.

Twitch Halloween Overlay Files

Subscribe Tombstone

Music Tombstone

Host/Eye Tombstone

Follower Tombstone

Donation  Tombstone

Facebook Like Tab

Twitter Tab

Instagram Tab

Webcam Background

Bottom/Top Bar

Recommended Setups

Here’s a couple of examples of how I used these images to set up overlays for myself.

Thanks to Free Goodies for Designers for social icons used in this project.

The post Twitch Halloween Overlay appeared first on Nerd or Die.

UPDATE: Submissions are now closed, thanks to everyone for entering!  See you next Twitchmas.

The first annual Nerd or Die Twitchmas will consist of 12 days of design! For each day I’ll choose 12 different streamers and create stream related graphics for free!  Use the form below to tell us what you or the streamer you’d like to submit wants for Christmas this year. Please remember that the graphics requested must be streaming related (panels, overlays, and maybe even some logos).

Winners will be notified via Email and must reply within 24 hours in order to receive their prize – this is due to the nature of the contest.  Winners may be chosen in different ways, including random selection, chat vote, and based upon current channel set up.  I will be looking for streamers that are on this years “nice” list, so it helps to have past broadcasts enabled and highlights so that I can get a feel of your channel.

Four winners will be chosen at random from the list submissions. The other eight will be chosen by the members of Nerd or Die.  All 12 designs are scheduled to be completed by December 30th.

Please complete the form below in order to be submitted, multiple entries will be deleted.

Submissions are now closed, thank you to all that entered!

The post The Twelve Days of Twitchmas appeared first on Nerd or Die.

To celebrate 1,000 followers on Twitch and 5,000 subscribers on YouTube I have adapted a design I did for the streamer K1ckstand as a free resource available here on NoD!  Read on to learn how to set up my design for Twitch Alert’s event list.

Towards the bottom of this post there there is a text box with CSS code.  First, right click inside the text box and hit Select All.  Next, right click again and hit Copy.

Adding Custom CSS into Twitch Alerts Events List

Now, log into your Twitch Alert’s Dashboard.  From here, click “Event List” – once the page is loaded, click the drop down in the themes section and change it to “Custom CSS”.  Right click inside the text box and hit Paste.  At this point, you’re almost ready to go!

You can now customize what your alerts look like.  Theme Color will control the background color of the box with icons in it.  In the Event List options you can choose to show followers, subscribers, and donations – check mark the boxes you would like to have displayed here.  The Max Events slider will control how many events are shown at one time,  I personally leave my slider at 5, but feel free to choose what works best for your stream!  Unfortunately the color of the box that has the names of users and type of events can not be changed unless you edit the CSS.  To do this, you’ll want to go into the custom CSS box and scroll to line 86.  Here, you can set the color to whatever CSS color you’d like.  If you don’t know much about CSS, I would recommend not changing this.  But, for example, if we wanted to use red, we simply change the #222 to #ff0000 – or the color of your choice.  Text Color controls the color of your text.  You can use the drop down menu for font to select a font you like.  If you’re not sure of the style of font you want, browse Google Fonts to see your options.

Text size, background color, animation, and animation speed will not be affected.

Choose if you’d like to flip the alignment along an X or Y axis.  This means it can be aligned to the right or left, or even animate in from the top or bottom.  Click Save Settings.

Bringing your Event List into OBS and XSplit

After you save, the “How to Use” section towards the top will have a URL that you will be able to add into OBS or XSplit.  Simply add the URL into a CLR browser source for OBS (just Browser source for OBS Studio) or a Browser Source for XSplit. Inside your streaming program make sure to set your width to 600px by 600px.

Custom Twitch Alerts CSS

@import url("https://fonts.googleapis.com/css?family=$font_family");

html,
.widget-EventList li > div {
  -webkit-transform: rotateX($rotate_x) rotateY($rotate_y);
          transform: rotateX($rotate_x) rotateY($rotate_y);
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  font-family: "$font_family";
  letter-spacing: 1px;
}

.widget-EventList {
  position: absolute;
  top: 0;
  left: 0;
  height: 600px;
  width: 600px;
}

.widget-EventList li {
  height: 0px;
  overflow: hidden;
  margin-bottom: 1px;
  -webkit-animation: grow .4s ease-in 1 forwards;
          animation: grow .4s ease-in 1 forwards;
  opacity: .1;
}

.widget-EventList li:nth-child(1) {
  opacity: 1;
}

.widget-EventList li:nth-child(2) {
  opacity: .75;
}

.widget-EventList li:nth-child(3) {
  opacity: .5;
}

.widget-EventList li:nth-child(4) {
  opacity: .25;
}

.widget-EventList li:nth-child(5) {
  opacity: .1;
}

.widget-EventList li:nth-child(6) {
  opacity: .1;
}

.widget-EventList li:nth-child(7) {
  opacity: .1;
}

.widget-EventList li:nth-child(8) {
  opacity: .1;
}

.widget-EventList li:nth-child(9) {
  opacity: .1;
}

.widget-EventList li:nth-child(10) {
  opacity: .1;
}

li div {
  opacity: 0;
  padding: 0 50px 0 10px;
  height: 50px;
  margin-left: 1px;
  float: left;
  line-height: 50px;
  position: relative;
  color: $text_color;
  -webkit-animation: info .5s ease-in 1 .6s forwards;
          animation: info .5s ease-in 1 .6s forwards;
  background: #222;
  /* info */
}

div.background {
  opacity: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  background-size: 42px 42px !important;
  background-position: 4px 3px !important;
  background: url("http://uploads.twitchalerts.com/000/070/135/721/star-l.png") no-repeat $theme_color;
  float: left;
  margin-left: 0;
  -webkit-animation: icon .5s ease-in 1 .4s forwards;
          animation: icon .5s ease-in 1 .4s forwards;
  /* icon */
}

.donation .background {
  background: url("http://uploads.twitchalerts.com/000/070/135/721/donation-l.png") no-repeat $theme_color;
}

.twitch-follow .background {
  background: url("http://uploads.twitchalerts.com/000/070/135/721/heart-l.png") no-repeat $theme_color;
}

.tag {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 12px;
  line-height: 12px;
  color: $text_color;
  font-family: "$font_family";
}

@-webkit-keyframes grow {
  from {
    height: 0px;
  }
  to {
    height: 50px;
  }
}

@keyframes grow {
  from {
    height: 0px;
  }
  to {
    height: 50px;
  }
}

@-webkit-keyframes icon {
  0% {
    left: -20px;
    opacity: 0;
  }
  40% {
    left: 0px;
    opacity: 1;
  }
  60% {
    left: 2px;
    opacity: 1;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}

@keyframes icon {
  0% {
    left: -20px;
    opacity: 0;
  }
  40% {
    left: 0px;
    opacity: 1;
  }
  60% {
    left: 2px;
    opacity: 1;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}

@-webkit-keyframes info {
  0% {
    left: 2px;
    opacity: 0;
    text-indent: 0px;
  }
  40% {
    left: 4px;
    opacity: 1;
    text-indent: 0;
  }
  60% {
    left: 0px;
    opacity: 1;
    text-indent: 10px;
  }
  100% {
    left: 0;
    opacity: 1;
    text-indent: 0px;
  }
}

@keyframes info {
  0% {
    left: 2px;
    opacity: 0;
    text-indent: 0px;
  }
  40% {
    left: 4px;
    opacity: 1;
    text-indent: 0;
  }
  60% {
    left: 0px;
    opacity: 1;
    text-indent: 10px;
  }
  100% {
    left: 0;
    opacity: 1;
    text-indent: 0px;
  }
}

The post Twitch Alerts Custom CSS appeared first on Nerd or Die.

Make customized Twitch Panels for free and without the assistance of Photoshop, GIMP, or any image editing software! This is my first customizable free resource and hopefully it’s one of many.  Choose your colors, icon, font size, text to include on the panel, and more!

A huge shoutout to @Tehkhop for helping me out on a few parts of this small app.

How to Customize Your Twitch Panels

Watch the video or read the instructions below.

1. Use the input controls to design your panel.
2. Right click the panel and select “Save Image As…”
3. That’s it!  You’re ready to upload them to Twitch!

Use the app inputs to make the panel look exactly the way you’d like it to!  I recommend that you start with the panel with the longest panel text.  So if you’re making two panels with the text “Subscribers”, “Donate”, and “About Me”, you should start with the “Subscribers” panel, as it takes up the most horizontal space.

You want to do this so that your font sizes and text alignment are all the same.  However, if you don’t want to have the same font sizes, that’s fine too!

Options Available

The follow options are currently available for this app:

• Left Side Color – This input is done through a color picker. Changing this color will change the background color of the box on the left side. This is the box that contains the icon. By default it is set at #23b85e – you can use the pallette, HSL Slider, or color input to select your color.
• Right Side Color – This input is done through a color picker. Changing this color will change the background color of the box on the right side. This is the box that contains your panel text.  By default it is set at #101220 – you can use the pallette, HSL Slider, or color input to select your color.
• Text Color – This input is done through a color picker. Changing this color will change the text color of your panel text. By default it is set at #ffffff – you can use the pallette, HSL Slider, or color input to select your color.
• Panel Text – This input field controls the text to be included on your panel.  The text will be updated as you type.
• Icon – The icon dropdown will change the image displayed on your stream panel.  Simply choose any of the pre-made icons and it will be updated on your panel automatically.
• Text Size – Use the text size slider to select how big you would like your panel text.
• Text Vertical Align – The text vertical align slider can be used to move your text along the Y-axis.  This option is useful if you’d like to move your text towards the top or bottom of the panel.  On some browsers the text will not be automatically aligned to the middle.
• Add Padding – For some Twitch panels you will like “padding” or empty space on the bottom of your panels to add space between your image and text that you may be putting underneath it.  Selecting Yes will show the checkerboard, which indicates that there will be empty space added underneath the panel. No will remove the padding and the image will include no empty space on the bottom.
• Font Family – Allows you to manually set a font of your choosing.  Simply type in the name of any font that you have installed on your local system.

Should I add padding?

The easiest way to make your panels look great, is to “Yes” for padding if the image will be a link.  If the image will not contain a link, then select “No” for padding.

An example of your images with and without padding, as links and non-links.

Please let me know if you have any problems with this app!

If you’re experiencing any issues, please let me know in the comments below.  It will be much easier for me to add icons to this system, versus my previous post.

Updates

• Added support for mobile scrolling on webkit devices.
• Added text box for font input.  This allows users to enter any font they have installed on their system with these panels.
• Added support to directly input color code into the color picker.

The post Customizable Twitch Panels appeared first on Nerd or Die.

The Twitch overlay maker is here!  You can use this app to create an overlay image that you can use with your Twitch stream.  Use the options, inputs, and text fields to make your overlay how you like it.  This is the second customizable resource from us, which will allow you to create overlays without the need for Photoshop, GIMP, or other image editing programs.

Support Nerd Or Die on Patreon

View Full Screen
Close

Some items may appear blurry because of auto scaling. This will not be shown in the exported images.

How to Customize Your Twitch Overlay

1. Use the controls to customize your overlay.
2. Right click the overlay area and select “Save Image As..”
3. You’re done!  You can use this overlay in OBS or upload to any cloud based system.

This app will perform best on on monitors with at least 1920×1080 resolution.

Options Available

The following options are currently available for this app:

• Choose a Theme – Allows users to choose a preset appearance of the overlay maker. Tweet a picture to @NerdsPwn of your creation to have a chance at your theme being added!
• Demo Background Image – Changes the background image used to preview your overlay.
• Section Width – Sets the size inbetween each section.  You can use this option to create a fewer amount of sections by making the value larger.
• Main Background Size – The height of the main background rectangle.
• Section Horizontal Position – Controls the horizontal position of entire sections, including dividers.
• Section Vertical Position – Controls the vertical position of entire sections, including dividers.
• Top Line Height – The height of the top line.  This by default is an orange line that goes across the top of the main background.
• Bottom Line Height – The height of the bottom line. This by default is a dark blue line that goes directly below the top line.
• Top Line Vertical Position – Controls the vertical position of the top line.
• Bottom Line Vertical Position – Controls the vertical position of the bottom line.
• Top Line Color – Changes the color of the top line.
• Bottom Line Color – Changes the color of the bottom line.
• Main Background Color – Changes the color of the main background.
• Divider Width – Controls the width of the dividers.  These are by default orange squares.
• Divider Height – Controls the height of the dividers.  These are by default orange squares.
• Divider Vertical Position – Sets the horizontal position of the dividers.  These are by default orange squares.
• Divider Vertical Position – Sets the vertical position of the dividers.  These are by default orange squares.
• Divider Color  One through Five – Changes the color of each divider.  Starting with one, on the left, extending to five, on the far right.
• Font (local) – Allows you to use any local font installed on your computer.  Simply type the name into the input field.  This section is case sensitive.
• Font (Google Web Font) – Choose any Google Web Font and type it into the input field.  Click “Load Web Font” to update your font.  The input field is case sensitive.  For example, type “Oswald” or “Roboto Condensed” (without the quotes) and click the load button.
• Font Size – Controls the size of the font used.
• Font Weight – Controls the weight (or thickness) of the font used.  Not all fonts have different font weights.
• Text Horizontal Offset – Controls the horizontal distance of the text from the dividers.  Use this option to offset the text left or right.
• Text Vertical Position – Controls the vertical distance of the text from the dividers.  Use this option to offset the text up or down.
• Text Container – Controls the size of the box that contains the text.  Use this option to force words to the next line by making it smaller.
• Text Alignment – Sets text to align to left, center, or right.
• Text Color – Changes the color of the font used.
• Shadow Color – Changes the color of the shadow behind the font.
• Text Box One through Five – Changes the text that will be used in each section, starts with one, on the left, and goes to five, on the far right.  You can change “Latest Follower” to “Recent Follower”, for example.  If you do not want anything in any of the sections, simply leave it blank.

Updates

• (03/24/16) – Added theme system, demo background image, and divider horizontal position.
• (03/24/16) – Added section horizontal position, section vertical position, text container width, and text alignment.

The post Customize Your Twitch Overlay appeared first on Nerd or Die.

In our OBS Studio tutorial series we talked about free resources that will be available – this post is where you can download any resources we used inside of OBS, for free!

Animated Backgrounds

Download Animated background with Blue and Particles

Download Animated Background with Dark Background and No Particles

Overlays

Create Your Own Overlay

Download Basic Overlay .zip file

How Do I Download?

All you need to do is click the links provided, and your download will start automatically!

I want to say a special thanks to Chris, the newest member of Nerd or Die for helping us create these videos.

The Core OBS Studio Tutorials

This guide is currently a work in progress, all posts are planned to be complete by April 15th, 2016

1. Introduction to our OBS Studio Tutorial Series
2. OBS Studio Vs OBS Classic
3. Installing and Setting Up Profiles In OBS Studio
4. Best OBS Studio Settings
5. In-depth look at OBS Studio Sources
6. Using OBS Studio Filters
7. Setting Up OBS Studio Scenes
8. What Notification Should You Use With Twitch?
9. Setting Up Your Twitch Account Before You Stream
10. Streaming Live on Twitch and How to Improve Your Stream

The post Free Downloads from Our OBS Studio Guide appeared first on Nerd or Die.

We’re happy to announce our monthly giveaway for your chance to win up to $100 in graphics designed by us!  You can win custom logos, overlays, stream notifications, Twitch panels, and much more!

Visit this page to learn how to enter.

The post Announcing Our Free Graphics Monthly Giveaway appeared first on Nerd or Die.

World of Warcraft: Legion is upon us, and I’d like to share a subtle animated background with everyone. To download, click the link below.

Download this video.

The post World of Warcraft: Legion – Animated Background appeared first on Nerd or Die.

To celebrate the release of one our favorite games to play, we create a free to use overlay for Overwatch! If you like this design, let us know by commenting below, we’re thinking about making this design into an animated version – which would be free as well. So subscribe to catch any updates on that.

How To Download

I also want to give a huge shout out to @Froyd – he was the one who designed this free resource, so a big thank you to him.

Let’s head over to the overlay product page to download all the files you’ll need, the direct link will be in the description. In our pay what you want store you’ll find this overlay. You can check out some previews of the images here if you’d like. To download, set the price you’d like to pay – I’m going to put it at $0.00 and hit add to cart.

Next, I’m going to click view cart, and then proceed to checkout. Your Email address is required here, so that you can be sent the download links – but you’ll also get direct access to the links on the website after you hit place order – on this page you can simply download the items you’d like to use. If you do decide to enter an amount greater than $1 there will be an extra step via PayPal to make your purchase complete, but please feel free to download this and use as you’d like!

If you’re not sure which items you like, you can of course download them all – or go back to the product page, and view the previews again. As I mentioned earlier, you’ll also receive an Email that contains the download links as well.

Installing in OBS Studio

Let’s move onto setting up this overlay in OBS Studio.

To set up your supporters section, you can simply add in an image source, and choose the layout you’d like by browsing to your newly downloaded images.

I’m going to add in panel-layout1 – here, you can simply drag it in to resize it a bit and then position it where you’d like.

From here, we can add in our donation labels as a text source. For the font – I’m going to select Big Noodle Tilting – I’ll also set the font style to Italic. I’ll make sure that the link to this font is in the description below as well. Make sure you set a font size appropriate for how big you made your image, and then you will need to link your donation labels via the read from file option. If you’re not sure how to do this part, I’ll link another video in the description below to help you out with this. We also want to right align the text for this, to do so, right click the text source we added and go to Transform > Edit Transform. Here, change the positional alignment to “Top Right”.

The pack also include blank supporter panels, named panel-2, 3 and 4. You can add this image in the same way, and then add text sources with a dark color font to make your own headings, if the template ones don’t fit your requirements. You can also right click the image, and go to Transform > Flip Horizontal to mirror the image, in case you wanted to use left aligned panels.

Don’t forget that you can use the arrow keys for fine tuning with your positioning inside of OBS.

Next, the HUD part of this overlay is a simple image – just add it in as an image source, and that’s that! You can position this at the top, or bottom of your stream. To flip it, right click, and go to Transform > flip vertical.

Since this is a blank HUD, you can easily add in more text sources to create a name plate, or you could even use this as your supporter section, instead of the panels we just set up, if you prefer. Get creative with how you use all these images together, with text sources, and create your own unique overlay.

You could even add a color correction filter to these images to match your brand color. There’s a ton of great options with OBS Studio that you can use to make this overlay unique to your channel. If you need more information about how to use filters, check out my other video on the subject… we cover everything you’d need to know.

Finally, we need we add in the webcam. First, let’s add in our own webcam. Which is a video capture device. I’m going to set my resolution/fps type to custom, and select 1280 x 720 for my resolution. Next, I’m going to add a filter to my webcam, so that I can round the corners so that everything fits properly. Right click the source and go to filters. Click the plus for an effect filter, and add an Image Mask/Blend – leave this on Alpha Mask and browse to find the webcam-mask file. Select it, then close out of the filters section. We’ll see that our webcam has been cropped and rounded.

Let’s next add in an image source, and select the webcam template we’d like to use. I’ll select the cam-twitter-youtube file and hit okay. Once it’s added in, we can easily resize both our webcam and this image source, and position it where we’d like. Again, most of these templates have been left blank, so that you can add in custom text sources with the information you’d like to include.

There’s even templates with no areas for text, if that’s what you’d prefer.

Well, that’s about all there is for the setup of this overlay design! I really hope you enjoy it, and I hope everyone has a great time playing overwatch. Please let me know in the comments below if you have any questions.

As I mentioned before, if you’re interested in an animated version of this, where we’ll add some cool glow effects and maybe even a bit more, let us know in the comments as well, or by sending us a tweet.

Preview of Overlay Images

The post A Free to Use Overwatch Overlay Megapack! appeared first on Nerd or Die.

Check out this easy to use YouTube thumbnail maker. It allows you to create great looking thumbnails in just a couple of minutes. While it’s designed to create images for YouTube, you could even use this as a Twitch Offline Image maker as well!

Launch Thumbnail Generator

I want to give a quick shout out to Orels1, a member of the Nerd or Die Discord. Orels created this app and allowed me to share it with everyone.

Using the YouTube Thumbnail Maker App

This post will serve as a walk through for the app, you can launch the full app by clicking here. First, we need to either drag and drop an image into the app, or you can even click inside the box and select an image like normal. Select an image you’d like to use for your background and we’ll see it be loaded in. I recommend using an image that is 1920 x 1080 pixels to start with, or one that is 16 by 9 in aspect ratio, such as 1280 x 720 pixels. If you use a different aspect ratio the thumbnail maker will automatically adjust and scale the image to fit the recommended size for YouTube thumbnails.

When we scroll down we’ll see a preview of image on the left and if you hold the F key on your keyboard, the thumbnail will scale up to fit the screen to give us a better idea of how everything is looking.

Background Image Options

The first option sets in the Youtube Thumbnail Maker will be for your background. The overlay opacity will control how much of the color we selected in the overlay color option shows through. Think of this like a color tint that you can apply to your background image. This can be useful when you want your text to stand out a bit more. You can use the color picker to change the color in multiple ways. You can even see the hex code or RGB values of the color here as well.

Next, is the vignette. Think of this as a gradient that comes in from the corners. Adjust the opacity and size of your vignette can produce some very nice looking effects. Remember, you can scroll back up to get a better look at how your thumbnail is turning out.

Frame Options

Let’s move onto the frame options for our Youtube Thumbnail Maker. Here, we can set a frame size, or thickness, for a frame. We can adjust the frame padding, or distance from edge of the border of our image, and we can select a color for our frame as well.

Title Options

Now we can add in some text options. Both the title options and subtitle options sections work in the same way. Let’s start by adding in some text for our title and adjusting the font size a bit as needed.

You’ll notice some alignment buttons on each side of where you can input your text. We can left, middle, or right align our text as needed. The other set of buttons allow us to adjust the text to be vertically aligned in the top, middle, and bottom of the image. If you want a bit more of precise control over the positioning of these text titles, you can also use the horizontal and vertical shift sliders to better position your thumbnails.

A future option we’ll consider adding in is font style selections. These will allow you to customize your thumbnails even further. Make sure to let us know any recommendations you’d like to see added by commenting below. Finally, there’s color selections for both the title and subtitle options.When you have the perfect title positions, sizes, and colors, we can add in a branding image.

Adding in a Branding Image

This works in the same way as adding in our background image, where we can simply drop an image into the app, or click inside the box and select our image. If you don’t want to use a branding image, then you can of course skip this step.

We can set what side of the image we’d like to align our branding image to. Let’s say we wan to align our image to the bottom right, we can simply click the right button, and then the bottom button. We can adjust the offsets of the horizontal and vertical positions as well. This will allow us to make sure our branding image is exactly where we’d like it.

We can adjust the opacity of this image, if we’d like to give it a watermark effect, as well as the overall scale of the image, to make it bigger or smaller. Let’s hold the F key to pay some respects and see how the image looks so far.

When you’re all done, simply hit save result. The image will be downloaded onto your computer.

The post Youtube Thumbnail Maker App appeared first on Nerd or Die.

We’re very excited to bring you our newest free resource – Overwatch Twitch Panels! With this free resource you can customize and save your own unique panels, using only a web browser. We designed this with our Animated Overwatch Overlay and custom notifications in mind, so if you’re using those, it should fit in nicely with your stream design.

How to Customize Your Overwatch Twitch Panels

1. You can watch the video at the top of this post or read the instructions below to design and customize your panels.
2. When finished, use the filename input and download button to save your panel to your computer.
3. Enjoy! You can now upload the saves file to your Twitch page.

Example Panel Designs

Options Available for the Overwatch Twitch Panels

• Icon color – Click inside the color selector box to choose the color of the icons. Palette colors are available on the left side. The right side has options for color slider boxes to get a more unique color. You can also use the input box below to enter in an exact color hex code if you’d like. For example, #FFFFFF will yield white.
• Text color – This works just like the icon color option, but controls the color of the text on the panel. It is recommended to choose a color that has contrast with the background. This will make it easier to read.
• Background color – A drop down option that allows you to select different background panel designs. More color options maybe be added in the future. Let us know what colors you’d like to see in the comments below.
• Badge color – A drop down option that allows you to choose a color for the area surrounding the icon. Again, there is only a few options here – so make sure to check back for any updates to this if the color you’d like to see isn’t added just yet.
• Panel text – A text input box allows you to set what the text says. When designing panels it is usually recommended to startwith the longest word, in order to keep text sizes uniform.
• Icon dropdown – I can simply select the Twitter, and it will swap in the Twitter icon. You’ll probably notice a list of icons – but please let me know if you think we left any out that are important to streamers. I made sure to put in a “blank” icon – for all of you that use Photoshop, Gimp, or similar, and want to take this design to the next level. We also included a Nerd or Die icon in the list – in case you’d like to credit our site or YouTube channel in anyway, we always appreciate that.
• Font Family – A text input box that allows you to set the font to use for your panel text. By default Oswald is entered here. Any font installed on your system will work in the input box. Please note that it spaces are generally not required and maybe cause your font to not load properly. For example, if you install the font Big Noodle Titling on your system, the correct input will be BigNoodleTitling – you may need to restart your browser with any new fonts used.
• Text Size – Range slider input that increases or decreases your text size.
• Text Horizontal Align – Range slider input that changes the horizontal positioning, or left and right positioning of the text. By default it’s set to 130px.  With italic text you may want to move the input down just a bit.
• Text Vertical Align – Range slider input for the vertical, or up and down, positioning of the text.
• Filename and Download Button – A text input and button. You can save the file by entering a filename in this last text box, and then hitting download. For example, if you enter twitter into the text input box and hit download, we’ll have a file named twitter.png saved on our computer. If you’re experiencing any issues with the download button, you can also right click the panel, and click “save image as…” but of course using the button with the filename is recommended.

Have any recommendations or issues with the app? Let us know!

We’d love to improve this app even further so feel free to comment on this post to let us know what you think is missing! Please leave any troubleshooting issues in the comments below, as others may have similar problems. Let us know what icons and color combinations are missing… or perhaps we might even do new badge styles as well!

The post Free Overwatch Twitch Panels appeared first on Nerd or Die.

Our next free overlay is now live! This time, it’s free Call of Duty: Infinite Warfare overlay – which was designed to work for other first person shooters as well! In this post, we’ll also take a look at the animated version – which is available in the Nerd or Die shop.

Download our Free Call of Duty: Infinite Warfare Overlay

If you’ve followed this site for a while, you probably know how to get a hold of all our free resources, but if not, you can head over to the shop to find our free downloads. The two newest items are the Call of Duty: Infinite Warfare overlays. While, they’re themed for Call of Duty, I still think they could work for a wide variety of streamers, as they have a nice clean look to them.

The non-animated version is available as a pay what you want item, and as always with these items, please feel free to enter 0 for the amount and use as you’d like. The animated version will be available for a low cost, and you can also use the promo code youtube15 to save on the purchase.

Anyways, once you decide on the version you’d like, you’ll go through a simple checkout process and then be presented with a download page. You’ll also receive an Email within 5-10 minutes that you can save in case you need to re-download in the future.

Click the links of the files you’d like to download, open up OBS Studio and let’s set up our scenes.

Setting Up the free Call of Duty: Infinite Warfare Overlay in OBS Studio

First, make a new scene for just the overlay, which I’ll name appropriately. For the images it’s extremely simple to add in parts of the overlay. Simply right click and add an image source. Select the file you’d like to add in, and that’s pretty much it! If you need to, you can use the product page to view what each file looks like.

The Supporter Panels

The panels were designed to give you freedom on where you’d like to place everything. They can be stacked horizontally or vertically as needed. I recommend putting them some place where they won’t cover up any in-game action if possible. From here, you can add text sources like normal, that link to your recent tipper, follow, or subscriber files.

Setting Up the animated Call of Duty: Infinite Warfare Overlay

The animated Call of Duty: Infinite Warfare overlay files work in a very similar fashion. Let’s go ahead and right click and add a media file. This time I’m going to pick a webcam animated file, and then make sure loop is selected. Once added in, you can move it around as needed. Like almost all sources in OBS, you can resize by clicking and dragging the red box. If you make any mistakes in scaling the source, you can simply right click and go to Transform > Reset Transform. Don’t forget, if you need more precise options, you can also right click and go to Transform > Edit transform. This will allow you to enter in exact numbers for scaling, which can make it easier to get different sources sized the same, or positioned appropriately.

This resource also comes with blank panels – which can be used for whatever you’d like. Perhaps you don’t like the wording used on the current panels, you could simply add in a text source over the panel, and put exactly what you’d like. I’ve included a link to a font I recommend installing, if you’d like to get a similar look.

Once you’re done customizing the layout of this scene, you can either add the gameplay source in behind the overlay, or you can add this overlay scene into any other scene. This is quite useful for those that have complicated scene set ups and want to keep everything separated.

Customizing the Look of Your animated or free CoD Overlay

If you’d like to alter the colors of the overlay a bit, you can use a filter on each source by right clicking it and selecting filter. Let’s add a color filter, and I’ll play around with the options a bit to get something that I feel looks good. If all this seems a bit complicated to you, then I highly recommend checking out our OBS Studio series to get yourself up to speed with the software.

Anyways, I really hope you all enjoy this new overlay – please let me know what you think about it in the comments below. If you do decide to purchase the animated version, you can use the code youtube15 for an additional 15% off the overlay product. I’ll also be giving some download codes out from time to time on twitter, so make sure to follow us there.

The post Call of Duty: Infinite Warfare Free Overlay appeared first on Nerd or Die.

The free scene maker is now available! It’s been awhile since we’ve released a free resource, but I hope this new free resource makes it worth the wait. With our scene maker, you can create and customize your own intro, be right back (AFK), and outro scenes quickly, easily, and of course for free. You can even make scenes that feature your game play in the background while you wait for in-game queues.

Get the Scene Maker!

What is the Scene Maker?

There’s a lot of ways that this product can be used, so let’s take a quick look at what I’m talking about. The default scene design is pictured below. You’ll be able to change out the background video or use an image, update what all the text says, change the fonts, change the colors, and much more. All of this can be done with a couple of easy steps that I’ll explain in this post.

In the top left we have social media popups that will animate and show off your social networks. In the bottom left, you’ll see labels that will display your recent follower, biggest tipper, latest sub and more. The bottom right has a countdown that can be customized to last longer, and display different messages. There’s also a message that displays when the countdown ends! In the middle we have a heading and sub heading that you can change out, and even a logo or brand image which you can add in as well. We’ll use the settings generator to customize all your settings – so it will be quick, easy, and you’ll even be able to make multiple scenes if you’d like!

Getting Started

To start, you’ll find this scene maker in our newly laid out Free Resources section. Here, you’ll find all items in our shop that you can use free of charge, such as our panel and overlay makers. Let’s go ahead and click on the scene maker – the direct link is here. Add the item to your cart and go through the checkout process. After you have the files downloaded to your computer, let’s go ahead and unzip them. As you will see, there is a main folder called “Stream Resources” with two other folders inside of it.

Once everything is extracted we can move on to the settings generator.

Using the Settings Generator

First, let’s start with the settings generator. This is where the real magic happens. In the ‘SceneMaker” folder that we just extracted there’s a link to open up the Settings Generator, go ahead and click that. At the top, you’ll see all the categories of options that you’ll be able to change – you can click these to jump around to different options sets. You’ll also see two buttons on the right. The first will allow you to toggle the size of the preview window to make it larger. You can also click directly on the preview area to toggle its size as well. The second button is to download your settings file, which we will later place in the “Settings” folder. More on that later. You’ll also see a live preview towards the top right. This will give you an idea of what your scene will look like.

Please note that it will contain the default background videos and images – as well as default user names pulled into the labels. We will go over switching these out after we go through the settings that we can change here.

Also, the live preview will cycle through only 1 social network and then the schedule, this is so you can get an idea of what everything will look like quicker.

Options Available

Main Options

Please note that a few items won’t update via live preview. Animations may be interrupted when toggling the display of certain sections.

• Background Type – Do you want to use an image or video for you background?
• Background Overlay Opacity – This will allow you to decide how much of the background color is shown. Slide this up to have a more solid color or down for a more see-through.
• Background Blur – Adds blur to your image or video, if you’d like.
• Background Scale – Scales up the size of your background image or video. I recommend scaling up a bit if you add blur to the background.
• Display Branding – Decide if you want to show a logo in the middle or not.
• Logo Opacity – Changes how solid or see-through the branding image is.
• Logo scale – Changes the size of your logo.
• Frame width – Changes how thick the frame around the scene is.
• Scene Title – The main title of the scene.
• Tagline – The smaller text underneath the title.

Colors

Here, you can use color pickers to decide on what color you’d like to use in the scene maker. Simply click “Change Color” to open these pickers.  The box on the right will display the current color chosen. We’ll see that we can drag around to get what we want, and even adjust the opacity of each item.

• Background Color – Color on top of the background image. If you’d like a solid background color, you can move this opacity slider all the way up to 100%. Alternatively you can move it down to 0% to have no color on top at all.
• Accent Color – Used throughout the design. Default is yellow on borders on the labels, for the social media icons and borders, and schedule border as well.
• Frame Color – The color of the frame.
• Primary and Sub Text color – Changes the various text colors.
• Content Backgrounds – Colors behind our label, social media, and schedule areas. Again, you can adjust the level of opacity if you’d like.

Labels

There are a maximum of four labels that you can show at a time with the scene maker. Each one will allow you to change the heading message. For example, you can change “New Follower” to “Latest Follower” or whatever message you’d like it to say.

• Display Labels – Choose if you want this section displayed or not.
• Label Headings – The name of each label section. Such as “Recent Follower”, “Top Tip”, “Latest Sub”.
• Label Paths – Name of the text file to import into the scene. Match the text file names from the Muxy Ticker or StreamLabs Stream Label program.

You can hide any label by simply leave the header area for each one blank. I highly recommend only using the text files that provide a single user name, the ones that you would normally have scroll will not work well here.

Schedule

An animated schedule display is built into the scene system. If you don’t have a set schedule, you can use Display Schedule to hide this area completely.

Here, you’ll be able to set your times for each day of the week. Let’s say you don’t stream on Sundays and Wednesdays, just change the text to say “Off” or something like that. Simply change the text box for each day, to have it be displayed in your scene.

Scaling

This will let you increase or decrease the sizes of each section. Simply move the slider for each respective section you want to change. You may need to wait for the schedule or social media areas to show, to see the changes you’re making.

Fonts

This section allows you to set various fonts to be used, as well adjust their most font sizes and vertical positions.

• Primary Font – The main font in the scene.
• Sub Font – The secondary font in the scene.
• Size Sliders – Changes the size of the font for each respective section.
• Vertical Offset Sliders – Changes the vertical position of each respective section.

To use the font pickers, click “Search” and you’ll be presented with all the fonts that Google fonts offers – which you can scroll through. To narrow things down you can use the category buttons to select types of fonts you’d like to use.

If you’re a bit overwhelmed by the amount of fonts found in the scene maker, you can check out https://fonts.google.com/ to see full directory of fonts available.  It contains featured and the most popular fonts – making it a bit easier to navigate. Then just come back to the settings generator and search for the name of the font you’d like to use. I’ll go ahead and search for Oswald, which is a font I’ve used before, select it, and then click close.

Countdown

The countdown is built into the scene maker and is perfect for intro scenes. Let your audience come in before you do your official greeting!

• Display Countdown – Show or hide the countdown. Some scenes may not require a countdown.
• Countdown Time – Time, in minutes, of the countdown to last.
• Message – Message displayed while the countdown is active.
• Over Message – Message displayed when the countdown ends.

Social Media

Finally, we have the social media section. This section has built in animations, and will help get your viewers connected with you on Twitter, Facebook, Instagram, and YouTube!

• Display Social – Show or hide these animations.
• Network Name – The Name of your media for each respective network.
• Network Headers – The heading you’d like to show above each respective network. For example “Follow me on Twitter”.

You can hide specific networks by making the text boxes blank for any social media popups you don’t want to show.

Adding in Your Settings File

Click the download button to save our settings. If you’d like to make additional settings files for future scenes, you can do so by editing again, and clicking download when finished.

Let’s finish up with this scene. Now that your settings file is downloaded. You’ll need to place it within the settings folder. This file should be the only file located here. It’s full file name is settings.js – make sure the file is called this when places in here. Sometimes, if you download multiple files, your computer will add a number at the end of the file name, such as settings (1). To use the settings file in our scenes, we’d need to remove the (1), and ensure the file is just called settings.

Adding Your Scene Into OBS or Other Streaming Software

Add your scene into OBS, or whatever streaming program you use, so that we can see everything is working so far. For OBS, let’s add in a Browser Source. We’ll want to add a Local File, then hit browser to select the scene.html file that we’ll find in the “SceneMaker” folder.

Set the Width to 1920 and Height to 1080. “Shutdown source when not visible” can be checked if you’d like. Make sure that “Refresh browser when scene becomes active” is checked. Once you hit okay, you should see your design so far.

Linking the Labels Text Files

To properly link our StreamLabs Stream Label, Muxy Ticker text files, or any other program you may use to generate text files on your computer, we need to link things up properly.  The “Text Files” folder needs to be stored in your main folder, and will be used to pull your latest followers, tippers, and subs directly into the scene. So to be clear, my “Stream Resources” folder has the “TextFiles” and “SceneMaker” folder in it currently. This will allow us to use the text files folder for multiple scenes that we may create later.

The following step is optional, and only needed if you want your scene to display your stream supporters automatically – so if you don’t plan on having your latest followers or top tipper shown in your scene, or perhaps you don’t want to move your text files from where they are currently saved at, then you can skip ahead. All we need to do is set Stream Lab’s Stream Labels or Muxy’s ticker to save the files in the “Text Files” folder.

Let’s quickly go over the steps for each program. Remember, if you use these programs already, you’ll have to go into your streaming program and update the file paths to your proper text files, or they will not be displayed – as they will be moved and no longer updated.

With StreamLabs Stream Labels

For Stream Labels, you will open the program, login and click “change output directory”. Then, simply select the “TextFiles” folder. All your files will now be moved to this folder. You can go back into the settings generator and update the file path names if needed.

Remember, if you update your settings.js file, that there is only one file in the settings folder with the proper name.

With the Muxy Ticker

With the Muxy Ticker, simply log in, click the settings tab, and then click the file directory. Navigate to where your “TextFiles” folder is saved and select that folder and hit “select folder”.

Adding cheers via Muxy Ticker is possible. You will need to add /cheer/TheNameOfTheFile . So, the most recent cheer using Muxy Ticker, will look like /cheer/most_recent_cheerer in the settings generator path.

Again if you update your settings.js file, that there is only one file in the settings folder with the proper name.

Replacing the Background Image or Video and Logo/Branding Image

Background Image or Video

Go into the “Scene” folder and now into the “Backgrounds” folder. Here, you’ll need to put the image OR video that you want to use. You could also use a solid background color if you’d like – as shown in the changing color portion. In this folder I have included a default image called bg.jpg and video called bg.mp4. If you do not want to use this image or video, simply delete them. Now, you need to place in your own background image or video.

I highly recommend using one that is sized at 1920 pixels wide and 1080 pixels tall, otherwise you might see some distortion or skewing of the image/video when put into the scene maker. All that you need to do is make sure your image or video has the name of “bg”, and it will work. Images will accept .pngs and .jpgs, videos will work with .mp4s and .oggs. Let’s say you want to use a jpg, make sure it’s called bg.jpg and it’s the only file in this folder. For a video that’s a .mp4 it would be named bg.mp4 and put in this folder.

Alternatively, you could delete all images and videos in the background folder, and then simply add your background image or video playlist into OBS directly. However, you wouldn’t get the background blur effect without adding a filter to it in OBS Studio.

For example, if you delete the background images completely, you could put your gameplay capture behind this scene in OBS, and create a cool overlay while you wait for a queue to pop.

Logo/Branding Image

For the logo or branding image, the same type of thought process applied. Again, if you don’t want to add an image here, you don’t have to. Let’s go to the “Logo” folder, and drop in the logo you’d like to use – this one will need to be a .png file. There’s plenty of online image converters, such as TinyPng, and I do recommend higher res images here. Somewhere around the 1000 pixel by 1000 pixel mark.

Creating Multiple/Different Scenes

With that, you can refresh one final time and see your scene in all its glory! Take a quick moment to double check that everything looks great. Let’s talk about how easy it will be to make multiple scenes now.

To do so, all that you’d need to do is go into the main folder, copy and paste the “SceneMaker” folder. You can rename this folder anything you’d like. For example, I’ll just call this one “BRB”. Now, simply update your settings as needed – perhaps you’d like the title and subtitle to say a different message. Maybe you don’t want the countdown shown here.

Download, and then take the new settings file and place it in your new scene’s settings folder. Just make sure you override the old file if it’s in there. Make sure the file is named “settings” and not something like settings (1) or (2).

Finishing Up

This is quite a long post, but again, this is something we put a lot of work into. We want you to have as many options as possible so that you could customize this to your needs. If you enjoy this type of product let me know by sharing or commenting.

If this kind of thing is popular, I will be happy to make more like it, and even better ones in the future.

The post Free Scene Maker – Make Your Own Intro, Brb, and Outro Scenes appeared first on Nerd or Die.

An update version of our popular Social Media Popup is now available, with our new social media animation! This time we’ve included new features that didn’t make the first version – and that make it easier to customize and use in your stream. This include the ability to add your own custom icons, change the color of the popup, assign different pause times, as well as choose different Google Webfonts.

Get the Popup Here!

Downloading and Installing the Social Media Animation

Head over to the Nerd or Die shop to grab this item, and go through the checkout process for this item. This is a pay what you want item, so simply enter in 0 to get it for free, or if you’d like to support our site directly, you can do so by entering whatever you feel this product is worth to you.

Once you’ve downloaded the file, you’ll need to extract the folder from the zip file. You can use a program like 7zip or WinRar to to this. I’ll go ahead and put this on my desktop for now.

Inside of this folder you’ll find some files, let’s start with the Read Me file. Clicking this will launch the “Add Your Networks” page . This page allows us to add which social networks networks to add to our social media popup animation, as well as what text to put by those networks. You can follow the instructions listed on the page, but we’ll also go through them here.

Adding Networks to the Social Media Animation

To add any of the preset network icons, simply click on them. While doing this, you’ll see them added in the “Icon Sheet Preview” section, you’ll also see the names for each that you clicked under “Add Custom Icons” Section. Notice the “remove” button here, this is in case you’d like to remove any icons.

Once you’re done adding any preset icons, you can upload your own icons by click the “Upload Images” button. You can also drag and drop your image into this area. I recommend using .PNG images here, especially if you’re going to add a solid icon color to your social media animation popup… more on that later. Once you’ve added all the networks that you’d like, it’s now time to assign what text you want by each network. To do so click in the box that says “Enter Text Here” and type in what you want. So, for my Twitch icon, I’ll type in NerdOrDie, since that’s the name of my channel. I’ll fill in the information for the rest of the icons as well.

Downloading the Add Your Network Files

When done, I just need to hit the download button. When you hit download here, I want you to know that you’ll probably receive two warning messages. First, will be that you’re attempting to download multiple files. Click okay, or allow, as you need both files to make this product work properly. The second warning you might receive is about a harmful file. This file is a simple JS file that stores the names you just entered above. Hit “Keep” or allow for this file.

Once both files are downloaded, we need to put them into the “settings-and-images” folder, found in the file we recently extracted.

Customizing the Appearance and Timings of the Social Media Animation

With that done, we can move onto the next part of the setup. Click the “Customize Appearance and Timings” link at the top of the “Add Your Networks” page. This page allows us to change a few things – you’ll notice a preview of the social media animation popup on the right as well, that will help you choose your colors in a bit.

The options here are as follows:

• Pause Time – The amount of time, in seconds, to pause between each network
• In between Pause Time – The amount of time, in seconds, to restart the animations
• Icon Box Color -The color of the box that holds your network icons
• Text Box Color – The color of the box that holds the text
• Icon Color – The color of your icons. Please note that you can drop the opacity all the way down to show the full color of your icons. Otherwise, your icons will be filled in with the color you choose here
• Font Color – The color of text
• Primary Font – The primary font to be used. You must select a font here. The default shown in example is Montserrat
• Font Weight – The weight (thickness) of your font. Not all fonts have variations for this. It is recommended to choose your font before you choose thickness. Default is 400
• Font Size – The font size
• Text Y Offset – Offset the Y-position of the text

Changing the Fill Color of Your Icons

An important note about this app, involves the color options. First, you should know that each color option includes an opacity slider. Allowing you to make your boxes, icons, or even font see-thru.  This also plays a big role on the icons. With the slider all the way up, your icons will be filled in with a solid color. This is why I mentioned it’s important to use .PNGs with transparency. Otherwise, you will just have a box that’s filled in for your icon.  However, if you’d like to show your icons in full, simply bring the opacity slider all the way down. With the slider all the way down, the icons will show up exactly as they were in the “Add Your Networks” section. So, the Twitch icon would be purple, the Reddit icon would show the full alien face, and your custom icons will display exactly as you had them.

A Quick Note About Fonts

Once you’re done tweaking your colors, the final section is fonts. Here, you can use this search button to find any font that Google Fonts has. One of my favorite ones is simply called “Play”. So,let’s use that as  an example. Search for the “Play” font and pick it form the list. The next option is Font Weight, which is the thickness or boldness of your font. You should know that not all fonts include multiple weights. So, when in doubt, leave this on the default of 400. For the font “Play”, it has a bold version at 600 weight, which we can use the slider to choose.

Downloading the Add Your Network Files

Click download, and again, if you have a warning here you will want to click allow to download this JavaScript file. Let’s place our newly downloaded “settings.js” file in the “settings-and-images” folder.

With that, we’re done with setting this social media animation popup up! I want to quickly note that it’s important to have these 3 files in your “settings-and-images” folder. Also, make sure that they are named properly.

Sometimes if you download multiple files from the site, you’ll have a number added at the end of your file such as 1 or 2 in parenthesis. This is to prevent duplicate files. To prevent this issue, make sure that you delete any of your previous files in your download folder, before download these files. Double check that your files are named properly, before moving on to this last part.

Adding the Social Media Animation Into OBS Studio

Let’s go ahead and add the social media animation popup into OBS Studio. I’ll create a new browser source, and choose local file. Next, I’ll find the folder I downloaded from the Nerd or Die shop, and in that I’ll see some files I can pick. The “_right-social-media-popup-v2” file is what I’m going to choose for this example. The difference between the left and right version of these files, is that one is left aligned, and the other is right aligned. So, choose what you’d like for your stream.

I’ll enter 1000 for the width and 300 for the height. If your network names are really long, you may need to increase the width.

After I hit okay, I should be able to watch my new social media animation popup in action! We’ll see it cycle through all my networks, before pausing for the time I set it to, and then restarting. I really hope you all enjoy this free resource, it’s one I wanted to make for a long time.

The post Social Media Animation – Free Resource appeared first on Nerd or Die.

Clearview Lite

This overlay was create to give off a clean, professional, and unique look. You can easily adapt this design to most games and applications, making it perfect for those of you that do IRL streams or variety gaming. It works with all major streaming software.

When downloading, make sure to select the “lite version” option.

Download Clearview Lite

Extras included with Clearview Lite

A lot of the packs listed in this post will have more than just free overlays included. In the case of Clearview you’ll also get access to icon designs, Twitch panels, and stinger transitions. This pack is at the top of our list for a reason!

---

Stone Fire Nerfed

Listen, we love “clean and modern” as much as the next person, but sometimes you have to change it up. Stone Fire was created for those that want more theme and texture in their overlay designs. This free Twitch overlay includes webcam frames, supporter sections, and Twitch panels.

Download Stone Fire Nerfed

Stone Fire was designed for League of Legends and DotA 2 streamers

Components of the overlay pack are specifically made for LoL and DotA 2  streamers. We did our best to design it in a way to let you show as much of the action as possible, while still showing the information on your stream that you need to.

---

Free Overwatch Overlay

This is one of our first free Twitch overlays that we designed and remains one of our favorites. This pack includes multiple webcam frames, support panel layouts, and a HUD that you can align to the bottom of your stream. The only difference between this pack and the full version, is that it is non-animated.

Download the Overwatch overlay

Did you know we have a free to use Overwatch panel maker?

Looking for Twitch panels to compliment your new overlay? Look no further, our free to use Overwatch Twitch panel maker let’s you customize and download Twitch panels to fit the Overwatch design aesthetic.

---

Free Call of Duty Overlay

While this overlay was originally designed for Call of Duty: Infinite Warfare, we think it still holds up today. It features multiple webcam layouts and a supporter section design that lets you decide if you’d like them to be stacked vertically or horizontally. A great option for new streamers.

Download this free overlay

How to get dynamic labels in your stream, a helpful tip to new streamers

One of our most frequently asked question is: how do I get the usernames to update automatically on my overlay? To add these dynamic “labels” to your scenes, you’ll first need to add text sources. We recommend entering in some demo text so that you can position and size your text properly. Please note that’s best to change the font size inside of the text source properties, and not drag to scale (this can cause blurry text).

Next, you’ll need to download and run a program that updates text files dynamically as you get new users, tips, subscribers, etc. A good place to start is the program Stream Labels for StreamLabs. When you install this program, it will create various text files on your computer that you can then sync inside of OBS Studio (or your streaming software).

In the text source properties enable “read from file”. Here, you will “browse” to find a file that you want read and synced inside of your streaming software. Choose the appropriate file, and then it will be connected and updated automatically.

---

No Man’s Sky Free Overlay

One of the biggest video game disappointments turned out to inspire one of our favorite overlays. While this is a “No Man’s Sky” overlay, don’t let the name fool you, this overlay was designed with a sci-fi feel, and a clean look that can work on any stream design. With the announcement of No Man’s Sky Next, this overlay should keep your stream looking great for years to come!

Download this overlay

---

Create your own free Twitch overlay

We get a lot of questions about looping popups, so let me explain the easiest way I’ve found to make these happen. First, design something cool in After Effects or similar. Second, export that as a WebM. Finally, create a local HTML page that plays that WebM on loop with a bit of delay. If you’re reading this post, it’s likely you’re interested in creating stream designs yourself. If you can pull off the steps for creating a social media popup, then you can make everything else listed in this blog post. In my opinion it’d be a solid place to start and to challenge yourself a bit.

The post Free Twitch Overlays, Alerts, and Widgets appeared first on Nerd or Die.

The post Facebook Gaming Alerts for Stars, Shares, Supporters and Likes Are Now Available! appeared first on Nerd or Die.

The Software

When this product first launched, the software wasn’t like it is today… which is a good thing. Elgato has been consistently improving and adding to the functionality of the Stream Deck. The software has always been easy to set up and definitely gives power users the ability to get creative. On top of that, the “More Actions…” button allows users to add integrations for software like VoiceMeeter and NVIDIA’s Shadow Play.

Folders, Profiles, Auto Switch

If you’re like me, you’ll want a ton of different commands and an easy way to swap to them. You can organize your commands into folders which allow you to quickly navigate between group commands, but you can even take it one step further. With Profiles, you can great complete groups of commands and folders, and use the auto switch feature to change between profiles when certain applications are open. Pretty useful if you use a suite of tools or just alt-tabbing around.

The post Free Stream Deck Icon Pack appeared first on Nerd or Die.

How do you put an overlay into Twitch, YouTube, Facebook, or Mixer?

Using a Twitch overlay template can be extremely easy. The first thing you need to realize is that you’re not putting one into Twitch, or other streamer services, but you’ll be adding them into your broadcast software. Broadcast software can be programs like OBS Studio, Streamlabs OBS, or XSplit. These programs basically give you a blank canvas that you add your content into. Your content can be anything from a webcam feed, video file, text, and even web pages. The best answer to this question is to learn your software, and add from there.

The process generally is as follows:

1. Download a free or premium overlay from our store
2. Unzip the downloaded files
3. In your broadcast software add the type of source you’d like to use
   1. For images, add an image source
   2. For video files, add a media source
4. Position and resize the sources as you’d like
5. That’s it!

---

What size should a Twitch Overlay be?

The simple answer is that your Twitch overlays should be designed for 1920×1080. This doesn’t mean that your file size will be this resolution, but you should consider this size when thinking about your overlay size. Even if you’re streaming at a lower resolution, you will want to design and use overlays for this size. If your internet improves or you get a new PC, you may want to bump up from the lower resolution to 1080p, and then you’ll be ready to go without redesigning your entire overlay.

A few tips on how to choose the size of your Twitch overlay elements

Start Simple

Start with a simple layout in a file that is 1920×1080. This means add simple shapes like rectangles and circles to this canvas, so that you can get an idea of where things will be and how much space they will take up.

Think about the value of your stream real estate

Above all, consider the value of your stream’s real estate. You are limited with your horizontal and vertical space, so you have to decide what you value the most. Every stream is different, so if you value a bigger webcam and chat box, then make sure they take up the appropriate amount of space.

Think ahead

Future proof your Twitch overlay template and designs. While we recommend 1080p as a good base point to design and plan for, higher resolution streaming is right around the corner.

Think realistically

Consider file size. This is where it gets a little tricky. You might think it’s best to make a 4k design, based on our above tip, but you also have to remember that you might be working with limited resources. Large videos can take up tons of space and even be taxing on your broadcasting software.

---

How Do I Animate a Twitch Overlay?

This is a question we get asked a lot. The best solution here is to learn some motion graphics software. While you can technically animate Twitch overlays with code such as HTML, CSS, and JS, it ultimately will take a lot more time than using traditional animation software. Since you’re likely making an overlay for yourself or a client, rendering a video or image will be the way to go.

What software do we use at Nerd or Die?

At Nerd or Die we use the Adobe Creative Suite. We like to start with ideas in Photoshop and Illustrator, and then move them into After Effects for animation. Unfortunately, there’s no real short cuts here. Your best place to start, if you’re completely new to this, would be graphic and motion design tutorials for the software you’d like to use.

Are there free alternatives?

Speaking of, there are free alternatives to the Adobe programs, such as GIMP, that should offer you the basic capabilities you’d need to design the overlay. While there are programs that are free for motion graphics, there aren’t any that we’d currently recommend.

---

Where Can I Find Free Twitch Overlay Templates?

Good news, we have you covered! We have and will continue to always be releasing new free Twitch overlays templates that you can download here. We started with free tutorials and overlays and will not forget the users that helped us get us to where we’re at today!

---

How Do I Customize My Twitch Overlays?

For the perfectionist and creative

If you’re a Twitch streamer with a keen eye for design and further customization, many of our Twitch overlay templates can be purchased with access to the After Effects animated source files, meaning you’ve got full control over every aesthetic aspect of your purchased Twitch overlay template.

How does this benefit you?

Well, we know many professional streamers consider a Twitch overlay template as an asset to their brand. Color coordination and style sync is key for making a killer stream presentation. If you’re familiar with the workings of Adobe After Effects, our source files give any streamer master control of every visual aspect found within our Twitch overlay templates. There’s nothing that can’t be customized to your brand with our source files in your hands.

What Should Your Twitch Overlay Template Include?

Everything you need to start streaming on Twitch, YouTube, Facebook, and Mixer

Our Twitch overlay templates are feature rich. We bundle our overlay templates into full packages that include overlays for webcams, alerts, social bars, and much more. If you’re a user of Streamlabs and Streamlabs OBS we even include quick-setup files to get you going within minutes.

To give you an idea of what’s included in our Twitch overlay templates, to the right is a list of example contents of our packages.

Overlay Package

• Animated Overlay Files
• Webcam frames (16:9 and 4:3 ratio)
• Animated Event List
• Screen designs (Starting, BRB, ending, and blank versions)
• Stinger Transitions (blue, purple and green)
• Quick setup Streamlabs OBS .overlay file
• Icons for stream and social use
• Profile panels and editable .psd

Alert Package

• Fully customizable animated alerts
• Quick install link for Streamlabs
• Customize colors of all elements and fonts via our custom fields
• Change the language and text used

The post Twitch Overlay Templates and Free Downloads appeared first on Nerd or Die.