How to resize and crop images in Photoshop

In this post I will show you how to resize and crop images using Photoshop CS4 (the process is pretty much the same for all versions, so don't worry if your version is different).

There are many applications that can perform image resizing (online, free download, or even software that came with your camera), Photoshop just happens to be my favourite program for anything to do with images; being one of the most powerful software applications for image handling and editing - you can do pretty much anything you want - and there is always more to learn!

If you are new to Photoshop, learning how to resize images for web is a useful skill that will come in handy a lot if you are blogging, managing your own website, or emailing photos to friends. Hope you enjoy.

Resizing an image 

First start by opening the image you want to resize in Photoshop. In this example I have opened a photo taken with my digital camera.

To resize the image - click the Image link in the top menu and select Image Size (see above) OR use the keyboard shortcut: Ctrl+Alt+I to open the popup (see below).

As you can see the original image size is quite big (4000 pixels wide by 3000 pixels high) - and it makes sense to reduce the size when uploading to the web or sending in emails. Before you enter a new size make sure that: Scale Styles, Constrain Proportions and Resample Image are all ticked  (they are by default).

Now enter the new width or height you want the image to be - In this example I changed the width to 600 pixels. You will notice that the height (or width) automatically changes to maintain the image proportions, which prevents your image from becoming distorted.

When you have entered the new image size - click OK to accept.

Cropping an image 

Sometimes it is not enough to resize an image before saving it for web, there are times when you need to crop an image to a specific size (for example a profile image for an online forum, or a website image that needs to fit in a pre-defined layout). Sometimes your image will simply look better if you crop away the unnecessary fluff on the side... So before we save for web we are going to crop this image slightly:

Click the Image link in the top menu and select Canvas Size - OR use the keyboard shortcut Ctrl+Alt+C to open the canvas size popup window:

Use the Anchor grid to define which part of the image gets cropped away - in the example above I set the anchor to centre bottom, which means that the TOP part of the image will be cropped away. Basically, decide which part of the image you want to keep and click the corresponding square in the anchor grid.

Next enter the new height or width - in this example I changed the height from 450 pixels to 350 pixels. When you are done, click OK to accept:

When cropping an image to a smaller size, Photoshop will alert you with a popup window - click Proceed to accept:

Saving image for Web 

Now that the image is both resized and cropped, we are ready to Save for Web...

Click the File link in the top menu and select Save for Web and Devices - OR use the keyboard shortcut: Ctrl+Alt+Shift+S - this will take you through to saving for web.

First make sure that you are viewing 4up - that is 4 image options in a grid on the left (with the top left one being the original image followed by 3 optimized versions at different quality). Select the top right one, and then on the right - select image type: JPEG (you can save GIF, PNG and BitMap images as well, but for now we are going with a JPEG). Next, set the quality slider to 60 (anything from 50 to 70 is good for web and email, remembering that the higher the number the larger the file will be).

When you have defined the image quality - click the Save button at the bottom of the screen. Make sure you save the resized version in a different location (or with a different name) or you will end up overwriting the original file (you don't want to do that).

That's about all there is to it - resizing images doesn't take long, and with the powerful save for web feature in Photoshop - your smaller version will maintain visual quality while being a fraction of the original size.

In the example above - my original image is 2.74MB and the resized, cropped version is a svelte 76KB.

Video Resources:
How to Resize an image and Save for Web - using Photoshop CS4

How to Resize and Crop an image before saving for Web - using Photoshop CS4