{"id":6109,"date":"2017-02-15T11:00:46","date_gmt":"2017-02-15T17:00:46","guid":{"rendered":"https:\/\/www.infiniscene.com\/?p=6109"},"modified":"2017-02-15T11:00:46","modified_gmt":"2017-02-15T17:00:46","slug":"how-to-make-a-simple-stream-overlay","status":"publish","type":"post","link":"http:\/\/dev.prlxweb.com\/golightstream\/how-to-make-a-simple-stream-overlay\/","title":{"rendered":"How to Make a Simple Stream Overlay"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Despite what you’ve heard, you don’t need to hire an artist or know Adobe Photoshop that well to create your own \u00a0stream overlay. You can do it for free and get it done\u00a0relatively quickly. In this tutorial, I’m going to show you how to create something simple that will give your stream a little more polish without making you pull your hair out.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Step 1<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

The first thing you’ll need to do is download GIMP<\/a><\/strong><\/span>. It’s an image manipulation program akin to Adobe Photoshop but free. Once you’re done installing, you’ll then need to make your canvas. You’ll want to go to “File > New” and then use the following settings if you’ll be broadcasting in 1080. If not, you can set the canvas to 1280×720. Remember: you can always scale down an image or overlay without losing quality but you can’t scale up. Be sure to click “Advanced” if you don’t see all of the options too.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Adjust\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

After that, you’ll then want to grab a screenshot from whatever game you’re playing. This will ensure that you’re placing your overlay in areas that won’t cover key elements of gameplay. Make sure the screenshot is up-to-date (i.e. DotA 2 changes the HUD around from patch to patch) and also make sure the dimensions match the canvas size (1920×1080).\u00a0<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Step 2<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

I’ve chosen to use Hearthstone so I went ahead and copied over a screenshot from Google Images and pasted it into my canvas. Now I need to decide where I should put my webcam. The top right area is a common location and I know it won’t cover anything up important so I’ll choose there.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Adjust\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

If you’ve got a 16:9 webcam then make sure you have that aspect ratio selected. If you’re \u00a0working with a 4:3 webcam then use that respectively.\u00a0Lastly, make sure you’ve selected “Transparency” as an option before making your new layer too.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Step 3<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

I’ve chosen to use black and grey as colors\u00a0because they’re simple and look clean when a gradient is applied. If you’re looking to be a little more adventurous, check out a color palette generator like Paletton<\/a><\/strong><\/span> for ideas.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Add\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Don’t be afraid to play around with the gradient tool too. Remember: you can always revert a change (CRTL+Z) if you don’t like it.\u00a0<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Step 4<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

You’ll then want to “hollow-out” your webcam frame. To do this, uncheck the fixed ratio checkbox and then select about 90% of the inner area of your webcam frame. Then click “Delete”.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Add\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Step 5<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Now we’re going to make our social bar or ticker. This area will contain where people can find you on Twitter, YouTube, etc. and we’ll leave room if you want to include a text-file or two later on.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Design\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Notice\u00a0how the height stops at the mana bar (right near the purple vase for all you non-Hearthstone players). Always remember to not cover up valuable HUD elements!<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Step 6<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

I’ve rounded up a few popular social and video platform\u00a0logos that you can download here<\/a><\/strong>. If I missed any though, be sure to look for transparent .png’s<\/a><\/strong> when downloading from Google Images. Choose whatever you need and then copy and paste into your scene.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Customize\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Scale the logo(s) down so that they’re now smaller in height than the social bar. You don’t want them to “bleed” over.\u00a0<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Step 7<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Using the Text Tool (T), you’ll then click to add whatever text you’d like to appear next to your social image(s).\u00a0<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Design\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Be sure to scale your font up as need be and move it so that it’s aligned with your social image(s).\u00a0<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Step 8<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Almost there! Now you need to hide the game HUD\u00a0and export as transparent .png.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Export\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

When exporting, make sure you’ve de-selected the “Save Background Color” to ensure transparency.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Step 9<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

All that’s left is to bring it into your broadcasting software. I’m using our own to demonstrate.\u00a0<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Add\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Boom. Just like that, you’ve got your overlay. If in the event you’re not\u00a0happy with you’re own creation then remember, we do also offer free overlays in our filepicker. All you have to do is go to Add Asset > Image > Upload Image > and then navigate to the “Lightstream Overlays”. Hopefully you found this tutorial helpful and if you’d like to see more like this then let us know!<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Despite what you’ve heard, you don’t need to hire an artist or know Adobe Photoshop that well to create your own stream overlay.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[54,64,96,137,138],"class_list":["post-6109","post","type-post","status-publish","format-standard","hentry","category-avclub","tag-facebook","tag-gimp","tag-overlay","tag-tools","tag-tutorial"],"acf":[],"_links":{"self":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/posts\/6109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/comments?post=6109"}],"version-history":[{"count":0,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/posts\/6109\/revisions"}],"wp:attachment":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/media?parent=6109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/categories?post=6109"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/tags?post=6109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}