Web Development: How to Make Twitch Panels

How to Make Twitch Panels

Final product image — What You'll Be Creating

Setting up your live stream on Twitch? Want to create Twitch panels for your channel? Your panels are located below the stream—this is a customizable space where you can add content for your audience. In this tutorial, we'll walk through how to make Twitch panels in Adobe Photoshop, as well as the basics of putting them to use.

So why have Twitch panels? What are they for? Well, the space below your stream can be a great place to share extra information with your audience, even when you aren't online. Things like your stream schedule, your social media links, your channel's rules, and more, can all go in this dedicated space.

What's best for you and your channel is largely going to depend on your goals! That said, deciding on the best direction can be a little overwhelming.

Placeit is quickly becoming one of my favorite places for inspiration and quick design mockups. It also has a whole bunch of Twitch-related content—from stream overlays to panels. It's great for brainstorming Twitch panel ideas! You can browse designs and customize them, right in your browser—and I don't mean just the text, either. Change colors, move parts of the design, and more! If you're looking for an easy Twitch panel maker, here you go!

And, again, this doesn't end with panels. Placeit has a whole host of fun, colorful, and eye-catching Stream Overlays, perfect for using with your favorite iteration of OBS.

Whether you're looking for inspiration or for an entirely customizable, online Twitch panel creator, Placeit might just be what you're looking for.

Now, let's dig in and make Twitch panels from scratch!

What You'll Need

The following assets are used in this tutorial:

Keep in mind that your Twitch panels should reflect your channel. What kind of aesthetic best suits your stream goals?

1. How to Create Custom Twitch Panel Graphics

Step 1

Let's start in Adobe Photoshop. Create a New Document.

We want our document to be 350 pixels wide—the Twitch panel size will be scaled to 350 pixels in width. This means that, if you create or upload something larger, it's going to be adjusted to this size. In my opinion, it's often a stronger idea just to work with the given size—in this case, 350 pixels.

However, this also means we have some flexibility with height! We could, for example, work with a longer image or something short. It all depends on what information you'd like to share and how you'd like to share it. For example, Twitch info panels might benefit from smaller imagery and more text. A donation panel might benefit from a larger image.

I'm going to go with 350 pixels wide by 125 pixels tall for my smaller Twitch panels.

Select Transparent as your Background Contents.

Once you're happy with your selections, click Create.

Step 2

Notice the gray checkered background in our new document. This is how Photoshop indicates transparency—so, for example, if we saved this image as a transparent PNG, this checkered space would appear transparent and "empty".

I'm going to create a shape that doesn't fill our entire canvas, leaving some of this space transparent.

Let's start out by creating a New Layer.

Go to your Layers panel. If you don't see this panel, go to Window > Layers, at the top of your screen.

Create a New Layer by clicking on the New Layer icon, as highlighted, below.

Note, you can rename your layers by clicking on the layer's name in the Layers panel. I often recommend this, because it helps keep your work organized—especially if you end up with ten, twenty, or more layers!

Step 3

Twitch has both a light and a dark theme. This means that any imagery we use here needs to work both on a light and a dark background. Our Twitch panels can also have transparency, so, again, it's important that visibility is strong both on dark and light backgrounds.

I like to start off by creating a light background and a dark background, so I can easily toggle between the two and test my work. To do so, let's use our two layers. I renamed my layers Light Background and Dark Background.

Use the Paint Bucket Tool to fill each layer with a different color—white on the "Light Background" layer and a dark gray on the "Dark Background" layer.

Not sure how to change your active colors? The foreground and background colors are located in your Tools panel. Simply click on the colored blocks to open the Color Picker and choose a new color.

Step 4

Now, select the Rounded Rectangle Tool, in your Shape Tools. If you don't see the Rounded Rectangle Tool, click and hold on the active Shape Tool to expand this part of your Tools. You'll see you have lots of different shapes to choose from!

With the tool selected, take a look at your Options at the top of the screen. There, you can adjust the corner radius of your rectangle before you draw. This is how rounded the rectangle will be. I went with 25 pixels.

Then, click and drag to draw a shape on our new layer. You can make this shape any color you prefer that works with our light and dark background. I went with a light blue!

You can adjust your shape using the Move Tool (toggle Show Transform Controls on, in your Options, to resize it).

Step 5

Now, let’s repeat this process, but with an ellipse.

Create a New Layer. Then, select the Ellipse Tool.

Click and drag to create an ellipse. Position it on top of our rounded rectangle.

Step 6

I want to merge these shapes together, so they're largely one shape.

To do so, select both of your shape layers—you can do this by holding down Control (on PC) or Command (on Mac) while clicking, to select multiple layers at once.

Once you have both of these shape layers selected, right-click (on PC) or Control-click (on Mac). Choose Merge Shapes from the resulting list of options.

Step 7

After doing so, our shapes have been combined together into one shape, as seen below.

Step 8

I thought it might be fun to try out an avatar here—so I used an avatar maker to create a cute character! You can check it out right here. It requires Adobe Illustrator, but it's super easy to use (and a lot of fun!).

Once I'd created my character, I copied and pasted it into my document—note that it is my top layer. It's on top of the shapes we created earlier.

Graphical content is optional, but can add a lot to how you present your channel. Will you use a logo of some kind? An avatar or character? What do you visually associate with your channel and your work?

Step 9

However, I wanted the character to stay inside the shape. Clipping Masks are just what the doctor ordered for this!

