OBS News Overlay - AMAZING Text Scroll Effects & System Time

hello my name is scott victor and here's tonight's top stories bob gripholder from ballard county was charged with assault after throwing a live alligator through a drive-through window rick tamlin from collier county tried to kill a man with kindness while swinging a machete named kindness brian fantana was arrested for fighting a drag queen with a tiki torch and is now running for mayor and i will provide an easy and fun tutorial on how to create this news overlay in obs studio you stay classy youtube viewer let's get some [Music] electrify your online presence with live streaming okay the question today is did that capture your attention did you actually laugh at that or was that super duper cringe i think maybe the latter we'll see in comments so how did we get here in regards to this tutorial well david cybreck made a comment two days ago and he said i'd like to see a scrolling like regular tv channels used to tell us about breaking news and weather alerts i think he's talking about a news overlay for obs studio it's a lower third i'm going to show you how to put this together the following topics are what we're going to cover we'll first discuss how to make the graphic where to get inspiration to make your own custom graphics and how to download my demonstration that you see in this tutorial i'll provide a link in the description more on that in just a second we'll also get into the codepen website and why it is an absolute epic resource for you we'll discuss how to search how to download and the philosophy of use in regards to backing up your work when you make changes to the code i'll explain it to you it's not difficult and it is an absolute ton of fun then we'll get into adding the scroller to obs studio and adding the horizontal scroller as well as the vertical pause scroller and that will contain a code pen so we'll go through that process and then finally we'll add a code pen that is a little tiny clock it'll go am and pm based on the time of the day it uses your system time to display it it's really cool so when you're done with this tutorial you will walk away with a healthy knowledge on how to grab assets from codepen and add it to a graphic so that it makes this lower third just exactly like what you would see on cnn or fox news or whatever news right it's going to be awesome let's get started initially i thought this would be super duper easy but actually it turned out to be kind of difficult to sort of wrap your head around what looks like a news lower third so i went to google images and typed in the word news lower third hit enter and it lists all these great examples and it kind of gets your head in the right place in regards to what works if you like something that you see here you can click it it'll give you a preview on the right hand side if you click it again it'll take you to the website that's selling it and provides even more examples of stuff that you can look at i realize that these are all behind a paywall so if you're not interested in actually buying something you can actually download the one that i used in this example for free the link is in the description inside there is an animated gif with a green background that you can make transparent all the slices and they're all transparent so you can bring it into any editor and if you have photoshop i've included a psd file as well i have to tell you that if you're interested in using free software to make your own graphic you can do that with a program called photo p it's great it's just like photoshop and the resolution that i'm using is 1920 by 1080 which is 1080p all right okay why is codepen so epic i'll tell you why it's a community of programmers who are submitting html css and javascript to create artwork applications you name it it's a universe's stuff and it can all be run locally on your computer as a browser source so basically just about everything that you see in this gallery you can bring in as a source okay so if i'm here at codepen.io and i do a search for animated tunnel for example right hit enter oh wow look at that it returns this animated tunnel that's created in html css in javascript so if i click it it gives me the three elements that comprise this animation this animation is crazy cool so what i'm going to do now is i'm going to click the pin icon in the upper right hand corner here and that will allow me to access it later because i logged into my account if i go back to the home page real quick and i select pinned items it should show up there there it is now if i want to download this thing all you have to do is go down to the lower right hand corner here and click export and export as zip and that will download it to my downloads folder on my computer right click on the zip file and uncompress it with your favorite program i use 7-zip extract files hit ok creates a folder open it up open it up again and it shows you this stuff if you click the license.txt file you just want to make sure that you have permission to put this on your live stream it says permission is hereby granted free of charge in most cases it's going to say this because html css and javascript is like the languages of tinkerers and the community shares everything a lot of times people bring in a project and make and fork it out and do different stuff so it's very open-ended and super cool that's why i absolutely love codepen it's just fantastic so in most cases you'll be fine so you can get rid of that stuff the readme markdown you can just delete that get it out of the way the distribution folder is what we want to actually use the src you don't have to worry about so you can delete that too so inherently what we're going to do with these things is modify them so that they're the right color the right speed they say the right things you're always going to want to tinker with it and i highly recommend that you copy the distribution folder and paste it so that you have a backup just in case you make a change and screw up the whole thing so i'm going to make a copy and call it backup so now when i go in the distribution folder here i can go into the the javascript and the styles and the html and make changes without any worries i can always go back to the backup here's what this thing looks like full screen when i click the index.html file watch this this thing is sick are you kidding me this is this is like a shader wow okay let's set up these vertical scrollers but before we do that real quick i want to go over the core assets that make the foundation of the graphic the first one is the red spinning planet earth the graphic for that was found at pixabay which is an absolute fantastic source for video you'll get the search bar select images make sure that video is selected and the query that i searched was rotate blue earth hit enter and boom there it is it's a blue video okay i saved it to my hard drive or brought it in as a source by just dragging it right in there and then i added a filter called color correction and these are the parameters color multiply color is red color add is black the next thing that i added is the lower third graphic which again i just dropped it in it's a transparent ping and cut and dry the next thing i put in was the animated gif that shows the breaking news again i just dragged it in and made sure it was looping and you're good to go now the horizontal scroll is dead simple all you do is add a text source which i've done right here added the line of text right i separated them with pipes with a couple spaces between each one hit ok to that right clicked on it went into filters and selected the scroll filter and these are the parameters for that cut and dry it's not rocket science upon creating it i just resized it so as you selected it gives you the handles and if you hit the alt key you can resize the cropping of this see that that's important because you're going to need to adjust that when you drop it in initially okay the vertical scroll with pause let's go back to codepen i have found the script it is pinned currently in my code pen if i click pin items and click the vertical scroll page here it's named vertical scrolling text animation link in the description to this page if you want to find it the easy way upon you getting here you can make a copy of this it's called making a fork so if i click the bottom button here called fork it's going to create a page and you'll notice that now the title of the page has a little icon here a little pencil icon if i click it now i can name it uh whatever i want so in this case i'll type 4 obs okay and when i save it it'll save it to my account so when i go back to the home page here and i go to your work now you see a version stored in here so when i click it now i'm making changes to my version of the vertical scrolling text animation pretty cool right so now that we're here i'm going to physically edit this thing in the screen because it makes it so much easier because the screen is constantly refreshing and it will show you what you're doing to the script while you're doing it and the things that we're going to do is change what's being scrolled the text itself change the text color change the text size change the background color of the text and finally change the scrolling speed so let's get into changing what's being scrolled that's over in the html side so i'm going to just type a longer string of text here this is where you change the text and let's see if it refreshes there you go perfect okay the next part is to change the font and this is really cool so as you can see at the top there's this at import url https fonts.google.googleapis.com that's a weird name if you go to google fonts you're presented with this page i want to choose a font that's a little bit thicker and wider so i'm going to go to categories and i'm not going to select any of this stuff with the exception of sans serif that gives me a cleaner letter character and then in font properties i'm going to check off thickness and let's see what it gives me let's see if there's any text in here that's wider oh yeah here's one called syncopate i love it i'm going to select syncopate and now i have a choice to choose what thickness of text i want to display i think i'm going to go with the bold 700 so i'm going to click the select this style to the right of the text and it adds it to this right vertical panel here and what i want to do is select the at import and highlight the stuff between the two style tags okay and hit copy ctrl c then i'm going to go back into my version of the script and highlight that top part and hit paste and now i have imported the new font into the script and all i have to do now is change the font family in body to syncopate s-y-n c-o-p-a-t-e and now we should see the text change there you go now it's much wider cool next thing we want to do is change the font size i'll make it 20 looks good and in regards to the color you can see it right here in the dot animate dash text that's the style that affects the color and you can highlight this alphanumeric hex color thing and just type in a color watch if i type in green it changes it to green if you want to change it to a specific color go into google and type in hex color picker and google has a text selector here so you have this draggy thing here i'll drag it to red and then i'll make it like a dark red like right about here and then there's the hex color equivalent of that color so i'll highlight it actually you know i don't have to highlight i can just click this icon here and it puts it into cache for you go back to the css and instead of it saying green just paste the pound sign and that code and now it changes to the dark color isn't that slick that is slick okay so now all we have to do at this point is make a change to the background color and that is a parameter that is in the body so that you know the color of the entire body of the html and you do that by adding a new style which is background color dash color put that thing in there and then type any color you want i'll say gray and then this thing in there boom did it work there you go so that's how you change the color now in my case the graphic the lower third graphic is white so i'm just going to make the background white by typing white in there boom the last thing we want to touch on is the scroll time and that is right here so if i make this 6000 and make this 6000 that'll slow it down i think to around 7 seconds let's see one two three four five six seven eight perfect eight seconds is long enough and what i'll do now is click export and export the zip oh i have to save it so go into the save button up here there we go we're saved and then we can export export the zip download now that i've successfully downloaded the zip file i will right click on it and expand it go into the folder go into the second folder highlight the readme the license and the src folder and delete i will right click the distro folder paste a copy rename it backup just to be safe probably don't need it but it's always good to have a safe backup go into the dist folder or distro folder open it up double click the index file and there it is running on my computer i'm going to copy the url go into obs studio plus sign browser for browser source i'm going to name it vert scroll hit ok paste the link inside there width is going to be 1920 by 1080 i use this is sort of a default what i usually use i just keep it to the full screen size because i like to be able to resize it just makes it easier i'm going to get rid of the custom css this is a custom css override and we don't need it use custom frame rate no i'm not interested in that control audio via obs there is no audio so we don't have to worry about that shutdown source will not visible absolutely that saves on resources refresh the browser when the scene becomes active uh yes that's a good idea to do that just in case you make changes to the script you want to see the changes i will then hit ok and it shows up with a white background and now all we have to do is hit the alt key resize it so it fits and there you have it okay let's insert that little tiny clock that grabs your system time and shows the current time here it is it's called view.js at moments.js it's a funky name i know link in the description if you want to find it the easy way first thing i'm going to do is click fork i'll click the pencil and rename this to something that i can remember which is system time for obs and i will click save and now it saves it to my account under work and now let's make some alterations to this thing let's get rid of the current time here we don't need that so i will just simply go into the html and get rid of the h3 header that's what that is right there just delete it and that'll go away good now we're going to make a change i don't want to see the seconds in the time how many clocks show the seconds like this not too many so that is changeable in the javascript in these two lines right here see this lts the s means seconds we're going to get rid of the seconds let's see if it goes away it does okay we're looking good now let's make a change to the background i'm going to make it blue so there's two lines this is affecting a gradient so the top color is going to be blue because i don't care i don't want it to be a gradient is going to be blue bottom one blue again and the reason why i want to make it blue is because the blue color will be removed in a filter on obs and that would look really good in regards to the outer edge of the time when resting on a blue background this is a gradient so it just will look better keep that in mind if you have stuff that's going to be on a gradient okay let's go back in here and reduce the size of this thing so where is that that is located right here dot time font size is 7 em em is sort of like a mobile like a mobile thing where the size of the text becomes a variable based on the width of divs and stuff it's pretty complex don't need to do that in this application so i'm just going to make it 20 px and that'll change it down to that size maybe we could go that's a load that's a good size maybe make it 18 real quick good and now i'm going to add a style i'm going to call it font weight okay and i'm going to make it 800. just like that and that'll make it thicker perfect i'll click save and now what i'll do is click export save the div to my computer expand it delete those files that you don't want and then go into the distro folder open it up click the index.html file copy that link and bring it in as a obs source browser source and you're good to go now a couple months ago i made this video which talked about how to add a custom clock on obs studio and a lot of people have been chiming in and having all kinds of questions and confusion and it's not working and so i'm going to circle the wagons now and i'm going to provide a solution with codepen that will work that will be easy to use because it's going to use your system time i will get into the parameters it's going to be a lot of fun i will see you over there best wishes stay strong and keep fighting [Music] stay strong keep fighting [Music] you

Channel: Scott Fichter

Views: 33,460

Keywords: obs news overlay, obs news studio, obs news ticker, obs breaking news overlay, obs add lower third, obs animated lower third, obs plugin lower third, obs scrolling text 2020, obs studio, obs studio green screen, obs studio scrolling text, obs studio settings, obs studio tutorial, obs tutorial, how to use obs, scrolling text obs, codepen, family friendly, scott fichter, scott fickter, scott fihcter, scott fikter, scott fixture

Id: qojC09CbSQA

Length: 19min 12sec (1152 seconds)

Published: Tue Sep 21 2021