In this video, we're gonna look at how to make a background image. Now, background images tend to be quite washed out or darkened at the moment. It's quite stylish and they seem to fill the whole background using a hundred percent kind of stretching, covering CSS. So let's look at doing that. So I'm going to turn off my guides. I'm gonna go to file place embedded under our PS web exercise files.
Find the one that says Background brick building. I'm gonna bring in that one. Now, in terms of the size wise, it's gonna fit, but it's not quite big enough. So what I'm gonna do is I'm gonna scale it up. Scaling it up in Photoshop is a terrible thing to do, but I'm gonna show a couple of techniques to hide. If it does start pixelating, this one's not because it's a reasonably good image and it's scaling up.
What about 120%? So it's gonna be okay. I'm gonna click into, next thing I wanna do is I want to clip it so that it's been clipped to this purple box here. So I'm gonna kind of overlay that one there. And I am going to find my background. It's called the hero image.
Okay. So what I'm gonna have to do is drag it so it's above this box here called Box Hero Graphic. So I'm gonna drag it down. Scale, scale, scale. Now what you will find is that it can be a bit of a pain to get it to the right part. Okay?
What you can do is you can collapse these ones here, say like this library, I haven't used that for a while. I'm gonna double click the tab libraries. I'm gonna double click the tab swatches just so that my layers are nice and bigger can work on them and it's easier to drag them around. So my background brick building is above my box hero graphic. And remember, I'm gonna hold down the option key on a Mac or alt key on a PC to crop it in. Okay?
What I'd like to do as well is actually before I do that, I'm gonna undo that. So edit step backwards. I'm gonna turn off this layer and instead of this being purple, what I'm gonna do is I'm gonna make it black. Okay? So with it selected, I'm gonna go to this panel here. It's called the properties, and I'm gonna select black from my colors.
Okay? I'm gonna do this because when I turn this one on, I'm gonna make it actually a little bit transparent so it starts to show the color underneath. Earlier when we did clipping videos, I said it doesn't matter what kind of color, the boxes, because you're gonna use an image on top to clip it. So it doesn't really matter. In this case it is 'cause I'm gonna make this slightly transparent, so I'm gonna hold down alt or option, okay? It's gonna crop to this graphic here.
Okay? This box hero graphic layer. What I'd like to do though is make this one slightly transparent. Turn the transparency down until it gets to a point where I can start to see the text quite clearly above it. Okay? It's up to you.
And it's gonna depend on the image you used on how IPA you make it. But just make sure the graphic color underneath it is nice and solid black. Okay? And it's gonna show it through. Obviously you get down to zero, the image is completely see through and we see the box underneath it. So I'm gonna kind of creep it up so it's still visible.
What I also wanna do to make the background more awesome is I'd like to make it a little bit blurry and there's lots of different ways of blurring the background. 'cause I don't wanna, I like The effect of seeing the kind of old brick building in the background, but I don't wanna actually be able to re grain seeds. So what I want to do is use filter and there's lots of things under blue. There's a whole blur library and there's another blur gallery. There's lots of them. Okay?
Gian Blue is a really popular one. I like to use this one now called Field Blur. I like field blur mainly because it has, it allows me to blur. You can see it's gonna go off and do its blur. It's blurring to default of 15 pixels. It's probably a little too strong.
So I'm gonna turn it down to maybe say something like 10. It's gonna redraw it. Now you can see it's there. I can kind of see what it is, but I can't start to read who the names very well. The reason I like this is because there's this little option in here. It says noise.
Okay, so I clicked on noise. Oh, you meant to appear in here, and I'm gonna click on a mount, and if I crank it right up, it's gonna go a bit crazy, but you'll be able to see what I mean. I'm gonna zoom in a bit. Can you see it's put this noise background. So I turn noise off on, off on. It gives it some low light noise, which kinda hides some of the kind of smooth days of our lives effect that it ends up happening.
So how much you apply is totally up to you and your image. I'm gonna apply, maybe not that much. Okay, turn it down a little bit. Okay, 20%. It can take a little while to redraw depending on how good your computer is. When you're finished, you need to click this one up here that says, okay.
The beautiful thing about using this type of method is that it's something that's been turned into what's called a smart filter. And we can turn it on and off and say our client comes back and says, I like it, but uh, it's not blurry enough or too blurry. What you can do is you can double click the word blur gallery, go back in and say, actually I'm gonna turn it down a little bit to maybe six. Okay. And I'm gonna turn the grain up a little bit to 40 and then click okay. So it's totally reusable when you've used the technique that we've done in this course here.
Now that's how to make an awesome background where we use a bit of opacity to show through the box underneath. We also use a bit of blur and a bit of noise to push it into the background.