Then, we need to selectively merge our layers. The stream focus itself—we have to, of course, allot space for the focus of the stream itself. Similar to our original polygons, I created a New Layer, in a new folder (I want to keep the different parts of my layout organized). Again, the color will "stay" in this area, because we have Lock Transparency on in our Layers panel. You can Lock Transparency in the Layers panel, as shown below. Below, I've selected Most Recent Follower, because that's the information I'd like displayed. As you might have guessed, I used the same process again to create a gradient blue line beneath this long black line! Daisy is a designer, illustrator, and developer. Make sure you have Streamlabs OBS installed. The video below shows you what values you'll need to put into marked boxes, If you're concerned about the safety of this plugin, https://github.com/univrsal/input-overlay, Video link, since vimeo embedding is broken, https://github.com/univrsal/input-overlay/tree/legacy/presets/submitted, If you're on a fresh installation of windows or you don't play any games there's a high chance that you don't have the Visual C++ 2015 Redistributable installed. There are lots of things we could do with our stream overlay—and the right choice is going to depend on what you'd like to do. You can now add a widget on your stream which lets you keep a record of the ELO points while competing at Valorant’s Riot Mode. This is handy if I want to exclusively stream Photoshop and nothing else, for example. #3 Placeit Overlay Maker Placeit overlay templates. I used the Text Tool to write the social media handles, and then I copied and pasted some social media icons into my layout. Open GeForce Experience. Take a look through the list, however! Have a logo, signature colors, and a consistent aesthetic—that's not to say you can't change it up, but consistency can make for a more cohesive, visual experience. Once you've selected your image, click Done. If you enjoyed this tutorial, here are some others you might enjoy! This leaves us with two copies of the same three polygons. Streamlabs OBS is only available for PC, at this time. Let's add a space for our subscriber goals, too! Click Done when you are happy with your selections. Merge specific elements so they no longer have layered components. This is just a taste of what you could create and how you could create it—good luck with your stream overlays! Follow the same steps with any colors you prefer! Click the cogwheel button at the top right to go to the app’s settings. Restart your system. Design, code, video editing, business, and much more. Our New Document needs to be 1920 pixels wide by 1080 pixels tall—this is going to be the size of our total visible area. For example, give your goal a title, set the amount of your goal, add a starting amount, if you like, and an end date. In the example, below, I've selected the transparent PNG that contained our three black polygons. We want to Add a new source instead—give it a name, and click Add Source. The Windows Game Bar onscreen overlay is not compatible while playing in Exclusive Fullscreen, but is functional in Windowed Fullscreen and other Windowed Modes. For this tutorial, I'm going to include the following in my layout: I decided to start off with some content areas for my on-screen viewer interactions. Now, we'll see a sample image displayed within this space. We want three copies of this layer in total—one for each of our planned interactions. OBS has far more support for third-party plugins at its website than XSplit’s proprietary interface. Cool Twitch Overlay Maker with Webcam Frame Layout 5. Name yours whatever you would like! You'll need something that makes it available as an Xinput device, eg. Again, this is the same process as the previous line. Ever wanted to make your own live-stream Twitch overlay graphics from scratch? It's fun to have a lot of interactive things on screen, but make sure to keep the emphasis on the focus of your stream. I'm very happy to use the software you've created. The Home of Twitch Overlay & Alerts Since 2014 Over 150 overlay templates, alerts, panels, and stream starting & brb screens for use with OBS, Streamlabs & Stream Elements on Twitch, YouTube Gaming, and Facebook. Now, Duplicate our merged layer, using the same process. Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. First, we have our graphics or media. I positioned mine on top of the corresponding black polygon—the one that says "new follower". That's because we haven't defined any Sources. Hopefully, this has given you a taste into some of the possibilities! First, make sure to remove or hide any test content, like names or pictures that you put into your layout, just for example purposes. OBS Studio alone, for example, doesn't keep track of your new followers. It adds two new source types to obs: Input Overlay and Input History, Russian installation video by RashiDushka86, Russian installation and showcase video by alexdubovyckvideos. I like to use this if I'm using more than one program at a time—for example, if I want to share both Photoshop and AfterEffects (my entire screen). However, we're going to start off with Image, from the list of possible sources. time ago I got this plugin ... and had a template that included numbers. This could be anything from static graphics to animated elements, interactive text that's influenced by viewer interaction, and more. Just like when we added an Image, we want to select Add a new source instead to create a new source. Some streams have a lot of supplemental, visual content on them, and others prefer to keep things minimal. Familiar yet? The choice is yours! Make sure the content is legible. Save this content as a PNG file—so the background stays transparent. Handy! Go to the General tab. But, we're not done yet! © 2021 Envato Pty Ltd. Now, let's take our work and discuss how to add a stream overlay to OBS. This is a great OBS overlay template download specifically designed to encourage donations and subscribers. Did you read the plugin post at all? Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too! If you'd like to do so, too, paste your image into your document. Start by adding a new source. Window Capture does what it sounds like—it captures a specific window on your computer. Don't worry about the progress bar itself, just yet—just make sure there is a space for it, and that it visually matches the rest of our composition. From the resulting menu, select Duplicate Layer. Once you're happy with your settings, click OK. Repeat this process twice, so that we have text above all three polygons. Each click is a point in your selection. She's been working with the Adobe family of software for over fifteen years, and she has extensively written on design, illustration, business, and more. Follow the same steps to create the blue gradient look behind our black content spaces. An extra tip—hold Shift while drawing your shape to create perfectly straight lines! Notice a pattern here? Collaborate. Input Overlay is a small plugin for obs studio that shows keyboard, mouse and gamepad inputs on stream. Now, let's dig in, talk about how overlays work, and make one of our own, from scratch! Lead discussions. For example, maybe you don't want a logo—maybe you'd prefer an avatar. Chat window—you could also display your channel's chat on the stream itself. Then, we have Game Capture. Pure Valor is a Valorant Stream Package compatible with Streamlabs OBS, OBS Studio, and xSplit for streaming on platforms like Twitch & YouTube Gaming. This could be anything from static graphics to animated elements, interactive text … For example, decorative fonts are often best suited to titles and headers as opposed to things like body copy or smaller text. In this tutorial, we'll walk through the basics of creating a stream overlay, for your custom Twitch live-stream, in Adobe Photoshop. Your decisions on these points should be influenced by your goals. When I'm working on an overlay, I often like to insert sample content, just so I can get a feel for how things look. If you're looking for extra help in customizing your stream and your channel, you might want to check out Placeit! Here are the resulting popup options. Personally, I'm not a huge fan of this, because it takes up a lot of real estate, but it can also be a fun way to capture the chat with the video. It's located under Widgets. Experiment with different visual directions! What is "Monitor horizontal/vertical center"? Change them to best suit your design. Follow along with us over on our Envato Tuts+ YouTube channel: The followings assets are used within this custom Twitch overlay tutorial: Take a moment to consider what imagery you might like to use in your Twitch overlay! For example, I have interactive lighting in my room, and I've used an animated carousel, on screen, to showcase a small selection of my artwork. It's a user-friendly stream overlay maker, "stream starting soon" overlay maker, and more! I want to note that I have not received any compensation for my recommendations here—these are my genuine thoughts and opinions, based on my experiences of streaming and how I make my own overlays. There are literally NO instructions whatsoever, and trying to find the image file it requests (even reading the comments) is infuriating so... after some searching I find it... except there is no mouse/wasd option. Here's a list of some things you might want to consider, for your overlay: Viewer Interaction—this would include things like the most recent follower, most recent subscriber, and most recent donor. This yellow and blue themed overlay offers a … An example of this would be, Adobe Photoshop, Illustrator and InDesign. Unlike the other apps, OBS doesn’t throw up an in-game overlay. I began by creating a New Layer. First, check out the Display Capture. Use the Gradient Tool to apply a gradient to our bottom polygons. It's hard to see, below, but I've typed out "new follower". If things are difficult to read or understand, it might defeat the purpose. As part of our Super Charged collection, you can install this into OBS Studio, Streamlabs OBS, and StreamElements in just a few clicks. Social Media—you may want to make your social media accounts visible on the overlay itself, so viewers are further encouraged to interact with you. We have so many options when it comes to our Stream Labels! Now, Lock Transparency on our bottom set of polygons. Under the panel that says Scenes, click on the plus sign to create a new scene. This captures your entire monitor. 7. Let's take a look at some other common sources that you might want to use in your stream layout. This is a dark-themed overlay designed for Twitch users, with a bright red frame. Use this app to make your own custom overlay for Twitch, BeamPro, HitBox and much more! I really like your plugin. What about our notifications? Now, as we did with previous sources, click and drag to adjust and align your subscription goal bar. This is often where the gameplay is shown, if it's a gaming live stream. These values are used to let the plugin calculate the direction of your mouse movements. Next, duplicate this layer. It includes icon … If you’re using Obs Studio to record a game or a tutorial, you can give a command to start recording the moment you launch an app. I'm trying to keep the visuals here consistent. No more folders, no more multiple parts to each component of my layout. (Windows only) Since this plugin hooks into input do not open two instances of OBS, because it will result in stuttering input. Placeit is much more than just a tool for making twitch overlays. The premise behind using these tools is similar. Design like a professional without Photoshop. Launch App Then, click Add Source. Goals—you could display things like your donation goal, subscriber goal, or follower goal, for example. If you're unsure of how to import images, please return to Step 2. Add a new source instead of working with an existing one, and give your source a name, for your reference. Use the Move Tool to adjust their alignment—if you're following along with me, we want it to look as if one is "on top of" the other, as shown below. I can define it as my video source, and then preview my camera, within Streamlabs OBS. Export directly to PNG. Create your overlay with our Overlay Maker app! Then right-click (on PC) or Control-click (on Mac) and select Merge Layers from the resulting menu to combine them. I chose to work with 640 pixels wide by 480 pixels high as my general basis (for example, create a new document at this size, paste it into your document, and then scale it using the Move Tool or Free Transform). whichever you prefer. I decided I wanted to add some additional decorative elements to my layout. This might sound really complicated, but it's surprisingly simple! Then, fill the space with the color of your choice, using the Paint Bucket Tool—I went with black, again. But our scene doesn't have anything in it yet! We don't have to stick to straight lines—in fact, our layout uses some fun diagonals, so I thought it might be fun to create a bottom line that plays into this. Here's a look at my Streamlabs OBS, after I've imported all of my imagery. Everything you need for your next creative project. It adds two new source types to obs: Input Overlay and Input History How does it work? Never miss out on learning about the next big thing. Since the tool works in the background, it doesn’t bring up any overlay in the middle of the gameplay. So, how do you know what to include in your overlay? I then used the Paint Bucket Tool to fill this space with black. Select Image as the source, and then click Add Source. You can name your layers by clicking on the name of the layer itself, in the Layers panel. Then, select the image layer and right click (on PC) or hold control and click (on Mac), and select Create Clipping Mask from the resulting menu. Get access to over one million creative assets on Envato Elements. OBS Stream Overlay Generator Featuring a Space-Theme 4. Now, let's create a space for some social media content. If you do need two instances run one instance as 32bit. Be cohesive. The only Russian videos are the ones labeled "Russian", so I hope that didn't surprise you. From the resulting menu, select Merge Layers. Share ideas. ... (we prefer OBS). I moved it further up so it's a bit easier to find. Next, I decided to add a space for a web camera. Looking for something to help kick start your next project? There's also an English version right above those. There's so much content to customize, and it's super easy to use. Windows 10 Gaming Features. That took a while, didn't it? It includes a place for top donations, recent subscribers, and your other social channels. That opens up the following menu, as shown below—select Stroke.