Adding texture color opacity to your background video in Premiere

Hi there, in this video we're going to look at adding kind of a textured backgrounds, some colored boxes, some blurring to our videos, and we're going to create two versions, one with a kind of like a full screen, and the other one, more of a letter box shape, where that's going to be put inside of a ‘div’. Hold your hats, let's go and make our videos look super awesome.

So why do we add all these details? Why do we go off and color it, and add washed out backgrounds, blurred? Why do we go and do that sort of stuff? For a couple of reasons, one is that it just looks cool, the other reason is we're doing it is so we can hide some of the poor quality. And it keeps the file size down. You lower the amount of colors used, like this one here, it would go and lower the file size. There's a direct connection there, and it's actually quite substantial. Blurring is a nice one, where you go through it, it’s just to hide-- say you want to use a really low-res image, you need to blow it up quite a bit, like this one, you can blur it, and it's really hard to see the pixelizations and those types of things.

Now you may or might not know, you can do a lot of this with css, but you shouldn't do with css. Why? Because I can disable a feature, it's not really well supported, but that's beside the point. What happens is, if I used, say the gray scale, with a css, and I use the blur feature on this, and I do encode, what will happen is, I'll have to bring in this really big file size in terms of video, and then I'll apply the css over the top of it, whereas if I do it now in Premiere, or After Effects, it means that I get to do that beforehand, and removing all the colors lowers the file size. Blurring it out lowers the file size, maybe blurring not so much, but doing it later on, especially things like muting and those sorts of things, it can be done, encode, but don't do it because if you do it now in the video, the video will be smaller and load faster, and everyone will be happy. 

So let's look at these in Premiere. So in Premiere, what I'm going to do is, I'm going to drag my play-hit, it’s just kind of in the middle, so I can see things going on, and I'm going to open up my 'Effects Panel', if you can't see it, it's under 'Window', jump down to 'Effects', and the ones I'm going to use are going to be under 'Video Effects'. And we'll start with the blur, under blur here, this one, there's a few different ones, we're going to use 'Gaussian Blur'. Why? Because everyone uses that one, and you'll see over here, it's being added, Gaussian Blur. So what I'm going to do, just to make it little less confusing, is I'm going to twirl up 'Motion', and just hit 'Gaussian Blur', and all we're going to do is, click, hold, and drag this to the right, so what happens in Premiere is, lot of things are scrubbable, so you click, hold, and drag it to the right, you'll see my video getting nice and blurred. Super blurry. So you decide, and then you go off and export it. You got a cool kind of background.

Now blur's used for hiding bad pixels, if you've got a really low-res image, where you get the compression down really low, blurring is less likely to show those side effects. The other reason is, say you might have people in it, say it's a cafe scene, you don't want to see Bob, and Ginny, and Norm—I don’t know who Norm is, but if you see these people, they're actually recognizable people, if you blur it they become, like in the news, when they're talking about generic people, they kind of blur the background, or film just their feet, just to get rid of the personal feel for it. It just becomes 'The people'. So it's blurring. I'm going to click on the word 'Gaussian Blur', and delete it. 

Another thing to do in terms of hiding pixels is using a better film grain, just that kind of noise that goes over the top of it. And you'll find it in here, there's an option that says 'Noise & Grain', and I’m going to scroll down, and I'm going to use the one that says 'Noise', and I'm going to add it, by clicking, holding, and dragging it here to the timeline. And you can see there, there's noise; and noise amount, kind of get up, just like blur. It's up to you how far you go, and 'Use Color Noise', I turn that off, I like it a little bit more black-and-white. I’m going to zoom in over here, at the moment it says 'Fit'. So you can zoom in, it's going to come up the center, that's far too much, and if you add, maybe 20-- it's going to be depending on your film, but if you add this noise, gives you that kind of film grain quality, and also, it hides some of the bad pixelization that can happen if you're using a really low-res video, like we're going to. So, that's adding some noise, I'm going to get rid of noise; Goodbye.

