How To Move Text In OBS Studio - 4 METHODS - Photomosh Is INCREDIBLE

it is awfully good to see a creator today we're going to learn how to move text in obs studio wait till you see the killer effects that are available online to pull this off let's get some well i went on the obs project.com website and looked high and low for any kind of tool or plug-in that provides animated text i couldn't find anything but i went over to the internet and looked for web pages that provide animated text and i found some absolute gold so this video is going to touch on various websites that you can bring in as a browser source to animate text and the first one that we're going to review is by a fellow creator called the real darth guy so we're going to take a look at this form that he made you had to enter the text and put in the animation so that you can bring it in to obs let's get started here's the real darth guys form that he built at his website it basically asks a couple questions all you have to do is fill it in and it will animate a text based on your requirements in this case it wants to know the text so i'll keep it as we're live because that's the default text in there the animation you have to select there's all kinds of different kind of animations here i'm going to have one where it slides in so under sliding entrances i'm going to have it slide in from the right and the delay pertains to the amount of seconds that will hold the animation from starting after the page load so i'll keep it at one second and the duration is the length of the animation i'll make it two seconds long i won't make it repeat and the text line is centered centered in the page and the font size the font size should be as large as you can make it in your screen because it's always better to shrink something down while using it in obs versus shrinking it to a larger size so in my case i'm going to make it 200 and the text color can be any color you want i recommend black because it's easy to change black to another color and you just type in the color black and it will work and i'm going to make a high contrast background of yellow that's that'll be easy to make it transparent in obs using filters and as i scroll down i'll hit animate my text and here comes the animation look at that isn't that slick it has a nice um a tween to it where it slows down before it stops it's real smooth and real cool now i gotta tell you the real darth guy also has a second form that will allow you to animate images that you can upload so there's another page i'll put that link in the description as well check him out the channel is very innovative and he's got skills he's just getting started in the space and i think he's going places so check out his channel and subscribe and ring the bell so that you're notified when it comes out with new stuff if you're looking to change the font of the animation that too is absolutely doable i recommend going to his video and going towards the end of it and checking it out and he explains it in great detail it involves taking the script from google fonts and putting it into the page css so there is some page code stuff if you want to call it code but you have to go into the into the the back end of the web page to make it function if you don't feel like doing that there is a second website called loading dot io and if you click the text navigation button at the top it will take you to a page like this and it provides some very simplistic parameters one being this color palette selector which is pretty cool you can choose any random color that you like here it have fun exploring it here's the the text itself so i can type in welcome we've got a font size which i recommend you make it as large as you can and the speed here by which the animation occurs in this case it's occurring at one time one time on load we can change the font now this is really interesting because the programmer has figured out how to designate the google fonts as a parameter and you don't have to go into google fonts to grab them so i'll type in this font here and it changes it to this and i'll make turn the size down a bit there we go that's kind of cool and we have a width and height parameter we have a background so we can set the background color to anything we want and i'll turn off random color there we go and now we can extract the background in obs just like any anything else which is really great okay let's move on to another website and this one actually shows you a single page with animated css and i'm just going to show you how to make changes to it so that it will do what you want and it's not hard let's go into it right now the name of the website is codepen dot io and it's sort of a playground for people to come together and show off their css stuff that they're working on and anything that's in here can be played with used it's all open source so uh here's a page i'll put a link in the description that shows you a animated text graphic where the three-dimensional background is moving almost like these marching ants that are behind the text if you're interested in understanding how to make this larger in size all you have to do is grab this center line here scroll it up and then hit your control plus key a couple times and it'll get large if you want to make it back to the normal size hit your control or command key and hit zero and it goes back so if you're interested in understanding how to change the text for this thing it's really easy just go to the html box in the upper left hand corner and highlight the text over there and do whatever you want so in my case i'll make it scott and for the shadow i have to designate the language for that as well i'll type scott there so as you can see right away it refreshes and shows you the changes that you've made but you can go much farther than that as you can imagine we can for one thing change the font and you do that by going into google fonts so let's go in here let's see let's remove that let's go in and let's try this um langar font which is kind of funky we'll click that and select the style and we'll click the at import radio button and right between the style tag there is an at import url so highlight that and copy it and go back into the website and highlight this top line here and paste over top of it and watch what happens to the font boom it changes it but it doesn't reflect the font that we chose and the reason why is we have to scroll down just a little bit and let's see there it is that little green text there that was named righteous we need to change that to the current font which is langar did i just type that right yes i did see how it changed it so you have to change it in two places you have to put it up here and then you have to actually type in the actual font name right there in the font family and it changes it if you're looking to change the size you can modify that as well by just modifying the font size right here so if i made it 22 it'll refresh and get bigger i won't have to resize it you can resize it with the actual code the text shadow color can be modified i believe right here the let's see what else there's a whole bunch of stuff oh yeah you can change the speed of the animating lines by going down to this part right here this animation shad atom if you make that like a smaller number like say five it'll speed up watch see that if you want to change the shape of the lines you can do that too by going in this line right here this linear gradient 45 degrees if i make that say like 22 instead of it being one direction it changes watch see how it changed now it looks like wavy lines almost so if i can i can put that back to 45 there we go and you can also change the shape of the lines by going to this lower line here and making that this percentage a little bit higher and it'll change it just subtly to a different shape isn't that cool and if you're interested in changing the color of the text just go to this h1 declaration right here and change the color to anything you want so red it'll change it to red so you have a lot of flexibility with making modifications and you will be learning cascading styles by playing here if anything goes wrong you can always restart by re-clicking the webkit animated text shadow pattern text and it will prompt you you sure you want to change you might lose your stuff just hit leave and it'll refresh it and it'll reset so if you're new to this channel i'm on a constant quest to go out and find all the cool software that makes your live streams and videos more engaging and super cool so subscribe and click the bell for new notification because you'll be exposed to websites like photomosh this is an incredible website and i'll tell you why it's incredible because first and foremost if you get into the terms of use you will notice that it says images generated with photomosh are free to use anywhere with no restrictions that's what i'm talking about commercial use and if you click and go back to the main page you can upload your images or even a webcam which is super cool but in this case because we're talking about modifying text i have created a graphic with a blue background here check it out here it is it's a blue background with some simple text on it and we're going to apply some glitching effect to this so that we can bring it into obs so on the right hand side here we have all these parameters i mean just tons of them here's one called pixelate if i check it off it shows it to you and you have these sliders that will adjust that individual parameter but if you check off more than one now you're combining two together okay let's see here let's check off let's turn those both off and go into something called melt which is an actual animation and if you turn it down look at that isn't that cool so here's a an example of an animation that you could apply to your text bring it into obs and take out the the solid blue background and you'd have a pretty slick animated text right there but it just keeps on going and going and going because we've got something called shake let's turn that down a little bit we'll turn off melt and we'll put on a jitter effect okay now it's starting to look like a glitch and i could put slices in there and you know after a while i mean it's really hardcore in regards to the glitching so you could spend a lot of time in here having fun experimenting but i'll have you know there's a there's a great way of just letting the system find uh cool effects and that is by clicking the mosh button at the bottom left here and it will cycle through various effects for you there's a mirror effect i've never seen that before that's cool oh look at that the background's changing cool and it just goes on and on and on and if you like something that you want to use you could potentially click the gif button in the upper left hand corner and click record and the system will record that animation and then put it into one file and allow you to download it to your computer for use into obs which is cool the only downside is is that the graphic is a little bit small so you may want to bring it in as a browser source because it's a little bit larger see how it's a little bit larger and this jpeg button it's a little bit larger in size i want to show you a demonstration this is going to be cool because what we're going to do is take a transparent ping of my face we're going to wobble it with a with the wobble parameter then we're going to have a coming soon text that's gonna be glitchy with a countdown timer all placed on top of a cool background with some cool music here we go in three two one now i want to remind you that if you have an idea for a tutorial that would help your channel let me know in comments and if the idea fits the channel i will make a tutorial specifically for you and give you a shout out now what we're going to do with obs is we're going to get it started and we're going to bring in an animated text and we're going to designate the background color as transparent and then i'm going to show you how to change the text color to anything that you desire then we're going to go into photomosh and i'm going to show you a work around when creating multiple effects on your live stream see photomatch only has one url so we're going to just explain a quick work around on it if you're new to obs i think you're going to get a lot of value out of this part of the video because it's going to touch on the power of filters let's get started okay here we are in obs let's add a browser source so i've got a scene set up already here i'm going to click the plus sign in the lower left hand corner of sources and select browser hit ok and now i'm going to bring in a url from the real darth guys website this is the result of the animator if i hit the refresh key on that website there it shows the animation so i'm going to copy that url and go back into obs and paste it into the url field then the width and the height are the dimensions of my obs screen in this case it's 1920 by 1080 and i'm going to get rid of this custom css on the body scroll down and select shutdown source when not visible and refresh browser when scene becomes active that's important check that off hit ok and when that scene is created and the source is functional we automatically get a animation so when we are off the scene and we click the scene again the browser will go out and re-grab the data and re-show the animation okay that's why we checked off the refresh one load parameter okay let's take that yellow background and make it transparent but before we do that i want to make sure there's some color behind the we are live when it does go transparent otherwise we won't be able to see that text so i'll drag in a background video right into the source here and drag it down below the browser source and right click on it and go to properties and make sure that it loops okay that means it'll be playing all the time now when i right click on browser and select filters i click the plus sign under effect filters and select chroma key hit okay and then in the key color type pull down i select custom and then select color and choose that yellow color and hit ok now the yellow color goes away but you'll notice that the we are live black is kind of grayish and it's actually semi-transparent and that's affected by the similarity slider so if you go all the way to the far left you'll notice that the text is nice and black but you see this edge on it so you want to slide it to the right and stop just when it goes away so i'm going to slide away and boom right about there with nice black text with no yellow edge hit okay hit close and there you have it okay now the next step is to change the color of the we are live okay right click the browser source and select filters again now click the plus sign one more time in the lower left hand corner and select color correction hit ok and at the bottom the color selector select color and choose anything you want in this case i'll make it uh green hit okay and as you can see the because the color is black it really doesn't matter what the sliders are doing except for the opacity just make sure that's all the way far right and hit close and as you can see there we have it it's changed its color but you're probably saying oh wow it would be a lot nicer if it had some kind of a drop shadow or something to make that weird live a little bit more brighter and you can very easily do that by clicking the plus sign and choosing color source hit ok and i'm going to make this black hit ok and i will hit ok again and it covers the entire screen but you can just take these handles here while holding your shift and you can change the dimension of that screen and i'll make sure it's behind the text now by taking the source layer and just dragging it below the browser and making sure that's centered and going back in and changing the filter adding a filter color correction hitting okay and making the opacity a little bit less hit close and there you have a nice opacity i want you to clearly understand the difference between a browser source and a window capture and why making multiple graphics with their own independent effects on photomatch may give you a little bit of trouble but i'm going to explain how to get a work around it so here we have a photomosh motion graphic that i made and i want to bring it into obs and common sense would tell you that all you have to do is bring it in under a browser source so if i click the plus icon under sources and select browser and hit ok and then copy the photomosh url right into that window right get rid of this hit ok look at that it doesn't show you the graphic because there is no unique url for a specific graphic that you make it's always going to be photomosh.com and when you create a browser source it's like creating an independent browser within obs and when you create it it re-grabs photomosh.com and the first thing that photomoss shows is the load file or use your webcam graphic here okay it doesn't show you the graphic that you built so the work around is to use a window capture but when you use window capture it is affected by the size of the window that you're using so let me show you what i'm talking about so let's get rid of this browser source real quick hit yes i'll hit the plus sign and i will select window capture okay and i'll hit ok and i will select the brave browser that's using photomosh and i will hit ok and as you can see it's showing up just fine in obs now if i go into the if i'm going to move this ovs window over so that you can see the window that's it's referencing and as you can see you can see my mouse in there and everything it's a direct copy of that window if i resize the window it gets smaller inside of obs this is a problem see because it means that the real estate on your screen is what designates the size of the graphic and if you don't have a lot of real estate on your screen then the graphic isn't going to be that super huge on your live stream so this is why multiple monitors is super important when you're doing live streams on youtube because it allows you to have more real estate if you're using window capture and in this situation you need to do it because photomosh doesn't have a unique url so i just wanted to make sure you understand that concept and why in my opinion browser source is really the better option because it is resilient no matter what size the window is anywhere because it doesn't really use a window really it's just an independent browser that's embedded into obs a subscriber from overseas let me know about a killer countdown timer that can be set up in literally just a couple minutes if you're interested click this link right here and i'll give you that tutorial it'll be a fast one and fun i will catch you later stay strong and keep fighting you

Channel: Scott Fichter

Views: 67,991

Keywords:

Id: 1DeojpbWBDM

Length: 19min 52sec (1192 seconds)

Published: Tue Dec 29 2020