How to Use Livilune's Stream Graphics!

You have your perfect stream graphics and you're ready to put them to use - but maybe you're new to this and not sure how to use your beautiful new graphics? No worries, I've got ya covered! 

Here's a step by step instruction on how to use your new graphics! 
We will be using Streamlabs, SLOBS, and Twitch for this, but it should work just the same on any other platform.

Step One: Unzip/Download Your Files!

Your graphics aren't doing you any good in that compressed folder! Unzip them!

It will also help to move all of the folders inside the folder somewhere else - don't leave them in your Downloads folder or you might accidentally delete them forever! 

How to Use: Panels

Let's do the easiest part first - Panels! In your kit, you'll receive a number of panels - if you realize you need something that isn't included in the kit, please reach out!

All of the panels are 320px wide, the standard size for Twitch panels.

To upload your panels to Twitch:

  • Go to your channel page

  • Toggle on "Edit Panels"

  • To replace an image on a current panel, click "Add Image" , upload your new panel, and then be sure to hit "Submit!"

  • To add a new panel, scroll to the end of your current panels, hit the big PLUS, and do the same as above! 

  • When you're done, be sure to toggle off "Edit Panels"

  • Voila! All done!

How to Use: Animated Scenes

Your animated scenes are all 1920x1080 loopable MP4s - basically what that means is that it's a high-res video file that is animated in a way where it ends exactly how it starts. It will not loop automatically, however, so you'll need to take a couple steps to get there. 

To use an animated scene:

  • Open your broadcasting software - I'll be using Streamlabs OBS for this, but it should be the same in other broadcasting software.

  • Create a new scene - or open your current Starting/Break/Ending scenes

  • Add a new Media Source

  • Name your new source and select "Add Source"

  • Browse for your desired animation 

  • Check "Loop"

  • And you're done! 


How to Use: Overlays - Full Overlays

If you have fully designed overlays - that is, overlays that have a background and are used at full screen - you'll receive a 1920x1080 transparent PNG. Again, I'll be using SLOBS for this but it should work the same in any other software!

To use a full overlay:

  • Open your broadcasting software

  • Create a new scene, or select the one you'd like to use

  • Add a new Image Source

  • Browse for your desired overlay and add to the scene

  • My fully designed overlays are created with transparent "cut outs" so you don't have to worry about any gaps or matching the cam size perfectly, just make sure that the overlay is placed ABOVE your cam and game! (The order they're in on the source panel is the order they're placed on the screen, closest to the front to closest to the back.)

  • Add your game, web cam, and desired stream elements (chat, stream labels, etc.) and you're all set! 

  • Also - don't forget to place your alerts ABOVE everything. I often forget this personally and wonder why my alerts aren't showing up.


How to Use: Overlays - Overlay Elements

Overlay elements are different from full overlays in that each piece of the overlay is a separate file - this is more complicated to set up, but it also allows for you to place things precisely where you want them! 

To use your overlay elements:

  • Open your broadcasting software

  • Create a new scene or select the one you wish to use

  • Add a new image source and browse for the element you'd like to add

    • You will have to do this for each individual piece (cam border, stream label, chat box, etc.) so be sure to name them something specific!​

  • Resize and move the element to where you'd like it

  • All cam borders and game borders have a transparent "cut out" - so just make sure it's placed ABOVE your game/cam and you won't have to worry about gaps!

  • Repeat for any other elements you'd like to add!

  • Don't be afraid to get creative and flip things around (above, the bar at the top is flipped horizontally and slightly off screen!) and resize them to your heart's content! 

  • Once everything is where you'd like it, add your stream labels! Montserrat is my go-to stream labels font and what I use in all my mockups. 

  • Don't forget to add your alerts - and make sure they're ABOVE everything else. This is a mistake I constantly make (oops). 

How to Use: Alerts

Alerts do not come in a standard size, since it depends on whether they're intended to go above or under the alert text, but they are always sized appropriately for use on stream. They also always come as a transparent PNGs!

First, determine if your alerts are designed to go above or under the alert text (ex: "livilune just followed!"). If the design is blank in the middle, it's probably meant to go under text!

If you find you're missing an alert, please reach out and I'll whip it up for ya! 

Either way, set up is generally the same. I'll be using Streamlabs for this:

  • Open your alert platform and select the alert you'd like to update

    • If you are updating all of them - you can update the layout for all alerts in the "General Settings" panel​

  • Select the corresponding layout option 

  • Upload the corresponding alert by clicking on "Change Media"

  • Adjust the text to fit on/under the alert

    • This may take a bit of testing to perfect - don't fret!

    • Tip: if your alert is the "text on top of the image" style, your text is going to want to be on the small side.

  • NOTE: if you are using StreamElements for your alerts and you're using the "text on top of the image" style of alerts, you will have to adjust the top margin of your text in order to align it onto the alert

  • Repeat for all alerts! 

    • It may help to speed things up if you write down the font size, weight, etc. you find tha​t works.

  • Don't forget to test everything one last time! 

That about does it! If you have more specific questions or are running into any issues, please reach out ASAP and I'll help you out!