Next thing we'll look at is making it black-and-white, playing with some of the colorization, kind of Instagram filters that you can do, to make it look kind of cool, and so I'm going to go back to 'Fit', and I'm going to open up something called 'Lumetri Color'. Now, you can find it in here, but there's a nice way of using this thing called Lumetri color, and that's under 'Window', there's this one called Lumetri Color'. They're the same, except you get this nice big panel over here, you can-- rather than try to fight with it in this tiny little effects panel, you get this nice big one here. What we're going to do is-- basic correction is, if you need to correct your video, we're not going through-- it's called color grading when you're fixing video, we're not going to go through that in this case, but it's pretty easy. If you've done any sort of Designer Photography, this is not going to be too hard to do, but what we want to do is, down here in 'Saturation', you can see, I can correct right down, and I can get black-and-white. Or I can keep it so it's just a little bit, just kind of washed out.

Now, what I want to do is, I want to render two versions. I'll render this version, that is fully saturated. It's over saturated now, and then I'll do a black-and-white one. I'm going to skip to this bit and just show you the end result. We'll do rendering in its own video, I don't want to make this video too long. Okay, magic. So, I've gone and rendered these two, and you can see there's a gray version, and a non-gray version. And you could see over here, there's this kind of freaking file size difference. Now, you might be like, "Ugh, that's only like 2MB, and a bit." When it comes to background video, load time is our nemesis, so if you go to 'Gray Scale', obviously you don't go 'Gray Scale' just because of the file size, but know that there is a ramification, if you lower the colors, the file size becomes lower, Weird, huh?

Great, so back to Premiere, so I'll put my saturation back up to a 100, and I'm going to close down 'Basic Correction'. There's this one called 'Creative', and that could be interesting; can you see 'Creative'? And can you see this arrow here, and click this, and it will go through and give me a little idea of what this is going to do. What I can do is, I can go and click on it, you'll see that it applied to my video, it gives you that kind of like silverized summer look; lots of kind of Instagram style things. I'm actually just matching camera profiles. There's some cool stuff in here. And, we're going to go back and turn my looks off, and we're not going to go through everything in here. If you do want to go through a lot more kind of fixing video, I've got a video on both After Effects and Premier for color grading, but in this case, the last thing I want to show you, that's quite cool, and everybody loves, it's a bit of a vignette. 'Vignette' is the frosty stuff around the outside; watch this. We're going to lower it down, if you raise it up, you got a white vignette. Nobody wants a white vignette. And I lower this down, you can see-- it's kind of like frosting around the outside, it just makes it look like a special film, kind of grayed here. You can play around with a bunch of different stuff to make it more or less apparent, but vignettes are pretty cool. So I'm going to--  Yes, that's all right. Turn it on or off, the tick here, you can see-- what it's done? Cool! So that's a vignette.

The last interesting thing we can do is, we want to kind of wash this. If I have to type over the top of this, you can imagine-- let's have a look at some of these other videos. See this one here? Barrel works  enough, you can see it's getting a little lost in the background but not enough, I'd say that's fine, but you start looking at this one here, this looks fine only because the background image, or the background video in this case is being dulled back, the whites have been removed. Same with this one here; here it's a little different. It's still being dulled down, but not a huge amount, but this type here, it's a little bit unreadable. This one here is definitely being dulled back. So let's go and do this one. Same for this one here; what I've done is, instead of black, I've done this with yellow. So let's go and do that.

So what I'm going to do is, I'm going to close down, I'm going to right click 'Lumetri' and say, 'Close Panel', Goodbye. And what I would like to do is, I'm going to drag this over, I'm not sure why that's jammed over there. The easiest way to do that is to create something called a 'File', 'New', and we're going to use this thing called a 'Color Matte'. Now a Color Matte is just a big box, a big colored box, so it's going to match the video settings, and in our case, it's 1080 x 1920. Doesn't matter, it will guess exactly your video size, so you shouldn't have to change it. Let's click 'Okay'. Doesn't matter if yours is different, we're going to change the file sizes later on. Click 'Okay'. Pick a colour for it, in our case we'll do the black version; click 'Okay'. And we're going to give it a name. Color Matte doesn't make a whole lot of sense. We're going to call this one 'Black Cover'. Click 'Okay', and nothing happens. It ends up in your project. At the moment we are on 'Effects'. You can toggle through these things-- it's a little bit hard to get, but there's project, if you can't get there easily, skip to 'Window', there is that 'Project' that'll turn on or off.

