Find out how to Create a Twitch OBS Stream Overlay in Photoshop

Do you live-stream on Twitch? Ever needed to make your personal live-stream Twitch structure graphics from scratch? On this tutorial, we’ll stroll by the fundamentals of how one can make stream overlays for Twitch.

We’ll make a customized stream overlay for Twitch from scratch, after which we’ll put it to make use of in Streamlabs OBS, that is now out there for each PC and Mac.

As well as, if you happen to’re on the lookout for fast and customizable stream overlays for Twitch  —and even an OBS overlay maker— you may also need to try Placeit! There’s a lot stream content material and Twitch templates right here—from Twitch overlays to intro screens to Twitch panels!

For those who’re on the lookout for a Twitch overlay maker, you would possibly need to give Placeit a peek! Now, let’s dig in, discuss how overlays work, and make certainly one of our personal, from scratch!

What You will Study:

• Find out how to use stream overlays in Twitch
• Find out how to make a Twitch overlay
• Find out how to make stream overlays for Twitch
• Find out how to put together graphics for a stream structure
• Find out how to add overlays to the OBS

What You will Want: 

The followings belongings are used inside this tradition Twitch overlay tutorial:

1. Find out how to Use OBS Stream Overlays (And How Do They Work)

First, let’s discuss what an OBS Stream Overlay is and the way it works.

Whenever you watch your favourite stay streamer, it is common to see graphics on high of the stream structure. This might be something from static graphics to animated parts, interactive textual content, and extra. 

Usually talking, when working with OBS, there are three issues happening: 

• First, now we have our graphics or media. That is the content material that we will create utilizing software program like Adobe Photoshop. 

• Second, now we have a software that generates content material primarily based in your stream. There are a number of decisions on the market! 

• And third, now we have broadcasting software program, which brings all your content material collectively. Consider it like arranging the whole lot from completely different sources into one, finalized presentation.

That mentioned, on this tutorial, we’ll be utilizing Streamlabs OBS — the profit right here is we will largely “skip” the second criterion right here. This software handles the alerts and the broadcasting, multi functional place. 

2. Find out how to Make a Stream Overlay

Step 1

There are many issues we may do with our stream overlay. There isn’t any proper reply — simply what’s finest for you and your broadcast.

Step 2

Here is an inventory of some stuff you would possibly need to contemplate on your overlay:

• Viewer Interplay. This consists of issues like the newest follower, subscriber, or donor.
• Objectives. You can show your donation, subscriber, or follower aim.
• Social Media. Chances are you’ll need to make your social media accounts seen on the stream overlay, so viewers are inspired to work together with you.
• Internet digicam. Many streamers have an internet cam the place viewers can watch each them and the topic of the stream on the similar time.
• Chat window. Show your channel’s chat on the stream structure. It may be a enjoyable solution to seize the chat with the video.
• The stream focus itself. We now have to, after all, allot house for the main focus of the stream itself.

There are many different issues you may do along with your stream overlay for Twitch. As soon as you realize the fundamentals, you’ll be able to work from there.

Step 3

So, how have you learnt what to incorporate in your stream overlay? Maintain the next in thoughts:

• The place is your point of interest? Ensure that to maintain the emphasis on the main focus of your stream.
• Additions ought to complement your stream. The content material you add ought to improve the expertise, not distract from it.
• Ensure that the content material is legible. If issues are tough to learn or perceive, it’d defeat the aim. 
• Be cohesive. Take into account a visually unified theme, particularly if you happen to’re attempting to construct an expert model. Have a emblem, signature colours, and a constant aesthetic. 

Your choices on these factors ought to be influenced by your targets with a purpose to have a extra profitable end result. 

3. Find out how to Make a Stream Overlay

Step 1

Open up Adobe Photoshop and begin a New Doc.

Our New Doc must be 1920 pixels extensive by 1080 pixels tall — that is the really useful Twitch scene dimension, which shall be our whole seen space.

Step 2

Earlier than we create our doc, let’s change our Background Contents to Clear.

As soon as you have completed so, click on Create to create your doc.

Step 3

Let’s dive into how one can arrange a stream structure. This varies, however this is what I need to be certain that to incorporate in your Twitch template:

• on-screen viewer interactions
• house for an internet digicam
• social media content material
• house for a subscriber aim
• my predominant stream footage 

Begin by making a New Layer in the Layers panel, as highlighted beneath. Title your layers by clicking on the identify of the layer itself, within the Layers panel. 

