WHAT I WILL DRAW:

WHAT I WON'T DRAW:

you accept these terms when opening communication for services:

these terms were last updated 03/23/2024.

quickread font guide for those who don't want to read word-for-word:
highlight will be things to click; code will be dimensions to paste; bold will be reference words; italics will be notes (:

to start making an overlay, go to streamelements > streaming tools > overlays, [ or click here ] and click on new overlay.

the editor will open in a new tab. select the size you'd prefer to work in ( i recommend 1080p for the best quality with my overlays ).
click start to continue.

click the plus sign in the bottom left corner, then static/custom > add an image. this plus sign will be the basis for adding any content to your overlay, so be sure to look at what options are possible!

we'll start with the underlay, first. click set image then upload from the image gallery that pops up. even though we're working with the underlay first, you can save some time by uploading both the underlay and the overlay at the same time. you'll want to hover over the underlay and click submit above the image. then, you'll want to set the resolution. click position, size and style and enter 1920 in the width and 1080 in the height ( if you're using a different resolution, then follow those numbers in the correct ratio ).

next up is setting up the chat box. click on the plus sign > stream tools > your stream's chat.
PLEASE NOTE: these upcoming settings are a suggestion at best, i recommend messing around with the settings to find what works best for you. to make the background of the chat transparent, click custom from the theme setting. you can opt for the messages to disappear after a set time, or stay permanently. there's also the message delay option, and the ignored chatters option. my preferences are shown above.
next, we'll work in the position, size and style section. my recommendation is a width of 470, and height of 640. the top and left section can be finicky, so i usually use the arrow keys to move it into the place i like best. mine are set at 32 on the top, and 1415 for the left.
and finally, the text settings section is where a lot of trial and error comes in. there's plenty of fonts to pick from, and text colors too. usually a font size of 19 looks best in most fonts, but will obviously vary depending on the font selected. i recommend using the supplied fonts, but there is an opt-in for custom fonts, so try it out! to test out your font settings, you'll need to send messages through the chatbox in your streamelements obs program chat widget.

for the overlay, it'll be much like the underlay, sans the uploading step. plus sign > static/custom > image and then set image. hover over the overlay, and then click submit at the top. it'll be 1920 for the width and 1080 for the height. you're almost done!

now, let's move onto labels. this makes up the last of the work in the streamelements overlay editor. i left the labels pretty ambiguous so you can use whichever ones are most prevalent to your channel. my suggestion would be: latest follower, latest subscriber, and latest donation. you're also able to keep the "latest subscriber/follower/etc" header above the username text so it's a bit more understood which one is which.
PLEASE NOTE: these upcoming settings are a suggestion at best, i recommend messing around with the settings to find what works best for you. under the settings section, you can elect to keep the "latest subscriber/follower/etc" text before the {name} text, but you MUST keep the {name} part, or else the label won't work.
under the position, size and style section, i recommend the width set to 330, the top at 50, and left at 68. these settings will of course change with different fonts.
and lastly, the text settings section, it's much like the chat settings from before. various fonts and colors can be set, and i recommend once again to test things out and see how you feel about them. i've found generally around 50 as a font size works well if you add text scrolling, at 4 speed, so longer usernames don't get cut off and look clunky.

now, if you'd like to keep the "latest subscriber/follower/etc" part of the labels, there's an important part to separate the header text from the username ( unless of course you want it all on a single line, which then i heavily suggest using text scrolling ). after the latest subscriber: part, put a <br/> ( <br/> is a line break in coding, btw! ) before the {name} part. the space is optional, so it'd look like: Latest Subscriber:<br/>{name}
PLEASE NOTE: these upcoming settings are a suggestion at best, i recommend messing around with the settings to find what works best for you. follow the same steps of plus sign > labels > then which ever label you'd like, and use the "latest" option.
under position, size and style, i found a width of 330 will look best. 37 from the top, and 539 for left. finally, under text settings, starting with a font size of roughly 37 and under will keep your label from going into three lines of text, instead of our desired two lines. again, your font options will change this size, so mess around until you're happy (: i also recommend using text scrolling at a speed you like best, and you can test your text by replacing the {name} part with a long username as an example ( twitch allows for up to 25 characters in a username ), BUT DON'T FORGET TO CHANGE IT BACK TO {user} IF YOU DO THIS!

now, you're set with the basics! you can use the overlay as is, but there's still a ton you can add to it. i recommend having as many browser source options on your overlay to keep your source section tidy and easier to manage, but it's purely up to you. if you need help getting your overlay into streamelement's obs, but don't want to add anything additional, skip to the next section

the first thing you could add to your overlay is an alertbox. instead of having the browser source in your obs sources, it can be managed with a lot of customization through your streamelements overlay. i plan on making matching graphics for this overlay, and will make a tutorial on alert boxes then (:
per usual, start with the plus sign > alerts > alertbox. i recommend looking at all the options, but otherwise it's already set up for you ( many people actually keep these defaults until they can get their own graphics, even i use still them, haha ).
PLEASE NOTE: these upcoming settings are a suggestion at best, and i also recommend messing around with the settings to find what works best for you. go into position, size and style, and the width will be 525, the height being 500. the top will be 170, and finally, the left is 440. the size of your graphics will matter, so be sure to experiment.
to send a test action to your overlay, you can use the emulate button ( the bell and closest button to the plus sign ). this can be very useful for all sorts of randomly generated "events" like a follow, a subscriber, a raid, and a whole slew of other cool stuff. we'll send a test action just to check our positioning.

a fun suggestion to have: kappagen, or otherwise known as an emote wall. when events of your choosing happen, you can control what emotes, how many, and more show up in an explosion.
use the plus sign > alerts > kappagen to set it up. you'll want this to be on top of everything else in your overlay, so they have no issues displaying. make it the entire size of your overlay (or not, up to you), for instance, we're using 1920 by 1080.

those are my two suggestions, but there's tons of other things to mess with. you can also insert your own custom widget using html, css, and javascript ( plus sign > static/custom > custom widget ), so the possibilities are pretty much limitless. the next section will be getting your overlay from the editor into your streamelements obs. if you already know how to do so, that's all i have left, so kudos for knowing! i'm proud of you (: you'll want to look at the last gif for help with the sizing of your stream sources ( like your games or art programs ).

you're at the home stretch! if you haven't been hitting the save button, now is the best time to before we import the overlay into obs. in the same header as the save button, there's a chain link button. you'll want to click it, and it should give a confirmation in the bottom right corner.
now, in streamelements obs, you'll be clicking the plus button ( not the one in the streamelements overlay editor ), then select browser for your source. you'll want to make a new one, and feel free to name the source whatever's best for you ( i usually just call it overlay ). in the source properties, delete what's in the URL box, and paste that link in. for width, enter 1920, and the height will be 1080 ( if you're not using the default resolution, be sure to enter your details instead ). click ok to import your overlay successfully!

now that your overlay is done, you need the most important part of the stream: your streamed content! if you're using the overlay's intended size, 1920 by 1080, these dimensions should be helpful. PLEASE NOTE: these upcoming settings are a suggestion at best, i recommend messing around with the settings to find what works best for you. we'll start off by using the plus sign > window capture or game capture > then name your source accordingly. from there, select your desired program from the list under window ( some games/programs need to be open to capture/show up in this list ). finalize your choice with ok.
we'll have to resize your selected source next. the next set of numbers will work well with the 1920 by 1080 resolution, but anything other than that will require testing to get it right. right click on the source, and click transform > edit transform. we start with the left or x coordinate on 24, then 198 in the top or y coordinate. the width will be 1360, while the height will be 770. it'll be important to use these same settings on anything you want to show up under the overlay, and i'm sorry the numbers aren't easier to remember, haha. to finish, drag the source underneath your overlay, and you're set!

i'm hopeful that this guide was everything you needed! this is my first time making a tutorial. if there's anything i can clarify better, forgot, or should include, i'd love to hear it (: also, don't be afraid to ask questions, as that may help make my tutorial better for future users. i plan on making further guides for twitch assets, and i'll link those below if there's any others yet. also, if you're interested in this overlay or any other i have to offer, i'll link those below as well. thank you so much for reading this far, and i hope i helped you learn something today ♡ get yourself a treat, you earned it!