So this is what my video is, and you can see in here, there's my black cover. Now what you do is drag them out, and I'm going to stick that right at the beginning. It covers everything, and I’m going to extend them out, so it covers the whole thing, and then just lowers the opacity, and this is how we wash out the background. So, select on it, in your timeline up here, under 'Opacity', lower it down, then you just kind of decide how dark it needs to be; it will depend on your image, and what goes over the top, whether you're using drop shadows in the text in HTML. You might have to come back and experiment a little bit with this, but that's how you get it to be color cast like this. Now if you want it to be yellow, like this one here, we do the same thing, but instead of being a black-- so we're going to turn that-- see that eyeball here? That turns off the black layer. I could delete it, but I'm actually going to use that in 'Effects', I'm going to leave it there. So what we want to do is make another one, 'File', 'New', and we're going to go to 'Color Matte'. Same size. Now you can obviously guess them. I've got a specific color that I'm using for my website. 

I'm going to show you a little trick; what I’ve got is, I've got my Photoshop mockup that I've used to create a design for this; watch this, I can move Premier the other way, and watch this, see this eye-dropper, there's one of the swatches that I've been using, or I could move it across and actually steal it from the--- actually I'll use the eye-dropper here, and go through and see, pick the red, pick all these colors, that's the swatch I want to use. Click 'Okay'. Sneaky trick. I'm going to call this one the 'Green Cover', and I'm going to bring in back up. You might have the logo in the background or something like that. Or you might know the hexadecimal number, you just type it in. So, remember, he's over here, the green cover. I'm going to stick it over the top, and I'm going to stretch them out, it's going to cover it completely up, then I will lower the opacity. 

Now, what you'll notice is that it's fine, and it looks kind of how I want it, and it's probably what I've done here, just kind of dumped it over the top, but to make it a bit of a more richer, more of a tonal thing, I want to do two things, I want to use the black, and the green, and I find it looks nicer. You might disagree, but when I turn this one on, can you see 'on' and 'off'? It's still that green, but it's kind of flattened that a little bit more, so you might just use one of them, I like to use two of them. And how dark should it be? Again, it depends on what you want to do. Great. Start at the beginning, plays through, then eventually gets to the end, you can see, instead of dipping to black, it's dipping to that green. If I wanted this to dip black, I can grab these guys, copy and paste them, and stick them all on this top layer here, and that would dip to actual black, but I'm happy that it dips to that green. I think the black might be that big obvious change.

Great! So that's going to be it in terms of colorizing and texturizing it. What I'm going to do in this tutorial is, I'm going to be doing it for a full background like this, but I'm also going to do more of a letter box style. Well, just a slice, that's just going to be for, like a hero box, I just wanted the 'div's, I'll show you quickly. So this is it here, you can see, I'm using this hero box from our previous tutorial, and I've put it in here; don't need to do something slightly differently. One of them is, I'm going to use that black instead of the green, it's going to dip to the ends, and it's also going to be a bit blurry in the background, so I could put type over the top, so if you just want to do the full background, you can skip on for the rest of this tutorial. For the rest of us, let's jump back into Premiere. 

Okay, so to do it, what we're going to do is, you can see, there's my covers, this is the video that I've got, and this is the, I think the example video that I bought in for you, I'm going to delete that one. And what I'm going to do is, to make it a little clearer, is, I'm going to rename this one, they got the same name, so I'm going to double click it, and I'm going to call this one my 'Full Sequence'. Actually, when you're naming these, we're going to name them properly here, because when it exports, it's going to use this name of the sequence to give it the file name, and because we're using website stuff, we're going to use special stuff, so we're going to call this one 'Designer Full Background'. Lovely. 

And, what we're going to do is, this little video that goes inside of it-- so I'm going to duplicate it, you can right click it, and go down to 'Duplicate', and I got two of them now, the second one here I'm going to rename, this one is going to be called, still designer; 'Designer hyphen'

So, in terms of the hero box, and it's got-- at the moment they're exactly the same, watch this. if I open up, there's my designer folder--    just before we go on to naming, I've put hyphens in here, if you put spaces in, you're going to cause problems when you're trying to link to it on your site, so stay away from spaces, underscores, or hyphens.