Then, use the Polygonal Lasso Device, highlighted beneath within the Instruments panel, and draw a polygon. Every click on is a degree in your choice. An additional tip: maintain Shift whereas drawing your form to create completely straight traces!

Lastly, fill this choice with the Paint Bucket Device. I selected to do that in black.

Step 4

Subsequent, duplicate this layer. You are able to do so by right-clicking (on PC) or Management-clicking (on Mac). From the ensuing menu, choose Duplicate Layer. 

We would like three copies of this layer in whole—one for every of our deliberate interactions. 

Step 5

Subsequent, merge these three layers collectively. 

To take action, maintain Shift to pick a number of layers directly. Then, right-click (on PC) or Management-click (on Mac). From the ensuing menu, choose Merge Layers. 

Notice, this combines the layers collectively. Chances are you’ll need to preserve them unbiased. Take into account, nonetheless, that if you happen to resolve that you just need to separate this content material, it is so simple as chopping and pasting onto a brand new layer, as soon as once more. 

Step 6

Now, Duplicate our merged layer, utilizing the identical course of. 

This leaves us with two copies of the identical three polygons. Use the Transfer Device to regulate their alignment. We would like it to look as if one is “on high of” the opposite, as proven beneath. 

Step 7

Now, Lock Transparency on our backside set of polygons. It will enable us to use coloration with out worrying about going “exterior of the traces”. You’ll be able to Lock Transparency within the Layers panel, as proven beneath. 

Choose a blue and a cyan coloration on your foreground and background colours, or any colours you like! Discover them within the Instruments — click on on the coloured squares to open up the colour picker. 

Step 8

Use the Gradient Device to use a gradient to our backside polygons. Merely click on and drag to use your gradient. 

Once more, the colour will “keep” on this space, as a result of now we have Lock Transparency on in our Layers panel. 

Step 9

Now, let’s add some textual content with our Textual content Device. It is laborious to see, beneath, however I’ve typed out “new follower”.

Because it’s laborious to see, let’s add a Stroke to this textual content to assist enhance its visibility. 

To take action, choose the textual content layer after which click on on Add a Layer Type, within the Layers panel. That opens up the next menu, as proven beneath—choose Stroke. 

Step 10

Here is what our Layer Type choices appear to be—be happy to repeat my values! I went with a 3 px Stroke.

When you’re pleased along with your settings, click on OK. 

Step 11

Repeat this course of twice, in order that now we have textual content above all three polygons. 

Step 12

Once I’m engaged on an overlay, I usually prefer to insert pattern content material, simply so I can get a really feel for a way issues look. On this case, I added some take a look at names to every of my sections so I may see what it seems to be like when there’s content material there. 

I did so utilizing the Textual content Device—and I put this content material inside a Folder. You’ll be able to create folders on the backside of the Layers panel.

Step 13

Now, let’s create an area for some social media content material. 

Much like our unique polygons, I created a New Layer in a brand new folder. I began out by drawing a variety utilizing the Polygonal Lasso Device. Then, fill the house with the colour of your alternative, utilizing the Paint Bucket Device. 

Step 14

Discover a sample right here? We’ll repeat the method that we did with our different black shapes:

• Copy the layer.
• Transfer the Layer, utilizing the Transfer Device, so one seems to be “in entrance of” the opposite.
• Lock Clear Pixels within the Layers panel, so we won’t apply coloration “exterior of the traces”.
• Then apply your gradient, utilizing the Gradient Device. 

Our aim is to create an identical look, so the content material right here matches. 

Step 15

Now, let’s add some content material right here.

You can add something you want right here—social media icons, names, URLs, a discover, something you want! On this case, I added two social media shout-outs right here, so they continue to be on display and straightforward to see.

I used the Textual content Device to put in writing the social media handles, after which I copied and pasted some social media icons into my structure. 

Step 16

Subsequent, I made a decision so as to add an area for an internet digicam. Repeat the identical course of from Steps 14 and 15—just for our internet digicam’s house.  

Notice, you might need to think about your digicam’s dimensions. I selected to work with 640 pixels extensive by 480 pixels excessive as my basic foundation. You’ll be able to create a brand new doc at this dimension, paste it into your doc, after which scale it utilizing the Transfer Device or Free Rework. 

Then, I scaled this down, so I knew the facet ratio would stay the identical. 

Step 17

