No products in the cart.
- 7 Dec
How To Design Twitch Overlays Using Glorify
- April 25, 2023
- by Liam Doherty
We recently discovered Glorify and wanted to test out some of the features they had to offer. Despite Glorify being streamlined and branded towards helping E-Com brands create content, we wanted to try out their features and see if we could make an overlay for Twitch. Turns out we can ! The best part about the whole process is that it was absolutely free. We’ll show you the steps we followed to create these designs. Using these step you’ll be able to make your own personalised overlays in no time at all.
What We're Going To Make
Here’s the end result from the time we spent designing in Glorify. We spent less than 20 minutes creating this. Having never used Glorify before we found the layout and interface pretty intuitive especially if you’ve used any design software before. In this tutorial we used one of our free stream backgrounds which we’ll give you access to further into the tutorial. As you can see this is a typical intermission screen layout. The screen has a main webcam area, a chat box area and a couple of stream labels to display important engagement information.
Steps
If you encounter any difficulties using the tools or navigating the application, check out our helpful tips section.
Head over to Glorify and begin by creating your account. Once created, sign in and navigate to your dashboard. From here you can select Create Design from the sidebar on the left.
From the new dialog make sure Quick Start is selected on the left hand side. Now enter the dimensions 1920×1080 and select Add to finish creating a new canvas. (Dimensions taken from our graphics sizes guide).
Hover over the image icon from the toolbox on the left then select Upload Image. The image we’re uploading is one our free stream background images. You can also download this image (See resources section for download) if you want follow along with this guide.
Resize and reposition this image once it’s been added to the canvas. To do this, begin by selecting the image in the canvas. Now from the right side properties section, select the Edit tab. Scroll down to the Position & Size section and enter 1920×1080 for the Width and Height. Then set X and Y to 0. This will set your background image to cover the canvas, and centre it. Keep in mind we’re using an image with 16:9 aspect ratio. If you’re using a different aspect ratio you may have to increase the width or height to ensure the image covers the whole canvas.
Now select the Square tool from the left hand side bar and start dragging it over the canvas. This will be the starting point for our webcam frame.
Position the square by holding left click within it and moving around the canvas. Resize it by holding left click on the corners. In our case we have manually set the size to 1280×720 and we’ve also softened the corners with a value of 20.
Change the squares colour to green (Used for chroma key when setting up overlays in OBS). Select the colour icon within the edit tab. This will display the colour picker menu. From here set the colour exactly to 04F404.
Within the same edit tab select Border to add a border to the green rectangle. Set the thickness to 7 and change the colour to something similar like the colours used in the background image. You can get the exact colours from your background by selecting the colour dropper icon and then selecting anywhere within your canvas.
Time to add the labels bar beneath the webcam frame. Select the same square tool from Step 5 and drag a long but short shape. Change corner softness to 20 and also change the colour to the same colour used on the webcam frame.
Now duplicate this labels bar by right clicking it in the canvas and selecting Duplicate. After duplication, scale it down slightly by holding left click on one of the corners. Make the width much smaller also by holding left click on the side of the bar. Change the colour to a darker tone of red. The purpose of this duplicated shape is to create an area in which stream labels can be inserted.
Duplicate this smaller darker shape again and move it to the right side of the labels bar. The image below is how your scene should now look.
Now we can add a couple of icons to represent the stream labels data type. We’re using the icons available in our free resources pack. Upload the icons using the same process as Step 3. Once the icon’s have been added to the scene, resize and position it on the left hand side of the labels bar. The colour should also be changed to white. Repeat this process and add a different icon to the right hand side.
Now we’ll add another rectangular shape. You’ll use this area later to add chat to your stream. Once again select the square tool shown in Step 5. Drag within the canvas to start drawing a shape. Set the corners smoothness to 20. Position the shape to the left of the webcam frame.
With this new shape still selected, set the colour, and also change the opacity. The opacity is set to the right of where the colour is set. We’re using a value of 25. We’ll also add a border with a thickness of 3 and a lighter shade of red.
Let’s finish off the design by adding your logo. Once again select the Upload Image button used in Step 3 to upload your gaming logo. Once added to the scene reposition it over the chat box frame. Your overlay should now have the same layout as shown above. If there’s something missing, double check that you’ve followed every step correctly.
The final step is to export the overlay. Select Export, ensure file type is PNG and select Download.
That’s all there is to it really. We found the tools really intuitive and easy to use. It certainly streamlined the process of creating your own personalised overlays from scratch. If you wanted to, it would be entirely possible to create all the overlays for your stream using this application. Considering the fact that it’s completely free, it makes a great alternative to paid solutions that already exist for creating overlays.
Resources
Throughout this tutorial we used a few different resources to help us in creating the overlays. We’ve put those specific resources into a downloadable file so you can follow along with the tutorials. We’re also going to include any other resources we think could help you in making your overlays with Glorify.
Useful Tips
Here’s some tips to help speed up your workflow in Glorify.
Zoom
Hold Ctrl whilst scrolling Mouse Wheel to zoom in and out on the canvas. You can also use the Zoom in and out buttons for smaller zoom increments.
Panning
To pan horizontally hold Alt whilst scrolling Mouse Wheel. To pan vertically simply use your normal Mouse Wheel. There’s also the ability to enable a pan tool for more accuracy. Select the left hand side bar within Glorify for this tool.
Layers
Sometimes we lose where certain layers are. The best thing to do is to check your layers tab. From here you can organize or your layers. Note that if a layer is shown below another layer in the layers tab, it’s reflected in the canvas. So if you’ve lost track of a layer, double check in the layers tab to make sure it hasn’t been accidentally deleted or placed below another layer.
We found that we kept accidentally selecting the background layer and moving it. To stop doing this, you can lock the layer. This means that it’s not selectable on the canvas and can’t accidentally be moved. Simply toggle the lock icon to lock or unlock a layer from within the layers tab.
Conclusion
It’s always an interesting time trying out new software. It’s even more enjoyable when you can achieved the results that you want. We often try to find different ways for free that you can make overlays and share it with you. So we’re really glad that we found Glorify, as it did both of those things without any issues. And as mentioned before, it’s completely feasible that you’d be able create your whole stream layout using Glorify. We recommend at least giving it a go as there aren’t many free tools that make it easy to create stream designs.
