Photoshop - How To Design A Website In Photoshop

How to mask your images using a clipping mask

Daniel Walter Scott || VIDEO: 32 of 49

Download Exercise Files



This is a great question.

This is a big one! In this video you’ll learn how to create a clipping mask in Photoshop CC. Clipping masks are a way to crop an image to a specific pixel size. It’s essential for web design in Photoshop. Not to be skipped!  - Dan.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

In this video were going to look at how to use a clipping mask. Now a clipping mask is a really great way of cropping an image down to use. Let’s see what the final product looks like. It’s the square image here. I’m going to show you how to do that with what’s called a clipping mask. First thing is let’s turn this eyeball off on our image books layer. And what we do - we start with a rectangle. I’m going to turn my guides back on, command colon, and I want it to span say four guides here. I want it to be a perfect square so what I do is I hold down shift while I’m dragging it and can you see it locks the height and width along. Ok? So I’m going to drag it so it fits across these four. Now it doesn’t really matter what colour we’re going to use at the moment because clipping masks don’t matter that much. I’m going to use my move tool and I’m going to it down a little bit so it’s kind of in the centre of my box and what I want to do now is, I’m going to pop it in and I’m going to turn my image back on. Now my image needs to be a bit more of an appropriate size for this square so I’m going to use my ... with the layer selector, I’m going to use my transform tool, command T, or control T on a PC and I’m going to… holding the shift key down on the corners to lock the height and width otherwise it ends up kind of stretching it and distorting it so I’m going to use the shift key down and I’m not too worried that’s its going to be perfect around here, Im kind of cropping it in for effect. I’m going to hit enter when its transforms done. And what I need to do is, I need to make sure that the image is above my rectangle.

I’m going to rename this rectangle and lets call this one the WHO image. It’s on my Who We Are page. So he’s underneath. So what I want to do is crop this guy which is the image with the books to this square. To do it the easy way is, with the image layer selected, hold down the alt key. Can you see this little icon in the box with the arrow? This is going to turn top image and bottom image and join them together and make a clipping mask. You can see what happened in the structure here in the layers and you can see what’s happened over here in my actual image. I’m going to turn my guides off to make it pretty .. The beauty of it is this WHO box underneath here and this image – they’re actually separate so I can move them around – so what I can do is, let’s say that the box I want to crop slightly differently – I haven’t selected here –and watch this, with my move tool I can move it around – see? I’m kind of moving it around and adjusting it. It’s like a little window. Likewise the image underneath can be moved around. – the box around can be moved around to find where you need to go.

Now what you want to be careful of is if you want to move them both together you need to hold command down and click them both. With them both selected I can move them around. Now if you want to move them around permanently together while not having to select them both – is you can right click these two – after they’re selected there’s one in here that says link layers. You see this little linking icon up here – just means that if I have my background back here selected and then I go back and click just one of these two guys - you can see just one of them selected - they both come along for the ride because they’ve been linked. If you need to unlink them, right click them, there’s one in here that says unlink layers I'm going to leave mine linked for the moment. Now I love to share so I’ve made a few of these videos free. Of course though, I’d love for you to go on and do my full course of over 50 videos. There’s a discount code in the description. Please like and subscribe and Haere Ra good youtube people. Now I’m saluting and waving but you can’t see that can you