Right here, I selected to apply a take a look at picture to my internet digicam house.

To take action, paste your picture into your doc. Ensure that the layer containing this picture is correct above the black sq. we have designated for the net digicam’s house.

Then, choose the picture layer and proper click on (on PC) or maintain management and click on (on Mac), and choose Create Clipping Masks from the ensuing menu. Now, we’ll see a pattern picture displayed inside this house. 

Step 18

Let’s add an area for our subscriber targets, too! I need this to appear to be a progress bar, so I stored that in thoughts when creating these shapes.

Comply with the identical steps to create the blue gradient look behind our black content material areas. 

Step 19

I made a decision I needed so as to add some extra ornamental parts to my structure. 

On this case, I created a New Layer. Then, I used the Rectangular Marquee Device to attract a horizontal choice. I then used the Paint Bucket Device to fill this house with black. 

Step 20

I used the identical course of once more to create a gradient blue line beneath this lengthy black line. Comply with the identical steps with any colours you like!

Step 21

Our structure makes use of some enjoyable diagonals, so I assumed it is likely to be enjoyable to create a backside line that performs into this. Once more, this is similar course of because the earlier line.

Experiment with completely different visible instructions! 

4. Find out how to Put together Graphics for a Stream Overlay

Step 1

Let’s put together the stream structure for a Twitch OBS! 

First, be certain that to take away or disguise any take a look at content material, like names or footage that you just put into your structure, only for instance functions. 

Then, we have to selectively merge our layers. For instance, I need the contents of my “Prime Line” folder to be merged into one layer, so I can export it as one picture. 

Maintain Shift whereas choosing the layers you’d prefer to merge. Then right-click (on PC) or Management-click (on Mac) and choose Merge Layers from the ensuing menu to mix them. 

Do not merge the whole lot collectively! Merge particular parts in order that they not have layered elements. Take into consideration what photos you need to act as one unit, and which you’d prefer to preserve independently.

Step 2

Here is an instance of my layers, after the whole lot has been merged. Beneath, solely the highest data bars are seen (you’ll be able to toggle visibility on and off by clicking on the “eye” subsequent to every layer).

Discover, once more, that that is all on one layer: the black polygons, the blue polygons behind them, and the textual content. Maintain the layer you’d prefer to export chosen. 

Step 3

Now, we have to choose this content material. Go to Choose > All to pick your total canvas. 

Step 4

Then, Copy (Edit > Copy) and Create a New Doc. 

Now, Paste (Edit > Paste). Photoshop ought to paste the content material we copied from our structure, as proven within the instance beneath. Discover, nonetheless, that it’s solely the one, merged a part of our structure that we had chosen. 

Save this content material as a PNG file so the background stays clear. 

Repeat this course of for every a part of your structure. You can export your total structure as one clear PNG, however I usually desire to maintain completely different items separate. The selection is yours!  

Because the dimension of this canvas is similar because the Streamlabs overlay dimension, we’ll have the ability to preserve the look constant between the packages. We’ll go additional into this within the subsequent step.

5. Find out how to Add a Stream Overlay 

Step 1

Now, let’s take our work and focus on how one can add overlays to the OBS. 

Begin off by creating a brand new Scene. Underneath the panel that claims Scenes, click on on the plus signal to create a brand new scene. Whenever you accomplish that, you may be prompted to call your new scene. 

Step 2

However our scene would not have something in it but! That is as a result of we have not outlined any Sources. 

Once more, click on on the plus signal, this time within the Sources panel. 

Step 3

Doing so brings up a complete host of choices! Nevertheless, we’ll begin off with Picture, from the checklist of attainable sources.

Choose Picture because the supply, after which click on Add Supply. 

Step 4

Listed below are the ensuing popup choices. We need to Add a brand new supply as an alternative. Give it a reputation, and click on Add Supply. 

If we do not toggle “Add a brand new supply as an alternative” on, we will select from outdated sources that we have already outlined.

Step 5

Now, choose the picture you’d prefer to import. This is able to be one of many photos we exported from Photoshop.

As soon as you have chosen your picture, click on Accomplished. 

Step 6

Now, you may see that Streamlabs OBS has imported the picture into our seen space. 

Click on and drag to place the picture the place you’d prefer it to show in your structure. 

Repeat this course of, and proceed to import your photos. 

Let’s check out an instance. 

