top of page

SETTING UP YOUR OVERLAY ON OBS STUDIO

[THINGS TO DO BEFORE SETTING UP]

How to Download and Install Font

  1. On the "Fonts Used" folder, open the font download link that is listed by clicking on the "Open" button.

  2. On the new tab, the font download page will be opened. Find a download button and click on it.

  3. After you downloaded the font. Click on the upside arrow icon if you're using chrome, and then choose "Show in folder" to open your font in the explorer.

  4. Right-click on the .rar files, and click on the "Extract files..." to unpack the font files.

  5. After it extracted, open the folder.

  6. Find the font files with .ttf or .otf format

  7. Right-Click and select Install. Wait until it's complete.

  8. Done!

Make Sure Your OBS Canvas Size is 1920x1080 Pixels.

After you download the stream overlay pack, make sure your OBS Canvas size is 1920 x 1080 Pixels. Because if it's over or lesser, the stream overlay would be too small or even cropped. here's how

  1. Go to "File" on top left corner of your screen.​

  2. Then, go to "Video" section

  3. On the "Base Canvas Resolution", make sure it is 1920x1080. If it's not, change the size by typing numbers on it.

  4. After that, just click "Apply" and "OK"

  5. Done!

[QUICK SETUP]

How to Install the Stream Overlay using Quick Setup Method

  1. After you've downloaded the stream pack. Extract the RAR files by right-cliking on it and then choose "Extract Files...", then click "OK"

  2. After that, on OBS Studio, click on "Scene Collection"

  3. Then choose "Import"

  4. Next click "..." (three dots) button to browse your file.

  5. Go to your stream overlay pack folder.

  6. Find the [Quick Setup] Stream Pack Name.json file. Then click "Open"

  7. After that, click on "Import"

  8. Then check it on "Scene Collection" again, if the stream pack are there., choose it.

  9. Next Missing Files notice will appear. Don't panic, It is okay, because the overlay files location is previously on my pc.

  10. Click on "Select Directory..."

  11. Go to the stream overlay pack folder. Select each folder containing the elements, scene and overlay. Until the found text number below equal. Then click "Apply"

  12. Wait a little bit until the load complete and done. Adjust and customize to your preference.

[MANUAL SETUP]

Creating New Scene

  1. On "Sources" section, click the "+" (plus) button to add a new source.

  2. Then select "Image" for static overlay or "Media Source" for animated overlay.

  3. Next, click on "Browse" and go to wherever you put your overlay.

  4. After you put your overlay into the scene. Adjust it to meet your preferences.

Adding and Editing Text on a Stream Scene

  1. On "Sources" section, click the "+" (plus) button to add a new source.

  2. Then select "Text (GDI+)", Then press "OK"

  3. Choose "Select Font"  to customize the font, style, size, effects and writing system.

  4. On the "Text" box, you can write anything you want to be displayen on the scene.

  5. Then on the "Color" section you can click on "Select Color" to change the text color to your preferences.

  6. And if you're done, just click "OK"

  7. Adjust the font to your liking, and we're done.

  8. Also you can change the text without going to properties, by changing the text inside box below the canvas area.

Adding Face Cam with Overlay to a Scene

  1. On "Sources" section, click the "+" (plus) button to add a new source.

  2. Then select "Image" for static overlay or "Media Source" for animated overlay.

  3. Next, click on "Browse" and go to wherever you put your overlay.

  4. After you put your overlay into the scene. Adjust it to meet your preferences.

  5. Then after that, we gonna add the webcam. Following the same step, click on the "+" (plus) button again.

  6. But now, choos "Video Capture Device"

  7. On the "Device" drop down menu, select a webcam that used to capture your life reaction.

  8. Then, resize and Adjust it to the overlay.

  9. Last, make sure the webcam position on the "Sources" section is below the overlay. So the overlay can cover the webcam properly.

Adding Custom YouTube Live Chat

  1. Open YouTube in your Browser.

  2. Then go to YouTube Studio

  3. On the top right corner side, click on "Create" button, then select "Go Live" it will bring you to a livestream page.

  4. On the live chat section, click on the three dots. and then choose "Popout Chat", to detach your chat form the tab and change it to popout window.

  5. After that, open OBS Studio.

  6. On the sources section click on the "+" (plus) button. Then select "Browser"

  7. Copy the pop-out chat link, and then paste it on OBS Studio browser "URL"

  8. Then open chatv2.septapus.com to customize the visual of your live chat.

  9. After you finished customizing the visual of your live chat to your preference. Go to the bottom of the page. Copy the code on the CSS text box by clicking on it, then pressing Ctrl + A (Select All) and Ctrl + C (Copy)

  10. Go to OBS Studio again, click on the live chat browser "Properties", then Ctrl + V (paste) on the "Custom CSS" text box.

  11. Then click "OK", and we're done!

