Journalists' Toolkit > Photoshop Tutorials

Basic instructions to be used with any version of Photoshop

Photoshop How-To for Online Photos (6 Steps)

Below are five (5) screen captures from Photoshop. They show how to crop and resize a photo for use on the Web.

The preliminary step, of course, is to transfer your photos from your camera to your hard disk. You'll need to figure out how to do that with your camera.

1.

Open the photo file in Photoshop. Use the Crop tool (lower left) to drag a horizontal box around the subject. Double-click inside the crop box to complete the crop.

How to: Select area to crop

Above: Use of the Crop tool.

2.

Open the Image menu and select Image Size to open this dialog box. Change the Resolution to 72 pixels/inch.

How to: Image Size

Above: The Image Size dialog box. Check and make sure that the Resolution is 72 pixels/inch. Change it to 72 if necessary.

In Photoshop CS3, at the bottom where it says "Resample Image," there is a different menu. Select "Bicubic Sharper (best for reduction)" in Photoshop CS3.

3.

Make sure the width and height are linked (below). If you don't see the little chain link, check the box labeled "Constrain Proportions" (above).

How to: Re-size

Above: Look for the little chain link. You need that.

4.

Then change the height to 400 pixels. Click OK. Often there will be a maximum height and a maximum width for a photo in an online presentation. After you set one measure, you need to check the other measure and make sure it does not exceed the maximum allowed.

Your maximum height may be different. This example uses 400 pixels as a maximum height and 750 pixels as a maximum width.

5.

Use the Info palette (below left; open it from the Window menu) to see how wide your crop box is. Change the width of the crop box by dragging the side handle (circle, below right). In this example, we need to bring it down to 750 pixels.

How to: Re-crop

Above: This photo is being re-cropped to 750 pixels wide. (It had been 758 pixels after the first crop.)

If you plan to use these photos in Soundslides, please go to the next Photoshop tutorial now.

If you simply want to put the photo on a Web page, continue on this page.

6.

Open the File menu and select Save for Web. This dialog box will open. Change all the settings to match those shown here, and then click Save. NOTE: If you are using Photoshop CS3, read this important information about image quality.

How to: Save for Web

Above: This is the Save for Web dialog box. Medium quality is perfectly adequate for most online photos. If you choose High quality, the file size will be larger.

NOTE: Save for Web will eliminate all data about the camera as well as any data you have entered in the File Info panel, such as caption and copyright.

Please note that there is an additional page of instructions for photos that you will be using with Soundslides.