To apply a clipping mask, select the layer. Then, right-click (on PC) or Control-click (on Mac). Select Create Clipping Mask from the resulting list of options.

Note, the art has to be on top of the shape here—we want the artwork to be confined to the space of the shape.

Step 10

Voila! The artwork is confined to the shape, as shown below.

Step 11

Next, let's add some type to our panel, using the Text Tool.

With the Text Tool selected, in the Tools panel, simply click on your canvas to start typing. Your text will automatically be placed on a new layer.

I used the Philadelphia Signature font, and I decided to make this one a Twitch About Me panel.

Step 12

Next, let’s add a drop shadow to our combined shape.

To do so, select the layer containing our light blue shape. Then, click on Add Layer Styles, in the Layers panel.

From the resulting menu, choose Drop Shadow.

Step 13

Here are the Layer Style options—and the values I decided to use.

The Blend Mode is set to Normal—it displays as a normal, solid color.

The Opacity is 100%.

Adjust the Angle, Distance, Spread, and Size to your liking. I chose to keep my Distance at 3, Spread at 100%, and my Size at 2.

I recommend toggling Preview on, so you can preview how these values affect your work. In my opinion, that's the best way to learn the visual impact of these values on your work—see a live preview, and give them a try!

Step 14

And here’s our drop shadow, as shown below!

Notice, in my layers, how we see "Effects" and "Drop Shadow" displayed under the layer where these effects have been applied. Double-click on this to edit your Layer Style.

We can also toggle their visibility on and off by clicking the eye symbol beside each word, just as we can toggle visibility on the entire layer.

Step 15

Let’s try adding another effect to our work. I’d like to add a subtle gradient here.

First, I’m going to create an additional clipping mask. You could create a new layer, then follow the same process as before—right-click (on PC) or Control-click (on Mac), then select Create Clipping Mask.

However, if you have the shape layer selected and you create a new layer, it’ll automatically make it a clipping mask, sandwiched between our other clipping masks. Convenient!

Step 16

Select the colors you’d like to use. I went with a soft, light blue, and a light purple. Our gradient will gradually transition from this first color to the second.

Then, use the Gradient Tool on our new clipping mask. Notice how the gradient is confined within the shape.

Step 17

As a finishing touch, I decided to change the color of my avatar’s shirt! I used the Paint Bucket Tool to easily fill this color.

Remember, when using any tool, make sure you have the correct layer selected!

Step 18

Once you’re happy with your work, remember to Save!

I recommend saving a copy of your work, as well, so we can make multiple panels, without worrying about overwriting our original file. For example, you might want an About Me Twitch panel, a Discord twitch panel, or maybe something for your YouTube channel. We can essentially save our original as a Twitch panel template—and use it again for other panels.

Some of your panels might benefit from looking uniform. In this case, creating additional panels may be as simple as editing your text. Let's start there!

First, I copied my “About Me” text layer. You can drag the layer down to the New Layer icon to easily duplicate layers—or right-click (on PC) or Control-click (on Mac), and then select Duplicate Layer.

To edit a text layer, simply click with the Text Tool. Then, I replaced my text. Voila! Now I have a second panel.

Step 19

But some of your panels might benefit from more variation than a text edit. Maybe you want a follow Twitch panel, or something that encourages viewers to subscribe to your work elsewhere.

In this example, I’ve created a variant of our work for a YouTube channel.

You can use the Move Tool to easily move and rearrange your contents. I wanted this panel to stand out from the others, so I used a social media icon to further visually communicate that this streamer has a presence on YouTube.

Remember to Save As—save copies of your work, instead of overwriting the original!

Step 20

But let's say we really want to mix things up. Maybe we want to take the Twitch panel we've designed and make something quite varied from it. Don't forget to Save before you continue—again, it's a good idea to save a copy!

Let's adjust our canvas size. To do so, go to Image > Canvas Size. Select Pixels as your unit of measurement (you may, for example, see inches or centimeters, based on your default settings).

Remember, our Twitch panel dimensions are deliberately set at 350 pixels wide—this is what Twitch will resize our work to. So let's leave the width alone. For the height, however, let's give our work some more space. This panel will be larger than our others.

I changed the height to 260 pixels.

Step 21

With my larger canvas size, I rearranged and revisited parts of my design. For example, I went back and left my ellipse and my rounded rectangle separate. I used the same gradient colors.

Since this panel will vary more than my others, I decided to use it for my Twitch donation panel.

Step 22

Remember our Drop Shadow?

This time I decided to try out an Inner Shadow—this is another Layer Style, and it works almost the same way! You can find it under Add Layer Style, in your Layers panel, like before!

This layer is a white rounded rectangle with the Blending Mode set to Color Burn. This creates an overlay that gives the inside of my colored rectangle that inner shadow. Give it a try!

Unfamiliar with Layer Styles and want to know more? Check out this tutorial! You can do some really cool things with Layer Styles.

Layer Styles

What Are Layer Styles?

Monika Zagrobelna

Step 23

Finally, I wanted some cute finishing touches. Have fun with your Twitch panels—consider adding graphics, type, and colors that best reflect you—your stream, your personality, and your channel!

I used these heart-themed icons and the Knicknack font to add some extras to my panel design.

Again, keep in mind that the background here will be transparent!

Make sure to choose Save As, to save copies of your work! Don't overwrite your original or variants of your design!