How to create large background images

This lesson is exclusive to members

Course contents
SECTION: 7
Color 3:42
SECTION: 10
Page adjustments 1:28

Questions

0
You are not following this thread

Course info

49 lessons / 3 hours

Overview

Web design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Photoshop. We’ll start right at the basics of Photoshop and work our way through to building professional website concepts.

I created this course for people new to the world of website design and Photoshop. I created this for people nervous about changing their careers into the world of web design.

You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what types of files and code are required at the end of your job. This course is for people serious about making money as a professional web designer.

Now let me help you earn more money, get that job and become more awesome!

What are the requirements?

  • You'll need a copy of Photoshop CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Photoshop or web design experience is necessary.

What am I going to get from this course?

  • 49 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

This course is for beginners. Aimed at people new to the world of web design. No previous experience is necessary. 

This course is NOT suited to people highly experience in the world of website mockups in Photoshop already.

Course duration 2 hours 43 mins

Get the completed files here
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025