I’ve imported two photos. I’ve the road that goes throughout my structure (which I’ve known as “Prime Line”), and my three polygons (which I’ve known as “Prime Notifications”).

Nevertheless, they’re within the flawed order right here. The road shouldn’t be on high of my notifications. 

Step 7

Fortunately, rearranging sources is simple! 

Merely click on and drag to rearrange your sources. Now, I’ve acquired my line behind my polygons, in order that they show collectively as I meant in my design. 

Step 8

Here is a have a look at my Streamlabs OBS, after I’ve imported all of my imagery. 

However, what about our notifications? Click on on the plus signal in your Sources, once more, so as to add a brand new supply. 

Step 9

Nevertheless, this time we do not need to choose Picture — we would like Stream Label. 

Choose Stream Label from the checklist of Sources, after which click on Add Supply. 

Step 10

Similar to once we added an Picture, we need to choose Add a brand new supply as an alternative to create a brand new supply. 

Give your new supply a descriptive identify, on your reference, after which click on Add Supply. 

Step 11

Ensure that to take a look at the Label Sort. There are such a lot of various things you may select right here, like your high donor for the month, most up-to-date cheer, and rather more!

You’ll be able to change the font, the colour, the opacity, and extra. Change them to finest fit your design. For instance, I set my font household to Quinta Professional, the dimensions to 36, and the colour to #0000faff. 

Click on Accomplished if you end up pleased along with your alternatives. 

Step 12

Now, similar to when importing imagery, click on and drag to align your textual content in your structure. I positioned mine on high of the corresponding black polygon — the one that claims “new follower”. 

Repeat this course of for another dynamic textual content in your structure. 

Step 13

Let’s add the subscription aim to the Twitch template. Begin by including a brand new supply. 

Trying on the Add Supply choices, once more, we will select Subscription Objective, as an alternative of Picture or Stream Labels. It is positioned beneath Widgets. 

Step 14

Acquainted but? Add a brand new supply as an alternative of working with an present one, and provides your supply a reputation, on your reference. Then, click on Add Supply.

Step 15

Here is a have a look at our Subscription Objective settings. 

Go forward and put within the values that you just desire, just like the title, the quantity of your aim, and a beginning quantity. You may also edit the width and peak within the higher left-hand portion of the stream overlay settings. 

Click on on Begin Objective when you’re pleased along with your properties. 

Step 16

As soon as we have clicked Begin Objective, we will see a preview of our subscription bar.

If you wish to change the properties, click on on Finish Objective and regulate them. For those who’re pleased along with your values, click on Accomplished. 

Step 17

Now, as we did with earlier sources, click on and drag to regulate and align your subscription aim bar. You may also resize issues from this preview, simply use the resize handles. 

Step 18

Let’s check out another widespread sources that you just would possibly need to use in your stream structure. 

First, take a look at the Show Seize. This captures your total monitor. I like to make use of this if I am utilizing a couple of program at a time. 

Step 19

Then, now we have Sport Seize. It will seize a sport or exercise that you just’re performing in your pc.

Step 20

Window Seize does what it feels like — it captures a particular window in your pc. That is useful if I need to solely stream Photoshop and nothing else, for instance. 

Step 21

Video Seize Gadget is the supply I sometimes use once I need to show my webcam. I can outline it as my video supply, after which preview my digicam, inside Streamlabs OBS. 

You may also comply with together with us over on our Envato Tuts+ YouTube channel:

Congratulations, You are Accomplished!

You have simply created your personal Twitch OBS stream overlay. Stream overlays for Twitch are an effective way too present your personal branding in your movies.

You realized how one can use a Twitch template, how one can make a Twitch overlay, how one can edit your stream structure and how one can add overlays to the Twitch OBS. All in all, you are now in a position to create a custom-made Twitch structure that exhibits off your character.

Prime Photoshop Twitch Overlay Templates From Envato Parts

With regards to making the finest Twitch overlay templates, Photoshop is a good software to make use of. Nevertheless, even with the assistance of a tutorial, making a usable template can take a while.

That is why you’ll be able to head to Envato Parts to obtain premium-quality alternatives. You will not have to learn to make a Twitch overlay from scratch to have the ability to begin streaming.

There’s loads of selection available by searching the Photoshop Twitch overlay template choices from Envato Parts. Here is a handful you’ll be able to obtain when you have a subscription to the artistic platform.

1. Iron Twitch Overlay Template (PSD, AI, EPS, PNG, JPG)

