TubeSum ← Transcribe a video

Create a Pro Twitch Overlay in 10 minutes FREE!

0h 08m video Published Jun 6, 2022 Transcribed Jul 1, 2026 M Michael Feyrer Jr.
Beginner 2 min read For: Beginner streamers using Twitch who want to create a professional-looking overlay with free tools.
104.3K
Views
3.4K
Likes
100
Comments
140
Dislikes
3.4%
📈 Moderate

AI Summary

This tutorial shows you how to create a professional Twitch overlay using free software. The host guides viewers through designing overlay assets in Picksler E, then configuring OBS and Stream Elements to display labels for subscribers, tips, and super chats. The entire process is demonstrated step-by-step, ensuring anyone can follow along.

[00:36]
Free tools used

Picksler E is a free, browser-based image editor similar to Photoshop.

[00:49]
Overlay image dimensions

Set image size to 1920x1080 pixels; do not include a background.

[01:01]
Creating gradient background

Use the gradient tool with a black-to-transparent gradient, drawn from bottom to top.

[01:13]
Resizing the gradient

Hold Shift while dragging a corner to resize the gradient to full screen without distortion.

[01:42]
Adding shape icons

Select the shape tool, pick shapes like star, plus, heart, and adjust fill, outline, drop shadow.

[03:18]
Exporting assets

Export as PNG, then create a new 1920x1080 image for the mask, choose a shape, export as PNG.

[04:11]
Setting up OBS

In OBS, add an Image source for the overlay, then a Game Capture source.

[04:52]
Applying mask to camera

Apply an Image Mask Blend filter to the camera source, using the mask PNG.

[05:17]
Configuring Stream Elements

In Stream Elements, create a 1920x1080 overlay, add a Static Custom image (the overlay PNG) and position it.

[06:15]
Adding stream labels

Add labels for Latest Subscriber, Latest Tipper, Latest Super Chat; position them over the shapes.

[07:11]
Finalizing in OBS

Copy the Stream Elements overlay URL, add a Browser source in OBS (1920x1080), paste URL.

[06:58]
Hiding static overlay

Hide the static overlay image in Stream Elements so it doesn't duplicate.

Clickbait Check

98% Legit

"The title accurately promises a free, 10-minute overlay creation guide, and the transcript delivers exactly that."

Mentioned in this Video

Tutorial Checklist

1 00:49 Open Picksler E and create a new image at 1920x1080 pixels; name it “overlay”.
2 01:01 Use the gradient tool with black-to-transparent gradient; draw a line from bottom to top. Resize to full screen while holding Shift.
3 01:42 Select the shape tool, pick a star, draw it with Shift held, then remove fill and add outline + drop shadow.
4 02:09 Duplicate the star and change its shape (plus, heart) to create multiple icons. Arrange them along the bottom.
5 03:18 Export overlay as PNG.
6 03:31 Create a new 1920x1080 image for the camera mask; select a shape (e.g., torn paper) and draw it; export as PNG.
7 04:11 In OBS, add an Image source for the overlay, then a Game Capture source. Move camera above game.
8 04:52 Right-click camera → Filters → add Image Mask Blend filter → browse to mask PNG.
9 05:17 In Stream Elements, create new overlay (1920x1080), add a Static Custom image with the overlay PNG, position it.
10 06:15 Add labels for Latest Subscriber, Latest Tipper, Latest Super Chat; position them over the icons.
11 06:58 Hide the static overlay image in Stream Elements, save the overlay, copy the link.
12 07:11 In OBS, add a Browser source (1920x1080), paste the Stream Elements link, refresh cache.

Study Flashcards (9)

What resolution should the overlay image be?

easy Click to reveal answer

1920 x 1080 pixels

00:49

Which tool and gradient setting creates the background fade effect?

medium Click to reveal answer

Gradient tool -> Black to transparent gradient

01:01

How do you resize the gradient to full screen while keeping proportions?

easy Click to reveal answer

Hold the Shift key while dragging the corner

01:13

What OBS filter is used to apply a shape mask to the camera?

medium Click to reveal answer

Image Mask Blend filter

04:52

How do you import the overlay image into Stream Elements?

hard Click to reveal answer

First export as PNG, then upload to Stream Elements as a static custom image

05:31

How does Stream Elements handle text positioning relative to the overlay?

medium Click to reveal answer

It snaps into position; you can use arrow keys to move it precisely.

06:01

What is the final step to display the labels in OBS?

medium Click to reveal answer

Copy the Stream Elements overlay link and add a Browser source in OBS, set to 1920x1080.

07:11