Adding Stinger Transition

  1. Go to "Scene Transitions" section

  2. Click on on the "+" button and choose "Stinger"

  3. You can rename it if you want

  4. On the "Video File", click on "Browse"

  5. Then, select the transition you want to use for your stream, after that click "Open"

  6. Because on my Stinger, the transition happen at 1 second, So I write 1000 ms. 1s = 1000ms

  7. Then too test your transition, just click on "Preview Transition"

  8. After it was done, just click "Ok"

  9. Now, your transition is ready to use on your stream.

 

Studio Mode

  1. Click on "Studio Mode", on the bottom right of your screen.

  2. On the left side, we got the editable preview of your scene and on the right side, we got the live preview of our stream. So, if you click on the scene in the scene section, it won't change.

  3. But, if you click on the "Transition", the live preview will be changed, like usual. It's really good tool to minimize mistakes on stream.

Using Clipping Mask

  1. 1. Right-click on any video or image based sources
    2. Then, select "filters"
    3. On "Effect Filters" section, click on the "+" button
    4. Choose "Image Mask/Blend"
    5. For "Type", just choose "Alpha Mask (Color Channel)"
    6. For "Path", click on "Browse" to select the clipping mask
    7. Then "Open"
    8. Now, you're done.

How to Add Stream Labels [Advanced]

  1. Go to streamelements.com

  2. Login with your most used streaming platform (YouTube, Twitch, Facebook, etc.)

  3. After you got into the Dashboard, select "Streaming Tools" on the sidebar.

  4. Then, select "Overlays"

  5. Next, click on the "New Overlay" button to create new overlay on overlay editor.

  6. Make sure the overlay resolution is "1080p", then select "Start".

  7. Click on the "Add Widget" button or "+" button on the bottom of the page to add elements to your overlay.

  8. Select "Labels" to add a labels that triggered by the event that happened on your stream platform. For example, I choose latest subscriber here.

  9. After the labels text appear, we gotta add some graphics by clicking again on the "+" button. 

  10. Then, select "Static/Custom".

  11. Next, Choose "Image" if your overlay is unanimated or "Video" if your overlay is animated

  12. After the elements added to overlay editor, click on it, then select "Change Video" or "Change Image" on the sidebar menu.

  13. Click "Upload" to upload your overlay.

  14. You can "Drag & Drop" your files here, or "Select Files" from your computer using explorer.

  15. After it uploaded, select "Submit"

  16. Adjust the size if needed on "Position, size and style"

  17. and make sure on the "Layers", the labels text is above the video/image. So, the text doesn't get blocked by the graphics.

  18. Then, adjust the style, position and size of the font to match your overlay.

  19. To emulate an event, just click on the bell icon labeled "Emulate", then select "Subscriber Event"

  20. After you've done customizing, you can rename the overlay on the top left.

  21. Then click on the "Save" button on the top right to save the Stream Labels.

  22. Also, select the chain icon on the top right to copy the overlay URL to paste into OBS Studio source later.

  23. Now, go to OBS Studio. Add new sources by clicking on the "+" button.

  24. Then select "Browser"

  25. paste the URL into the URL Box.

  26. Adjust the Width to "1920" and Height to "1080"

  27. Now, select "OK"

  28. and wait until your overlay loaded to OBS Studio. Done.

How to Add Stream Alerts [Advanced]

  1. Go to streamlabs.com

  2. Login to your most used streaming platform (YouTube, Twitch, Facebook etc.)

  3. Then, after you get into the dashboard, on the sidebar menu click on "Alert Box"

  4. After that, copy link on the "Widget URL" box, by clicking on the "Copy" button.

  5. Select "Copy" again.

  6. Go to OBS Studio, and click on the "+" button to add a new sources

  7. Select "Browser" then "OK" (Renaming it is optional)

  8. Paste the URL into the "URL" box. Select "OK" (Adjusting Width & Height is optional

  9. To test it, you can just click "Test Subscribe" or any "Test ..." available button on the streamlabs.

  10. Then, we're done.

bottom of page