How to create large background images

In this video we’re going to 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 100% kind of stretching, covering CSS, So let’s look at doing that, so I’m going to turn off my guides, I’m going to go to file, Place Embedded. Under our PS Web exercise files, find the one that says background brick building. I’m going to bring in that one.

Now in terms of the size It’s going to fit, but it’s not quite big enough, so what I’m going to do is I’m going to scale it up. Scaling it up in photoshop is a terrible thing to do, but I’m going to show you a couple of techniques to hide it If it does start pixelating, This one’s not because it’s a reasonably good image, and it’s scaling up about 120%, so it’s going to be ok, and click enter

Next thing I want to do is I want to clip it, so that it’s been clipped to this purple box here, so I’m going to overlay that one there, and I’m going to find - my background is called the hero image. OK, so what I’m going to have to do is drag it so it’s above this box here called “Box Hero Graphics” so I’m going to 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, ok. What you can do is you can collapse these ones here say this library. I haven’t used that for a while, I’m going to double click the tab libraries, I’m going to double click the tab swatches, just so that my layers are nice and big, and I can work on them, and it’s easier to drag them around.

So my background brick building is above my box “Hero Graphic”. Remember I and going to hold down the option key on a mac, or the alt key on a PC to crop it in.

What I’d like to do as well is - actually before I do that is I’m going to undo that, so we edit step backwards. I’m going to turn off this layer, and instead of this being purple, what I’m going to do is I’m going make it black, ok so with it selected I’m going to go to this panel here, It’s called the properties, and I’m going to select black for my colours, ok. I’m going to do this, because when I turn this one on, I’m going to make it actually a little bit transparent, so it start to show the colour underneath.

Earlier when we did clip it videos, I said it doesn’t matter what kind of colour the box is, because you’re going to use an image on top to clip it, so it doesn’t really matter. In this case it is, because I’m going to make this slightly transparent. So I’m going to hold down alt, or option, it’s going to crop to this graphic here, - ok 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 start to see the text quite clearly above it, it’s up to you, and it’s going to depend on the image you use, and how opaque you make it. Just make sure the graphic colour underneath it, is nice solid black, ok and it’s going to show it through. Obviously if you are down to zero the image is completely see through, and we can see the box underneath it. I’m going to kind of creep it up so it’s still visible.

What I also want to 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, because I don’t want to - I like the effect of seeing the kind of old brick building in the background, but I don’t want to actually be able to read Grain Seeds. So what I want to do is use filter, and there’s lot’s of things under blur, - there’s a whole blur library and there is another blur gallery, there’s lots of them ok, Gaussian Blue is a really popular one. I like to use this one now called field blur. I like field blur mainly because it has - allows me to blur, - you can see it’s going to go off and do it’s blur, blurring to the default of 15 pixels. It’s probably a little to strong, so I’m going to turn it down to maybe something like 10. It’s going to redraw it, and now you can see it’s there, I can kind of see what it is, but I can’t start to read the names very well. The reason I like this, is because there’s this little option here that says noise, ok so I clicked on noise and I’m going to click on a mount, and if I crank it right up, it’s going to go a bit crazy, but you’ll be able to see what I mean. I’m going to zoom in a little bit.

Can you see, it’s put this noise background, so I turn noise off on. off, on , it gives some low light noise, which kind of hides some of the kind of smooth Days of our lives effect that ends up happening.

So how much you apply is totally up to you and you’re image. I’m going to apply maybe not that much - I’m going to turn it down a little bit, 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 ok.

The beautiful thing about using this type of method is that it’s something that has been turned into a smart filter. We can turn it on and off, and say a client comes back and says I like it, but it’s not blurry enough, or it’s too blurry. What you can do is you can double click the word blur gallery, go back in and say, actually I’m going to turn it down a little bit to maybe 6, and I’m going to turn the grain up a little bit to 40, and then click ok.

So it’s totally reusable when you use the technique that we’ve used in this course here. Now that’s how to make an awesome background, where we used a bit of opacity to show through the box underneath.

We also used a bit of blur, and a bit of noise to push it into the background.