For beginners: How to crop an image in Adobe Photoshop


This tutorial explains how to crop an image to a certain size without the image distorting. This has many different uses - one of which is inserting an image into a specific space on your website. You can have scripts which will automatically crop an image to a certain size. However this does have its problems - the script will generally crop the image so that the centre of the image remains - but this can chop off essential parts of the image around the edge. This tutorial will show you how to manually crop the image so you have control over how the end image looks.

Example: we need an image to fit into a space which is 320 x 235 pixels.

Step 1 / Open her up

Open your image in Photoshop. Here you can find out how large the current image is by selecting 'Image' from the menu. In my example, the image is 850 pixels wide and 565 pixels high.

Step 2 / Create new document

Create a new document in Photoshop and set the size of this to the exact size you wish the cropped image to be. In this case 320 pixels wide x 235 pixels high. (For images on the web, sizes are always in pixels and the colour mode should always be RGB - as opposed to CMYK.)

Step 3 / Drag her in

Click back onto your image and select the Move Tool (hot key V). Click and drag your image onto your new Photoshop document. As the image will be much larger than your new document, only a portion of it will be visible.

Step 4 / Transformer

Select Free Transform from Edit on the menu (hot key cmd T). This shows the outline of the image.

You can now adjust the size of the image. Simply hold down the Shift key (at all times), click on a corner of the black outline and drag to the size you require. Keep the Shift key down whilst resizing as this prevents the image from distorting. When the image is closer to the document size you can release the Shift key and move the image around within the document to ensure the right parts of the image are showing. Move the image around by clicking and dragging with your mouse, or by using the arrow keys on your keyboard. Resize and move around until you are happy with the cropped image.

Please note: Once you've resized an image to be smaller, you can't make it larger again as this will cause the image to be blurred/bitty.

Step 6 / Save for web

If your image is to be placed onto the web, save it as follows.

You now have a brilliantly cropped image!

Please note: this image has been purchased from istockphoto. If you wish to use it please purchase it from their website.