Which key ensures a shape is drawn proportionally (asymmetrical) in Picksler E?

easy Click to reveal answer

Shift key

01:55

What are the three free tools used in this tutorial?

hard Click to reveal answer

Picksler E (for design), Stream Elements (for labels), and OBS (for streaming)

00:36

💡 Key Takeaways

🔧

Free tools for overlay creation

Reveals the key strategy: using Picksler E, OBS, and Stream Elements to build a professional overlay without cost.

00:36
🔧

Gradient background technique

Provides a simple visual trick (black-to-transparent gradient) that adds polish without complexity.

01:01
🔧

Image mask blend filter in OBS

Explains OBS's powerful yet underused filter for shaping camera sources, giving overlays a custom look.

04:52
🔧

Stream Elements widget integration

Demonstrates how to combine an uploaded overlay with dynamic labels, which is the core of making overlays functional.

05:17

✂️ Creator Tools: Viral Hooks

AI-generated clip ideas for Shorts based on the transcript

Free Pro Twitch Overlay in 10 Minutes

45s

Immediately hooks streamers looking for a free, professional solution.

▶ Play Clip

Create Gradient Overlay in Picksler

54s

Teaches a simple yet effective design technique that viewers can replicate instantly.

▶ Play Clip

Mask Your Camera with Custom Shapes

34s

Shows a unique, creative way to enhance stream visuals that stands out from typical overlays.

▶ Play Clip

Add Stream Labels for Free

58s

Demonstrates how to integrate dynamic labels, a key feature for interactive streams, using free tools.

▶ Play Clip

[00:00] Hello my YouTube friends, today I'm going to show you how to create this simple professional looking twitch overlay for your live streams, complete with labels and we're going to do it all with totally free software, so let's get to it!

[00:20] Likes and comments are super easy things that you can do to help push this video to a wider audience. So take a second down below and let me know how I'm doing and while you're there, click that subscribe button. It's totally free and it really does help me continue to make content that helps you.

[00:36] So thanks, we're going to start by creating the overlay assets in Picksler E. Picksler is a free Photoshop type tool that's browser based and really easy to use. There's a link in the description so you can check it out and follow along.

[00:49] That is the best way to learn. In Picksler E, we're just going to go and create a new image and we want it 1920x1080 and we're going to call it overlay and click Create.

[01:01] We do not want to background just so you know. So now we have an empty image, we're going to go and we're going to select this gradient tool here and we're going to go up to the gradient. We're going to select this one right here and as you can see it goes from black to transparent

[01:13] and that's what we're looking for and all we're going to do is draw a line up from the bottom to the top and that's going to add our gradient there. Looks really nice. We're going to click on this arrow on the top left and then we're going to grab this corner and we're going to hold down the shift key so we can just drag it down in its full

[01:30] screen size and we'll leave it like that and there we go. We have a cool little gradient there. Now we're going to select the shape tool and we're going to go up here and select shapes and we're going to drop down our shapes and you can see here there are a whole lot of

[01:42] shapes we can choose from. We're just looking for stuff that's going to represent you know a subscribe and a super chat and that sort of stuff. So we'll pick the star one here and all you have to do is go ahead and draw the star

[01:55] by dragging it. If you hold the shift key you can make sure it's asymmetrical when you draw it out and we'll shrink it up and make it the right size. We're going to go up here to fill and we're going to unfill it and then we're going to go to styles and we're going to add the outline and adjust the size of the outline and we're

[02:09] going to add a drop shadow here and this works kind of wonky especially when you have transparent background. It's a little bit difficult to see so you just kind of have to mess around with the settings and we'll turn opacity all the way up and adjust the distance and the direction just so

[02:23] we kind of get exactly what we're looking for and then we can adjust the blur up a little bit and that looks pretty good. I like that. So we're just going to drag this down here to the lower left and what I'm going to do is duplicate it and drag the duplicate over here to the center of our screen or somewhere closer

[02:40] to the center and then I'm going to go up to our shape and I'm just going to select a different shape and I think one of these pluses will work. Maybe a thinner one and there we go and then I'm going to duplicate it again and drag it

[02:52] out a little bit further down the bottom here and we'll just go up to the top and change the shape again and we'll try maybe this heart. I think we'll work and then I just want to get the spacing right on these so we're going

[03:05] to label each one of these anyways so if it's a little ambiguous as to what it represents that's fine. If you don't want to use any of these shapes you can also find your own and just bring them in here. But now we're going to go up to file an export and we're going to export it as a PNG

