Video Transcript

Hi, I'm Phil Steele. One problem that comes up all the time when you're preparing photos for use on the web is how to crop them to exact pixel sizes. Say for example a website wants you to upload a photo that's exactly 800 x 600 pixels. How do you get your photo exactly that size? There are a lot of ways to do it and most of them are frustrating, difficult and time-consuming. But there's also an easy one-step shortcut trick for doing it and that's what we're going to look at in this video.

Here's how this problem typically comes up. Let's say you want to make a new cover photo for your Facebook page and Facebook tells you to upload a photo that's exactly 851 x 315 pixels. So how the heck do you make your photo exactly that size? Well clearly this is a job for Photoshop and we're most likely going to need to crop the image in Photoshop. If you've already taken my Photoshop Basics course then you know how we crop photos. You use the crop tool right here on the tool palette and when you click on that it gives you these little handles that you can drag inside the image and you can make a suitable selection from the part that you think is what you want, then you can hit enter to crop it. That looks pretty good but the problem is it's not the right size. Let's see what the size is. That's 1163 x 366 - obviously that won't do. Usually the first thing you think of trying is, 'Well I'll just resize the photo and since it needs to be 851 pixels wide I'll just go make it that.' So I go to the Image Size menu and I'm going to change this and I'm going to make it 851. I resized it to be 851 pixels wide. The problem is, though, how tall is it? Let me check the size. Well now it's only 268 pixels high and I need to be 315, so there's nothing I can do by cropping it further to add more pixels. This was a dead end.

Let's back up and try again. I'm going to undo that. Alright, now I'm back to that first cropped version and now I have a brilliant idea this time instead of setting the width first, I'll set the height first since it's more than wide enough. So let's try that. I'm going to go to Image Size and I'm going to make instead of 366 I'm going to make it 315. So now it's the right height but let's see. Now it's the right height but it's too wide, it's 1001 pixels wide. But we can deal with that, we can crop it off. The easiest way to do that is to use the Canvas Size command which will just trim it to the exact size we want. I'm going to go back to the Image Menu, pick Canvas Size and it's already the right height so I just need to change the width to 851. I'll do that. Now I have some options: is it going to leave it centered and trim off both sides? Or is it going to trim off the left side or trim off the right side? I think I'll leave it centered and let it trim equally from both sides. Unfortunately if you don't like those three options you're kind of out of luck because this is a blunt tool. So let's do that. Now let's see what we have... we have an image that's 851 x 315. That's what we wanted. Unfortunately it's not exactly the part of the photo that I wanted to use because I had to use that blunt tool of the Canvas Size and it also took a lot of time and a lot of fiddly little steps to get here.

Fortunately, there's a better way. The better way allows you to do it all in one step while choosing exactly the part of the photo that you want. So let's back up and start over again. Alright, here we are back to our original photo and this time we're going to do it right. We're going to start by selecting the Crop tool and you can see when you do there's some fields up here in the Toolbar - there's a little box here, and a box here, and a box here. It's not very easy to see those if there's no numbers in them and if you're not seeing the same thing I have here, check this little drop-down menu and make sure it says 'Width x Height x Resolution' that's the setting you want. Here's the trick. If you know to do this, you can type the exact dimensions in here in pixels and Photoshop or Crop to exactly those pixel dimensions. But there's a little catch. I'm going to type it in: 851 and now I'm going to type 'px' meaning pixels, and in the next field I'm going to type 315 and 'px' meaning pixels. That little 'px' is absolutely crucial because if you don't type that sometimes it defaults to inches or centimeters or other crazy things. But if you type pixels, it knows you mean pixels. I don't know why Adobe didn't just make pixels one of the options on this little drop-down menu right here instead of pixels per inch, pixels per centimeter... how about just pixels? Because that would give us a clue that this is possible. But somehow they expect you to know to type 'px' to get pixels. If you type that then all is good. Now you see when I drag the handles its keeping the ratio that I wanted. It's always going to be 851 x 315 and then it's just a matter of selecting the part of the photo that I think is ideal for my purposes here. Let me mess around a bit get the get the part that I think I want. Let's say right there and then I hit Enter and it crops it. Now let's check the size. There it is, it's exactly 851 x 315 and it's exactly the part of the photo that I wanted to use, and I did it all in one step.

The important thing to understand here is that Photoshop is really doing a two-step process behind the scenes. First, it's cropping the photo to the area that you specify. Then it's resampling the photo to make it match the pixel dimensions that you specified. So it's a crop plus a resample and it's important to keep that in mind for two reasons. First, as always, after resampling you may want to sharpen the photo. We've talked about why you sharpen photos after resampling in my Photoshop Basics course so I won't repeat all that here. If you need a refresher on that you can check the course. The second reason to keep in mind that it's resampling is that if you pick a really small area you should be aware that it will be up-sampled to the specified dimensions and then it may be blurry. Let me show you what I mean. I'm going to back up. Now let's say i had chosen a really tiny little area of my photo. Maybe I just wanted this little piece right here and now if I crop that, you can see what Photoshop did. It actually up-sampled it and interpolated between the existing pixels because there weren't enough pixels there to make an 851 x 315 photo, so it up-sampled a little tiny one and filled in extra pixels and it comes out blurry and grainy as a result. So you want to be careful using this method and selecting a very tiny area of your photo. That's not a Photoshop limitation, that's just the nature of pixel-based images. If you want to know everything about Photoshop and photo editing you can watch my online course Photoshop Basics For Photographers. It's a beginner course designed to get you off the ground with Photoshop and using it like a pro in no time. You can check it out on my website at SteeleTraining.com.