how to make a twitch overlay - completely free

How To Make A Twitch Overlay – Completely Free

Making overlays is a huge step in upgrading your channel’s quality and branding. It doesn’t take long to notice that most of the top live streaming channels are utilizing stream overlays. There’s more than one way to get overlays made for your channel. However, today we’ll show you how to make a Twitch overlay from scratch. Whether it’s for OBS or Streamlabs the process for creating these designs will be almost identical.

There are a variety of overlay maker tools out there that can help you create overlays. We’ve covered all of the best options in depth to equip you with the information needed to make the right decision for your stream.

What Makes A Good Overlay ?

We’ve been making overlays at Hexeum since 2017 so we’ve learned a thing or two about making a well designed stream overlay. Here’s our top tips to keep in mind.

    1. Keep things clean and concise
    2. Use your brand colors and fonts
    3. Convey useful information clearly
    4. Don’t clutter the screen with too many elements
    5. Use recomended graphics sizes
    6. Use stream labels
    7. Use transparent images (PNG) over chroma key technique

How To Make a Twitch Overlay in Photopea & Photoshop

creating overlays in photoshop and photopea

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. However, because it’s paid software, it’s not the ideal solution for most people. Fortunately there’s an alternative to Photoshop that’s also rich in features called Photopea. Photopea is completely free and one of the best ways to make a Twitch overlay.

We’re going to be using Photopea in this tutorial, however due to the similarities in software, photoshop users can also follow along. We’re going to start off by making the intermission overlay screen.

1. Creating The Project

Head over to Photopea. In the top left corner select File -> New
creating a new project within photopea

Set the Width and Height to 1920x1080px (sizes taken from 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

2. Finding A Background

The next step is finding a background image. There are quite plenty of websites with free images available to download. We’ll stick to using Pxhere. They’ve got a huge library of images, a lot of which make great backgrounds for overlays.

Try entering search terms such as neon abstract. Once you find an image you like click on Free Download Original.

entering a search term on pxhere
downloading image on pxhere

3. Adding The Background

In the top left of Photopea select File -> Open & Place. Open your background image. 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 click the image layer, and in the top menu select Edit -> Free Transform

free transform layer in photopea

4. Creating The Cutout

Enable the rectangle tool from the toolbox on the left. Change the corner radius to 15px to create softer 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).

Click and Drag to draw the rectangle on screen.

creating a rectangle within photopea

Repeat this process to draw a smaller rectangle.

Right click the background image layer from the layers panel on the right side and Rasterize

rasterizing layer within photopea

Hover over the rectangle layers thumbnail then Ctrl-Click the layers thumbnail. The layer will now be outlined with a dashed white line.

Now, Select the background image layer and press the Del key.

selecting layer pixels in photopea

The cutout area will now be transparent. Repeat the same process for the smaller rectangle.

deleting pixels from background in photopea

5. Creating The Chat Box

Again, enable the rectangle tool. This time set the draw mode to Free. Start dragging on screen to draw out the chat overlay shape.

Select Fill from the top toolbar and you’ll be shown a color selector. Once you’re happy with the color select OK.

With the chat box layer still selected, change the opacity. Around 35% is a good value.

creating a stream overlay in photpea

6. Creating Stream Labels

Create a new folder by clicking the folder icon from the right hand sidebar. Once that’s done, select the rectangle tool from the toolbox on the left.

Now create a new rectangle in the shape of a label. Then create a smaller similar shaped rectangle and overlay it on top of the bigger one. Change the color of the smaller rectangle to add some contrast.

creating a stream label overlay in photopea

Long click the rectangle tool in the toolbox to show alternative shapes.

Select the Ellipse tool (Squashed circle icon) . 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

To add icons you need to firstly download our tutorial files. Now, from 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

Double click the icon layer and enable Color Overlay from the dialog. Change to a color of your choice using the color picker

color overlay effects photopea
color picker photopea

Duplicate the stream label folder by right clicking the layer and selecting Duplicate Layer. You can now add additional icons for each stream label.

duplicating layers in photopea

7. Downloading Your Overlays

Export your overlay by doing File -> Export As -> PNG.

It’s very important to select PNG. PNG allows transparency values,which allows see through parts in an image. This is required when creating graphics such as a webcam overlay.

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 files, icon pack and background. Right click and Save Link As to choose where to download it.

Download here.

How To Make a Twitch Overlay in Canva

how to make a twitch overlay in canva

Canva is another widely used tool to make Twitch overlays. Its biggest advantage is how easy it is to use. This makes it a great option for those who have limited experience with design. It makes creating overlays a breeze. If you want high quality designs without sinking 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.