The daring traces and colours of Iron make for an attention-grabbing Twitch stream overlay template. It is fully made up of vector parts, permitting you to resize and morph objects with out dropping picture high quality. Iron additionally suits properly into the Twitch and Streamlabs overlay dimension.

2. Jelly Fish Twitch Stream Overlay Template (PSD, AI, EPS, PNG, JPG)

Go galactic with the enjoyable Jelly Fish Twitch overlay template PSD. It comes with scalable vectors and easy-to-customize layers to suit the Twitch scene dimension. Attempt it out in Photoshop, or use the opposite included file varieties to work in Illustrator. Utilizing it may be simpler than studying how one can make an overlay for Twitch if you happen to do not contemplate your self design savvy.

3. Unicorn: Photoshop Twitch Overlay Template (PSD, AI, EPS, PNG, JPG)

Unicorn is without doubt one of the finest Twitch overlay templates to take a look at on Envato Parts. You will discover how nicely structured it’s, with loads of house to share your presence on different platforms and different stream particulars. Principally, it has the whole lot you want if you happen to’re undecided how one can arrange a stream structure. This is without doubt one of the finest Twitch overlay template PSDs to attempt.

4. Neon Gamer Twitch Overlay Template for Photoshop (PSD)

If vibrant colours are your factor, it would not get significantly better than this Twitch overlay template Photoshop PSD. It is a high-resolution obtain that is available in each 16:9 and 4:3 facet ratios for webcams. You may also exhibit your different social hyperlinks to develop your platforms all over the place. If you do not know how one can make a Twitch stream overlay by yourself, give Neon Gamer a glance.

5. Twitch Facecam Overlay (PSD)

This Photoshop Twitch overlay template is flexible and easy in its design. With it, you get a minimal overlay with customizable fonts and colours. It is also fitted to extra than simply gaming. DJs, vloggers, and companies can all make use of this Twitch overlay template. Because of its 1080p decision, you may discover the Twitch overlay dimensions play properly with this template.

Artistic Twitch Stream Overlay Templates From Placeit

Now that you understand how to make a Twitch overlay and how one can add overlays to the OBS, you would possibly need to take a look at Placeit! It is a user-friendly Twitch overlay template maker, “stream beginning quickly” overlay maker, and extra!

There’s a lot content material to customise, and it is tremendous straightforward to make use of. It is like having a free model of Photoshop that works with out putting in something in your machine. Test it out!

I’ve grabbed a number of choices you could personalize after somewhat tweaking on Placeit.

1. Twitch Overlay Template That includes Glowing Webcam Frames

The brilliant neon colours of this Twitch stream overlay template are positive to show various heads. Placeit offers you full management of fonts, colours, and textual content right here, so you’ll be able to create the perfect search for your Twitch structure.

2. Stream Overlay for a Twitch OBS With Sharp Strains

You realized how one can make a Twitch overlay, however you make prefer to preserve it easy and get this obtain. It options sharp traces and a neat body on your content material. Use the Twitch overlay template maker to create the branded aesthetic you are taking pictures for with this selection.

3. Cool Twitch Overlay Maker for Twitch Accounts

Simplicity is the important thing to this Twitch stream overlay template. Its darkish colours mix properly with the atmospheric background. Like different Placeit templates, you can work with completely different fonts and colours to create a bespoke overlay on your wants.

4. Gaming Themed Twitch OBS Overlay Template Maker

We go from darkish and gritty to a mode that is extra vibrant. This Twitch overlay template maker is totally customizable, even the body! Add your channel particulars to create a top-notch overlay on your upcoming streams.

5. Twitch Stream Overlay Template That includes the Image of a Gaming Keyboard as Background

For those who’re a PC gamer, this is likely to be the most effective Twitch template on your streaming wants. It is minimal with customizable colours and borders, and allows you to hyperlink to your different social platforms. Plus it is editable on-line, so you will not have to have Photoshop to customise it.

And This Is Simply the Starting!

You simply realized how one can make a Twitch overlay. As you might have guessed, there are such a lot of issues you may do with your stream overlay. I prefer to experiment with animated GIFs and MP4s, and yow will discover many cool choices on Envato Parts.

Hopefully, this has given you a style of the probabilities! Streamlabs has an superior tutorial on how one can get began, when you have questions on set up, stream settings, and extra! 

For those who loved this Twitch structure tutorial, listed here are some others you would possibly take pleasure in: