No products in the cart.
- 17 Nov
How To Make A Twitch Overlay – Completely Free
- May 20, 2023
- by Liam Doherty
Getting overlays is a huge step in upgrading your channels quality and branding. You don’t have to look around for very long to realise that most of the top live streaming channels are using stream overlays. There are numerous ways to get overlays made for your channel, but today we’ll show you how to make a stream overlay for Twitch. Whether it’s for Twitch or YouTube the process for creating these designs will be almost identical.
There are different methods for creating overlays. We’ve tried to cover as many as possible to help you find the best option for yourself. Half the battle of creating a professional image as a streamer is getting overlays made.
Create Overlays With Photopea & Photoshop
You’ve most likely heard of Photoshop before and know that it’s one of the primary applications designers use to make a Twitch overlay. You probably also know that it’s a paid application. Fortunately there’s an alternative to Photoshop and it’s almost identical in terms of features. This alternative is called Photopea. The biggest difference between these two applications simply put is money. Photopea is completely free and a fantastic way to make a Twitch overlay.
We’ll show you how to make your first overlay for Twitch using Photopea. Given the almost identical interface, you can use Photoshop and still follow along with this guide. To help get you familiar with the software we’re going to show you step by step how to build an intermission screen.
Creating The Project
- Head over to Photopea. In the top left corner select File -> New
This will begin the process of creating a new project. Set the Width to 1920 and the Height to 1080 (Make sure the units are set to pixels). You can find all the best dimensions for overlays from our Twitch graphics size guide. Make sure that Background is set to Transparent. Now press Create.
*You should now have a blank canvas where we can begin adding graphics.
Finding A Background
The next step is to find a background image. There are quite a few websites that offer free to use images. For this tutorial we’ll be using Pxhere. They offer a huge library of images, a lot of which make great backgrounds for overlays.
Head over to Pxhere and enter a search term. e.g neon abstract. Look around until you find an image that you like and think will work with your brand. Select the image you like and from there click Free Download Original
Adding The Background
The next step is adding the background image. In the top left of Photopea select File -> Open & Place. Open the image you downloaded in the previous step. You might need to adjust the image size to fit it into the canvas. Resize the image by dragging the corners. Once the image covers the whole canvas press Enter, this will exit transform mode.
If you ever need to adjust the image size again, first select the image layer, then in the top menu select Edit -> Free Transform
Creating The Cutout
An intermission usually has two cut out sections, one for gameplay and the other for the webcam.
Start by selecting the rectangle tool from the toolbox on the left, now change the corner radius to 15px. Corner radius is used to create softer angles at the edges of a rectangle. Higher values create softer edges and lower value create pointier edges. Set the draw settings to Fixed Ratio then set W : 16 and H : 9. If you use a 4:3 webcam then adjust the ration accordingly (i.e. W:4 and H:3).
Start dragging the rectangle out on the screen by holding down left click.
Repeat the same process as above to draw a smaller rectangle.
Now Right click the background image layer from the layers panel on the left of the screen, and select Rasterize
Now we need to select the outline of the rectangle. To do this hover over the rectangle layers thumbnail. Now Ctrl-Click the layers thumbnail. You should now see a dashed white line around the selected layer.
Select the background image layer and press the Del key.
To confirm everything’s worked, turn the rectangle layer off. To hide a layer, select the icon that looks like an eye to the left hand side of a layer. If everything worked correctly you should see a chequered background.
Repeat the same process for the smaller rectangle.
Creating The Chat Box
Once again, select the rectangle tool from the tool box on the left. This time set the draw mode to Free. Start dragging on screen to draw out the chat overlay. Once you’re happy with it’s position and size, it’s time to set the colour.
Select Fill from the top tool bar and you’ll be shown a color selector. Once you’re happy with the color select OK to set the color.
Now we need to set the opacity. With the chat box layer still selected change the opacity setting which we’ve outlined on the right side in the image below. Around 35% is good a good value.
Creating Stream Labels
To create the stream labels, start by creating a new folder. Folders are created by selecting the folder icon at the bottom right of the screen. Once that’s done, select the rectangle tool from the toolbox on the left.
Create the outer part of the label, using the same process we followed to draw the chat box. Once the outer part is created, create another rectangle and position it inside the bigger label. Resize this smaller rectangle, so there’s room on the left side for placing an icon. Change the smaller inner rectangle color to a darker shade. This will offset its color from the larger outer rectangle.
Long click the rectangle tool in the toolbox to show alternative shapes. Select the Eclipse tool (It’s icon looks like a squashed circle) . Draw a small sphere whilst holding shift and position it on the left side of the label.
*Holding shift will make sure the shape is a perfect circle
Now it’s time to place an icon for the stream labels. To get these icons, download our tutorial files. In the top menu go File -> Open & Replace. Select an icon and position it within the circle of the stream label. Once positioned press enter.
All that remains is to change the icon images colour. To do this first select the icon layer. Now select eff -> Colour Overlay.
You should now see the layer style dialog. Select the small coloured box to bring up the colour picker. When you have chosen a colour press ok to apply it.
Now duplicate the stream label folder by right clicking the layer and selecting Duplicate Layer. File -> Open & Place now select a different icon for the duplicated stream label. Repeat the previous process to position and style it.
Position the duplicated layers adjacent to each other in a line.
Downloading Your Overlays
That’s about everything we need to add to the intermission screen for this tutorial. The final step is to export your screen for use on your stream. To do this go File -> Export As -> PNG.
It’s very important to select PNG as our chosen file type. PNG allow transparency values. This means that you can see through parts of the image. This is crucial in allowing can see the webcam and gameplay that’ll be positioned behind the screen.
All that’s left to do is add the overlays to your stream.
Tutorial Resources
To help you follow along with the tutorial we’ve created a downloadable file containing the project file, icon pack and background. Right click and Save Link As to choose where to download it.
Create Overlays With Canva
Canva is another hugely popular tool used to make a Twitch overlay. The biggest advantage it has over more advanced tools is, how easy it is to use. This is especially true for people who have no or very little experience designing. It really simplifies the process of creating overlays. If you want high quality designs without spending a huge amount of time learning advanced tools then give it a go.
For the purpose of this tutorial, we’re going to show you how to create an intermission screen in Canva.
Creating A New Canvas
Start off by heading over to Canva. Before you start designing sign up and create an account. Once that’s done select Create A Design -> Custom Size
Set Width 1920, Height 1080 make sure that the unit is set to px. Select Create New Design
Adding A Background
Now it’s time to add a background to our canvas. We’ve previously covered how to find a background. Once you’ve chosen a background select Uploads from the left sidebar. Then select Upload Files. Now navigate to and select your background image.
Once the file is uploaded, drag it from the pane on the left onto the canvas. The background we chose had to to be resized to cover the canvas. Do this by dragging one of the corners.
*Move Canva elements by selecting and dragging them. You can also use your arrow keys for more precise placement
Creating The Cutout
With the background added, it’s time to move on and add two rectangles to the screen. These will serve as the webcam and gameplay areas later on.
Start off by selecting Elements from the left sidebar. Click into the search bar, some preset categories will now show up. Select Lines & Shapes
Select the soft edged rectangle to add it to the screen.
Position the first rectangle as shown in the image below. Once the rectangle is selected you can resize it by dragging the corners.
Now add a second rectangle, position and resize it to serve as a smaller gameplay area.
Adding A Chat Overlay
To create a chat overlay add a new rectangle to the canvas. Position it underneath the gameplay area and to the right of the webcam area.
Once positioned, change the color by selecting the coloured box on the top tool shelf. After that change the transparency by selecting the button on the top right of the tool shelf. A value of 40% is good.
Creating A Labels Bar
Add a new shape to scene. Place it below the larger webcam area. The label should be significantly wider than it’s height. This gives you plenty of space for placing text later on. Change the color, and set transparency to around 40% again.
Add another shape to the cavas. We chose a circle. Then position it to left side of the label. This is going to be the area we use to place the icon in the next step
Select Elements from the sidebar. Now do a search for Heart. Once added to the canvas reposition and resize it to fit inside the stream labels circle.
To duplicate the base stream label design, first click the oblong shape, then whilst holding shift select the circle. Now right click it and Duplicate.
Editing Screen Colors
At this stage it’s a good idea to change the color of the cut-out areas. We have chosen red. This is the color you will use to chroma key when you set it up in you streaming software.
Downloading Your Overlays
The final step is to download the overlays. In the top right select Share -> Download.
Make sure PNG is selected as the file type then press Download.
Create Overlays With PlaceIt
PlaceIt is a great tool to quickly make a twitch overlay using existing templates. Keep in mind, if your goal is to make a Twitch overlay for free, this method requires a payment. As you can imagine working with templates gives you much less control of the overall design. However, because most of the elements are already created it’s a much quicker compared with the process of making one from scratch.
Finding A Template
To begin creating an overlay, head over to PlaceIt. From here you can start searching for templates that you might like.
Search for OBS stream overlays by using the search bar at the top. You’ll now see a variety of templates and graphics.
The sidebar on the left is used to refine the search. Filter the results by template type or even tags. This will help you find something that matches your personal preferences. Use the dropdown to sort the results in different ways. If you’re looking for graphics that aren’t overused, try sorting by Newest
Each template can be favourited by pressing the heart icon that appears when you hover over the thumbnail. Spend some time searching through the templates to find one you really like.
Editing The Template
Once you’ve found a template you like select it to load the editor. On the left hand side you’ll see some options for editing text and graphics within the template. On the right side you can change the background image and the colors within the template.
You’ll notice that colour options on the right are limited to certain elements. To edit all the colours and fonts you’ll need to use the options in the left side bar.
To change the text font click the lower part of the text options to reveal a font picker dialog.
Similarly to change the text color, click the small box in the lower right. This will reveal a color picker dialog.
If you want to add more text or graphics to your template, scroll down and use the + Text or + Graphic buttons.
To edit the color of existing graphics, select the Edit button to reveal a settings dialog. From here you can change the graphical shape preset and it’s color.
Adding A Logo
To add some finishing touches we’ll add a logo to the overlay. To do this, find the + Graphic in the side bar on the left (Scroll down if you can’t see this button). Select Upload Image, now select a logo to upload, then crop it.
Use the slider to scale the logo up or down. Use your mouse to reposition the logo by holding left click. Get the logo centred and make as big as possible. Make sure it still fits within the boundary. Select Crop when you’re finished.
Finally place your logo within the overlay. Use the corners to increase of decrease it’s size. Hold left click inside the image to reposition it.
Downloading Your Overlays
Once you’re happy with the design it’s time to download the overlay. Select the Download button shown near the top right.
As previously mentioned this is not a free option, so you’ll need to select a method of payment. You have two choices at this stage. You can pay for just one design, or you can sign up for a monthly fee which gives you unlimited downloads.
If you like the idea of working with templates but want a free method, then check out how to make overlays using free templates.
Creating Twitch Overlays Using AI
AI art is a pretty heated topic these days. One thing is for sure though, the technology will be here to stay. If you’re just getting started as a streamer and want to try your hand at making the overlays by yourself, then some AI tools could prove very useful to you. At Hexeum we choose not to use AI for creating our overlays. However we still think this information might be useful for new streamers who are struggling to improve their stream due to lack of funds.
The tool we’re dicussing is Midjourney, one of the most popular AI art generators using stable diffusion technology. We begin by using the application to generate the background to be used within your stream overlays.
- Head over to the Midjourney home page and select, sign in.
- You’ll then be asked to authorize the application using your Discord account.
- Now go to the subscriptions page and select the Basic Plan (You can also use a free version by using their public discord but the quality is not as good, moreover it’s quite a pain trying to find the image you generated, amongst the sea of other free users generating images)
- You’ll then need to invite the Midjourney bot to your own server
- Once the bot is in your server, go to a text channel start typing the following command. /imagine
- You’ll then need to begin entering the prompts that will generate the image.
- Be as descriptive as possible
- Here are some common prompts that come in handy: photorealistic, 4k, cinematic lighting, ultrareal
- The AI will then generate four different images related to your prompt. If you’re not happy with the results try tweaking the prompts and generating new images.
- Once you’re happy with the results, Select either U1, U2, U3 or U4
- U1 is the top left image
- U2 is the top right image
- U3 is the bottom left image
- U4 is the bottom right image
- The application will then upscale the image, and it will be available to download on the websites dashboard.
Now that you have a base screen background, we reccomend using this and following the steps outlined in the photopea method substituting in your background image where necessary.
Create Overlays From Templates
One great way to quickly make a personalised overlay for Twitch is by editing overlay templates in Photopea. Most templates come in PSD format, there’s plenty of free templates out there on the web. Once you’ve found a layout that you like, you need to download it. Make sure that the package contains the PSD files so you can edit them.
If this sounds like a good way to make a Twitch overlay see the steps below. We’re using our own free bounty overlays in this tutorial.
Opening The Template
Head over to Photopea. Now in the top left click File -> Open. You can now choose a PSD file for edits. Locate the file you want to edit, select it and press Open
Editing The Template
The most common edit is changing the social usernames to match your own. To do this, start by selecting the text tool from the toolbox on the left of the screen. Once the tool is activated, move your cursor over some text, Click it to begin editing.
Colours can also be changed to match your own theme. Select the layer you want to edit. The easiest way to select the layer is by selecting it within the main editor window.
Once the correct layer is selected, select eff near the bottom right, then Color Overlay.
The layer style dialog will now show, allowing you to change the color for the layer. Press Ok to apply the new color.
One problem with using the color overlay effect is that it overwrites any textured layers and creates one flat color. If you need to change layers that aren’t one flat color then use this next method.
With the layer still selected, from the top menu select Image -> Adjustments -> Hue/Saturation
Use the hue slider to change the main colors, and use saturation and lightness to fine tune your changes.
Downloading Your Overlays
When you’ve finished editing the layouts its time to export them. In the top left select File ->Export As -> PNG.
It’s important to select PNG as the file format to maintain transparency values. This makes it easier to place your webcam feed and gameplay behind in your broadcasting software.
Free Template Layouts For Edits
If you like the idea of editing a stream layout template, check out the free designs below. All of them include the PSD file so you can follow our method shown above for editing.
Create Overlays Using Gimp
Video Tutorials
Understandably for some people it’s much easier to learn from tutorials in video format. We have put together a list of extra learning tutorials that cover how to make a Twitch overlay. Each video covers a different application use for creating overlays. If you’re not sure which application or method is best for you, read through each section of our guide. We list the benefits and drawbacks for each method so you can make the best decision for yourself.
Even if you know which application you want to use. We recommend reading through our guide. We cover some more advanced aspects of each software.
Making An Overlay In Photopea
Making An Overlay In Canva
Making An Overlay With PlaceIt
Additional Resources
We put together this list of resources that’ll help you to make a personalised overlay for Twitch. Some resources we may have already covered in parts of this tutorial. We will continually add new resources here that we think can help you out.
Strmaker
Strmaker is a really easy to use application to help you make a customised stream overlay for Twitch. The process is quite streamlined. Simply follow the tutorial and you will have overlays in no time at all. You will need to pay a premium in order to get the watermark removed and the overlays in HD, as well as the background transparent.
Free Resources
Conclusion
There are quite a few ways to make personalised stream overlays. If you’ve got the time to learn new tools, you can start creating some awesome layouts in no time. However the more streamlined ways for making overlays can come at a cost. Additionally the free methods use more advanced tools with steep learning curves. It can take a lot more time creating overlays this way.
Finally, creating overlays from templates whilst quick gives you a lot less room for creativity. If you feel limited by the options for creating an overlay by yourself, consider getting a custom made overlay for Twitch.