1. Creating A New Canvas

Go to Canva. Sign up and create an account. Once that’s done select Create A Design -> Custom Size
creating a blank canvas within canva

Set width and heigh to 1920x1080px. Then Create New Design

setting canva resolution

2. Adding A Background

We’ve previously covered how to find a background. Once you’ve found a background select Uploads from the left sidebar and Upload Files.

uploading backgrounds to canva

Once uploaded, drag it from the left panel onto the canvas. The background we chose had 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

3. Creating The Cutout

Now we will create two rectangles which will serve as the webcam and gameplay areas later on. Expand the Elements section on the left.

Click into the search bar, some preset categories will now show up. Select Lines & Shapes

adding shapes in canva

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

rectangles added to canva overlay

Reposition and resize the first rectangle as shown in the image below.

Now add a second rectangle, position and resize it to serve as a smaller gameplay area.

canva overlays set up

4. Adding A Chat Overlay

Create a chat overlay by adding another 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. Then change 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

5. Creating A Labels Bar

Add a new shape to the scene. Place it below the larger webcam area. The label should be significantly wider than its 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 canvas. We chose a circle. Then position it to the left side of the label.

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

6. 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 your streaming software.

canva intermission screens

7. 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

How To Make Twitch Overlays in PlaceIt (Not Free)

how to make a twitch overlay in 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 much quicker compared with the process of making one from scratch.

1. Finding A Template

Head over to PlaceIt and begin searching for templates that you might like.Search for OBS stream overlays using the search bar at the top.The left sidebar used to refine the search. Filter the results by template type or even tags. Use the dropdown to sort the results in different ways. If you’re looking for graphics that aren’t overused, try sorting by NewestEach template can be favored 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

2. 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

The color options on the right are specific to each element. To edit all the colours and fonts use options in the left sidebar.

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 its color.

placeit template editor options for making and overlay

3. Adding A Logo

To add some finishing touches we’ll add a logo to the template. Select the + Graphic button in the sidebar on the left. Upload Image, select a logo to upload, then crop it. 

The slider scales the logo up or down. Use your mouse to reposition the logo by holding the left click. Center the logo and increase its size.

Make sure it still fits within the boundary. Select Crop when you’re finished.

Place your logo onto a template. Drag the corners to resize.

adding a logo to placeit

4. 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

To complete the download you’ll need to enter payment details.

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.

Midjourney

how to make a twitch overlay with AI
The tool we’re discussing 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 but it’s limited)midjourney subscription plan
    • You’ll then need to invite the Midjourney bot to your own server
    • Once the bot is on your server, go to a text channel and 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 website’s dashboard.
Now that you have a base screen background, we recommend using this and following the steps outlined in the photopea method substituting in your background image where necessary.

How To Make a Twitch Overlay From Templates

One great way to quickly make a personalized 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.

1. Opening The Template

Head over to Photopea.

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

2. Editing The Template

The most common edit is changing the social usernames to match your own.

To do this, enable the text tool from the toolbox on the left. Select existing text within the template to begin editing it.

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 button at bottom, 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

3. Downloading Your Overlays

When you’ve finished editing the layouts it’s 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

4. 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 used 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 personalized 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 custom 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 a number of tools designed to help you make a Twitch overlay completely free. 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 incur a cost. On the other hand, some of the free methods involve learning more advanced tools with steeper learning curves. Making an overlay this way might take some time.

Although creating overlays from templates is quick, it can give you less room for creativity. 

If you’ve gotten this far and realized there’s more work involved in creating an overlay than what you thought, fear not. We’ve got a huge collection of premade stream overlay packages in store. We value your time, that’s why our packs are easy to use, well documented and designed by professionals.

FAQ

Yes! Tools such as Photopea, Canva or Nerd or Die overlay maker, all provide you with the tools to create engaging Twitch overlays from scratch.

    1. Social Handles: This will encourage viewers to follow you.
    2. Webcam overlay: A stylized border for your facecam
    3. Branding: Integrate branding and logos into your design
    4. Sponsors: Add sponsor banners to your overlays
    5. Animation: Fluid animations create a professional image
    6. Subscriber Count: Show off your subscriber goals and progression
    7. Event List: Display a list of relevant events
    8. On Screen Chat: Keep full screen Twitch viewers engaged with a full screen chat overlay
    1. Canva
    2. Photopea
    3. PlaceIt
    4. Nerdordie
    5. Photoshop

Creating animated graphics is a huge step up from designing static elements. For now there are no free tools with a low barrier to entry that we know of. If you have time and money to pay for top software we recommend learning after effects.

This entry was posted in .

Related Posts