[03:18] and I already have a file in here named overlay so I'm just going to overwrite that and then I'm going to go and create a new image and this is also going to be 1920 by 1080. We're just going to call this one mask and click create and then what I'm going to do is

[03:31] select the shape tool and we'll drop this down and select the shape we want to use. Now this is going to be a mask for our camera so any of these shapes will work very well. They're all really cool. It really just depends on what you want your camera outlined to be shaped like.

[03:45] I'm just going to choose one of these kind of torn paper looking things and then all I have to do is drag on the screen and once I let it go the center turns white and we can just export this and we'll export it as a PNG and we can just save it out.

[03:58] The name of it is mask and we're good to go. Now we have all of our assets created. Now we have to do is set this up in OBS and get the stream labels set up. While you stream elements for the labels and again there's a link in the description

[04:11] and it's totally free. All right in OBS what we want to do is I'm going to click this plus and we are going to add an image and we can just call this overlay and click okay then we just need to browse to

[04:23] our image overlay and select it and click open and there we go. So now our overlay is in there for our labels and I'm just going to start a game here real quick. We'll get that running into background. I'm going to shrink down my camera put it right here and click the plus and we're going

[04:38] to add a game source here. I'm just going to call it lost art click okay and then okay and there it is. So I just need to move my camera above the game so we can see it. Now we just need to put the mask on the camera. So we're going to right click on the camera and go to filters then I'm going to click the

[04:52] plus and select image mask blend and click okay and I just need to browse to our mask and click open and that's all we need to do our mask is all set up on our camera.

[05:04] So now it has that cool paper torn outline looking way about it looks very awesome. So all we need to do now is add our stream labels to our live stream and we're going to be ready to go.

[05:17] Just move the camera and put it in a location here and we're going to go over into stream elements and we're going to create a new overlay and this overlay is going to be 1920 by 1080 and we'll go to add widgets and we'll go down to labels and we're going to go and

[05:31] select the subscriber and latest subscriber last subscriber label and you can see it puts it up here at the top we can just drag it down a little bit and I'm going to click the plus and I'm going to go to static custom and we're going to go to image and I'm just going

[05:45] to load up our overlay image so that we know exactly where we want to place our text. So I'll drag it on there and upload it and then we'll submit to add it in here and we'll go down to position and size and we'll put 1920 by 1080 so it is in the exact location

[06:01] that it should be on our screen and we're going to center it and there we go. So now we have our overlay in there. All we need to do is move our text to the proper location in this overlay and it snaps around so you can just use the arrow keys to move it and there we go.

[06:15] So now we just need to click the plus and add the rest of our labels. This time we're going to go to tips and we're going to go to latest and latest tipper and you can adjust what you actually want this to say so it doesn't have to say latest tipper

[06:28] you can just put in whatever the tip is if you'd like you can adjust what it actually says and we'll go to labels and we'll add a super chat latest and latest super chat and we'll drag that down into its proper location and use the arrow keys just to get it exactly

[06:44] where we want it and we'll move these over a little bit so they're centered and there we go. So that's all we need to do for our layout when I'm going to go and do is go into layers and I'm just going to go ahead and hide our image because we don't want that showing

[06:58] up we added that directly into our live stream then we can save this and we'll put a name on it and we'll just call it tutorial labels and click save and all we need to do now is click this little link button at the top it will copy our link into the clipboard.

[07:11] Now we're going to flip over into OBS click the plus and we're going to go to browser and we'll call this one labels and click okay and we just need to paste that link right in here and change this to 1920 by 1080 and we'll just scroll down to the bottom and click

[07:25] refresh cache and okay and in a moment there it goes it popped up. Now you can see this one wraps around over here so what I want to do is go back into our stream elements and I'm going to select these and move them up to the top of the box here

[07:40] that way if they do wrap around like that we don't have to worry about not being able to see them and all we have to do is click save and when we go back over to OBS you can see it saves the position it puts them exactly where we just saved it and we are all set

[07:54] so now we can just grab our camera and place it wherever we want it to be and we're ready to live stream with a really cool very simple and professional looking overlay awesome stuff.

[08:06] Super easy stuff if you want to see how you can create an easy stinger transition for your live streams you should definitely check this video out big thanks to the channel sponsors there are links below so you can check them out supporting the sponsors helps me continue

[08:19] to make content that helps you and I couldn't possibly do this without them or you so thanks and if you're always looking for tools tips and tricks can help make you a better live streamer or youtuber subscribe to the channel my name is Michael fire junior thank you so much for

[08:34] watching have a great day and I'll see you in the next one.

⚡ Saved you 0h 08m reading this? Transcribe any YouTube video for free — no signup needed.