Home Web Design Tutorials Photoshop CC 2015 Web Design Tutorial | Clipping Mask in Photoshop for...

Web Design Tutorials

Photoshop CC 2015 Web Design Tutorial | Clipping Mask in Photoshop for Websites – 31/48

July 13, 2022

Full course at: https://goo.gl/Y1Tgbm
Free Exercise Files: https://goo.gl/RBfD2X
Free Cheat Sheet: https://goo.gl/6JFJi4

Photoshop CC 2015 Web Design Tutorial, How to make a Clipping Mask in Photoshop for Websites 31/48

======================================================

Video transcript:

0:00hey there my name is Dan by the end of
0:03this video you’ll learn about the
0:04amazing clipping mask and how it crops
0:06images for your Photoshop web design
0:08mockup this particular video is a free
0:10extract from my course called how to
0:12make money building professional website
0:13mock-ups using Photoshop if you’re
0:15serious about making money as a web
0:16designer there’s a discount code for you
0:18in the description all right that’s
0:19enough sales let’s start cropping images
0:21like a pro alright in this video we’re
0:23going to look at how to use a clipping
0:25mask now a clipping mask is a really
0:27great way of cropping an image down to
0:29use let’s see what that final products
0:31going to look like it’s the square image
0:33here i’m going to show you how to do
0:34that with what’s called a clipping mask
0:35first thing is let’s turn this i bought
0:38off on our image books layer and what we
0:40do is we start with a rectangle i’m
0:42going to turn my guides back on command
0:44colon okay and I want it to span say for
0:49guides here I want it to be a perfect
0:51square so what I do is a hold down shift
0:53while I’m dragging it and can you see it
0:55locks the height and width alone okay so
0:57I’m going to drag it so it fits across
0:59these for now it doesn’t really matter
1:01what color we’re going to use at the
1:02moment because clipping masks don’t
1:03matter that much I’m going to use my
1:04move tool and I’m going to move it down
1:06a little bit so it’s kind of in the
1:07center of my box and what I want to do
1:09now is pop them in and I’m going to turn
1:11my image back on now my image needs to
1:16be a bit more of an appropriate size for
1:18this square so I’m going to use my with
1:20a layer select and use my transform tool
1:22come on T okay or ctrl key on a PC and
1:25I’m going to holding the shift key down
1:27on the corners to lock the height and
1:29width otherwise it ends up kind of
1:30stretching it and distorting it so I’m
1:32going to use the shift key down and then
1:34I’m not too worried that it’s going to
1:35be perfect around here I’m kind of
1:37cropping it in for effect and hit enter
1:39when it’s transforms done what I need to
1:41do is I need to make sure that the image
1:43is above my rectangle i’m going to
1:44rename this rectangle and let’s call
1:46this one the this one’s the and who
1:50image so my who we are page okay so he’s
1:54underneath now what I want to do is crop
1:56this guy okay which is the image read
2:00the books to the square to do it the
2:03easy way is with the image layer
2:05selected hold down the alt key can you
2:07see this little icon here with the box
2:08with arrow this is going to turn top
2:10image and bottom image and join them
2:12together and
2:13make a clipping mask you can see what
2:15happened in the structure here in the
2:16layers and you can see what’s happened
2:17over here in my actual image I don’t
2:20turn my guides off to make it pretty the
2:22beauty of it is that this kind of who
2:24box underneath here and this image is
2:28actually they’re actually separate so I
2:30can move them around so what i can do is
2:31let’s say that the box i want to crop
2:34slightly differently and i haven’t
2:37selected here watch this will my move
2:38tool I can move it around you seem kind
2:40of move it around and adjust it’s like a
2:42little window likewise the image
2:44underneath can be moved around the box
2:46around can be moved around to find where
2:47you need to go now what you want to be
2:49careful of if you want to move them both
2:51together you need to hold command down
2:52and click them both okay with them both
2:55selected I can move them around now if
2:57you want to move them around permanently
2:59together well not have to select them
3:02both is you can right-click these two
3:04okay after the selected and there’s one
3:06in here that says link layers you see
3:08this linking icon appears just means