So, I've got this full background, you can see this is my sequence here called 'Full Background'. If I double click this one, you can see I've got a hero box one. Where's that guy? Here's that guy. They're exactly the same at the moment, but I can make changes to one, so I'm going to work on this hero box now, and in particular, I'm going to shrink down the size. First of all, I'm going to delete this green cover. Now it would be easier to know that that's that one, and that's that one. So what happens is, in Premiere, if you're working on lots of files-- say you need three or four different versions, is you can keep duplicating the sequence, and at the end, you can say, export all my sequences for me, and it will render them all at the same time, but they're kind of like separate little jobs now. 

So, I want it to be black, I want it to be blurry, so I'm going to select my video, I'm going to find 'Lumetri Color', I'll turn off Lumetri Color, I don't actually use 'em, and I'm going to go to my effects. So, where is he? 'Effects'. I'll go to 'Window', 'Effects', and I'm going to find 'Blur', then what we'll use, 'Gaussian Blur'. Bring it up. How much? Not sure. And this black cover here, I'm going to make it a bit darker. Cool.

So now I want to slice this up, and you do it over here, you're back at your Project Panel, remember you got to-- there he is, there; On 'Window' 'Project', and I can right click this guy, hero box; go into here, and down the bottom here, 'Sequence Settings'. Now, ignore this one down here, he looks like the obvious one, don't touch him. It's this one over here, the 'Frame Size'. So, 'Frame Size', don't worry about your final output now, we'll do that maybe later on, it's just about the ratio now, you're just looking at the height versus width. We can scale that up and down, and play with file sizes at the export process. So keep it as higher as you can at the moment, and we'll make it physically smaller later on, except for the cropping. So, horizontal is 1080 across the top here. When dealing with video, you can't call it a thousand eighty for some reason, it has to be ten eighty, just because it's cool. 

So, how high is it going to be? 500, we're going to experiment, I get a kind of a sense of how it's going to look. And this thing here, but what you want to do is, don't make it perfect, don't take a screenshot and try and work out the ratio, because, watch this, it's going to be responsive, so it's going to change depending on lots of things, you're just going to get it roughly close to what you want. So I'm going to click 'Okay' on 500, it's going to delete all my preview files, I say 'Okay', and you can see over here now, it's had a little bit of freak-out, but it's a lot more my kind of style.

The other thing I want to do though, is I-- you can see I've kind of cut off all the good footage, so what I'd like to do is, I'd like to-- down here, and select it, and dragging it into the window, it's surprisingly hard, it's easier to do it over here in 'Motion', 'Position', add this one here, you see, I can keep dragging it up until I can see the bar above that.

Now one of the things with the Gaussian Blur which I didn't mention earlier, can you see this thing, it's the edges, and they're kind of getting all frosty. It puts a kind of group around the edges, and kind of frosts them, blurs it in. There's this one here under the Gaussian Blur, it says, 'Repeat Edge Pixels', and it will get straight on the edge there, and that's kind of more what I want, so I'm going to lower him down. Here you are there. So, he's kind of banged up, and now when I play, you can see, I can scrub through.  Oh! Weird on my one, You'll notice that-- can you see this-- you'll notice that mine goes up and down, and you might have been checking this before, and saying that "I didn't notice it until now” is that, under my 'Opacity', if I twirl this down, it's actually this little stop watch that's been started, so now when I'm moving my play-hit along, it means that I can raise it up. Can you see? It started there, come along, and then maybe make it fully black there, and these little key frames, it's not what I want to do. Just means that for the time though now, is that, you've just had the crappiest introduction to key framing, we're not going to do that in this course because there's lots to do.

So I'm going to turn-- I'm going to delete those guys, and just turn that off by default. Now, what it means is, when I select on 'Black Cover', I'm going to just select it and say, you are the color there. Key frames are confusing, and not what we need at the moment.

So, it plays along, blurry, it's kind of black, and it's the right kind of shape. Why do we crop the top and the bottom off? Couple of reasons, it's that it's going to make it easier to position in that 'div' tag, and the other reason is that often this top and this bottom bit are never going to be seen in the video, so it's just wasting lots of good file size, so I want to just trim those off. 

Great, so we got two versions, we got the 'designer full background', and we've got this one here, so let's move on to the next video, and probably the most important part of this video we're doing, is getting the file size as good a quality as we can for some super small file sizes.