Web Development: How to Make a Halloween Twitch Overlay

How to Make a Halloween Twitch Overlay

Final product image — What You'll Be Creating

Want to learn how to make your own Twitch overlay for Halloween? In this tutorial, we'll walk through designing a Twitch overlay, step by step, with a fun Halloween Twitch overlay theme. Take these ideas and create a horror twitch overlay for the season, or try a cute gothic Twitch overlay with a fun aesthetic. What would you create?

To Create This Twitch Stream Overlay, You'll Need:

We're going to create our Halloween Twitch overlay in Adobe Photoshop. Here is a list of the assets we'll use as we walk through how to make a Twitch overlay:

30 Halloween Icon Set
Haluween Fonts
Lost Village Font
Social Media Icons
Sample Image as a temporary webcam placeholder
Screenshot from your favorite game as a placeholder (we'll use a Minecraft screenshot in this demonstration).

You're welcome to use these assets, or you could use any artwork or photos of your choice. The concepts covered in this tutorial will work with any content you prefer.

Looking for an Easy Twitch Overlay Creator?

Designing a Twitch overlay can be a little intimidating, especially if you're new to design software (or you don't have software at all!). A Twitch overlay template can be a great choice, but what if you want something custom?

Placeit is an awesome choice for an online Twitch overlay creator. Choose from a number of design aesthetics, from Twitch horror overlay designs to retro inspiration and much more. The best Twitch overlays are the ones that match the channel's content and vibe, so why not customize one of your own?

placeit twitch overlay maker — Create and customize a Twitch stream overlay online with Placeit, no software required.

All you need to do is choose a design, and then start customizing. This is a lot more than just changing colors, too. You can click and drag to move design elements, upload and import assets, add text, and more. To top it off, this content is licensed for commercial use.

Choose from a large selection of cool Twitch overlays that you can customize, all from the comfort and convenience of your browser. Check it out sometime; it's free to try Placeit.

Now, let's dig into how to make your own Twitch overlay in Adobe Photoshop, from scratch.

1. How to Make a Twitch Overlay Design

Step 1

Let's begin with a new document in Adobe Photoshop.

Go to File > New to create a new document. In this demonstration, we're going to work with a document size of 1920 pixels wide by 1080 pixels high. If you'd like your overlay to be a different size, use those dimensions instead.

Once you're happy with your settings, click Create to continue.

Step 2

Now that we're in our new document, let's start by creating a new layer.

Open your Layers panel. To do so, go to Window > Layers.

Create a new layer by clicking on the plus sign at the bottom of the Layers panel, as shown below.

Optionally, you can also name your layers, for organizational purposes. To do so, double-click on the name and type in the new name you would like. Otherwise, your new layers will be called "Layer 1", "Layer 2", and so on. This tutorial will have named layers, to make things easier to understand. This first layer has been called Black Bars.

Step 3

With our new layer selected, select the Rectangular Marquee Tool

Then, draw a large rectangle on the right side of the canvas by clicking and dragging. This space is where our main footage will be in our custom Twitch overlay.

Once you've drawn that selection, go to Select > Inverse. This will select the opposite of our rectangular selection.

Step 4

Next, with our selection still active, select the Paint Bucket Tool.

Make sure your Fill Color is black. Then, use the Paint Bucket Tool on our selection. The result should look like the example, below: the top, left, and bottom all have a black bar.

Step 5

Next, create a new layer, just like we did before. In this demo, we'll call our new layer "Purple Stripes", and we'll use the same process again.

Use your Rectangular Marquee Tool to select a long, rectangular shape. Then, use the Paint Bucket Tool to fill this shape with a dark purple color.

Step 6

Then, select the layer and right-click on PC or Control-click on Mac and select Duplicate Layer. This will create a copy of the layer we just drew a purple rectangle on.

Using the Move Tool, click and drag to move this second rectangle over, so we can see them both.

Then, we're going to repeat this process, multiple times.

Step 7

Copy and move your layers, as we did in the steps above, until you have a full row of purple rectangles, as shown below.

Rather than having a large collection of layers, we can merge them down into one layer. Hold down Shift while selecting your layers, to select more than one. Then, type Control-E on PC or Command-E on Mac to merge your layers.

Step 8

Next, let's rotate and resize our work.

With the Move Tool active, toggle Show Transform Controls on. This is an easy way to Free Transform our work.

Using the resize handles, click and drag to scale and rotate the purple rectangles. Below is an example, but you could position your rectangles any way you prefer.

Step 9

With our layer selected, right-click on PC or Control-click on Mac, and select Create Clipping Mask. This confines our purple rectangles to the black area we created earlier.

You can also lower the opacity of this layer, in your Layers panel. In the example below, the opacity has been lowered to 46%, so they have a more subtle appearance.

Step 10

Next, let's use this process again. Start with another new layer. I called mine "Bottom Purple Bar", but any description you prefer will do.

This time, select the Polygonal Lasso Tool. Click to create points that will draw your selection. Our goal is a selection similar to the example one, below.

Once you've made your selection, fill it with a purple color, using the Paint Bucket Tool.

Step 11

Let's also try this in the upper left-hand corner. Again, the process is the same.

Start with a new layer.
Use the Polygonal Lasso Tool to make a triangular selection.
Then use the Paint Bucket Tool to fill this selection with a purple color.

The difference here is: notice where this layer is positioned, in our Layers panel. This time, it's behind our black bars, instead of in front of them. To reorganize your layers, click and drag them in the Layers panel. If, for example, we put this layer on top, it would display on top of our black bars.

Step 12

We can also use these concepts to create other parts of our Halloween Twitch overlay. As an example, let's create some boxes at the top of our Twitch stream overlay that we can use to display information like the latest subscriber, donation, and more.

Create a new layer. Then, use your Rectangular Marquee Tool to draw a rectangular shape. Use the Paint Bucket Tool to fill this shape with a purple color. Sound familiar? We can use these same techniques in so many different ways.

Repeat this process until you have as many rectangles as you prefer. I kept the purple rectangles on a layer below the black rectangles, so they have a stroke-like appearance. Remember, you can also copy and paste your layers, as we did above, to speed up the process!