how to make a twitch overlay - completely free

How To Make A Twitch Overlay – Completely Free

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
creating a new project within photopea

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.

Setting Project Resolution in photopea

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

entering a search term on pxhere
downloading image on pxhere

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.

adjusting image size in photopea

If you ever need to adjust the image size again, first select the image layer, then in the top menu select Edit -> Free Transform

free transform layer in photopea

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.

creating a rectangle within photopea

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

rasterizing layer within photopea

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.

selecting layer pixels in photopea

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.

deleting pixels from background in photopea

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 a stream overlay in photpea

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.

creating a stream label overlay in photopea

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

creating stream label overlay in photopea

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.

placing an icon within photopea

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.

color overlay effects photopea
color picker photopea

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.

duplicating layers in photopea

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.

creating overlay template in photopea

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.

Download here.

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

creating a blank canvas within canva

Set Width 1920, Height 1080 make sure that the unit is set to px. Select Create New Design

setting canva resolution

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.

uploading backgrounds to canva

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

placing the background within canva

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

adding shapes in canva

Select the soft edged rectangle to add it to the screen.

rectangles added to canva overlay

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.

canva overlays set up

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 chat overlay in canva

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.

adding labels to canva

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

adding circle shape to canva

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.

adding heart icon to canva

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.

duplicate groups within canva

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.

canva intermission screens

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.

downloading canva overlays

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.

searching for stream overlay templates to create on placeit

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.

editing templates on placeit

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.

placeit template editor options for making and overlay

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.

adding a logo to placeit

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.

downloading files on placeit

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.

placeit pricing structure

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)midjourney subscription plan
  • 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

opening a psd file in photopea

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.

using the text tool within photopea

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.

using color overlay effects in photopea

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.

changing image color using hue saturation

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.

exporting png files within photopea

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.

strmaker

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.

This entry was posted in .

Related Posts