Web Diner's Commerce Tutorial - A Simple Order Form Solution

Web Diner's Guide to E-Commerce for Small Businesses

Tips for Cropping, Adjusting and Sharpening Photos in Photoshop

Photoshop is a professional level photo and paint package for Windows and the Mac. You can download an evaluation version at the Adobe web site.

The following tutorial was written for Photoshop version 4 or 5.

Tips for Creating Great Photos in Photoshop

You can scan or import a digital picture directly into Photoshop by selecting File/Import/Select Twain Source from the Photoshop menu bar. Once you've selected the scanner or camera, you can then open your images by selecting File/Import/Twain.

Cropping

Most pictures will initially need cropping, brightening, and sharpening. To crop an image in Photoshop, you will want to select the area you want to crop to using one of two methods:

You can use the Crop Tool to select the area you want to crop to.You'll find the Crop Tool by holding down the Marquee tool as shown in the image to the right. Once you've selected the area that you want to crop to, hit Enter on the keyboard to crop.

You can use the Marquee Tool to select the area you want to crop to, then select Image/Crop or Edit/Crop depending on which version of Photoshop you're using.

Be bold with cropping! There's no reason why visitors to your web site should wait to download a picture that contains mostly background. The more you crop, the more focused your image will be.

Resizing

The next step is to resize the image. We recommend that you keep the image no larger than 200 pixels in any direction. Select Image/Image Size. Change the width or height to the size you want to achieve, making sure that the Constrain Proportions box is checked.

Sharpening

As you can see from our example scan, the image still needs work.This is an antique postcard, and the original scan was pretty good, but it can still be improved. At this point, you might want to start working with copies of the image, so that you can experiment with different settings.

To make a copy of the image, select Image/Duplicate.

sharpening the scan Sharpen the image next. Select Filter/Sharpen/Unsharp Mask.Change the amount of crispness in the image by increasing or decreasing the Radius amount.

Adjusting Brightness and Contrast

The next step is to brighten the image and adjust the contrast. You can give the Auto Adjust feature a test drive by selecting Image/Adjust/Auto Levels. Sometimes this will get the contrast you need, sometimes not. If that doesn't fix the contrast, select Image/Adjust/Levels, or use Control+L on Windows, or Command+L on the mac. Increase the darkness of the dark areas of the image by dragging the black triangle, found under Input Levels, towards the center. To increase the lightness of the white areas of the image, drag the white triangle under Input levels towards the center. The last step will be to save this image.

Saving the File for the Web

Photographs always save as smaller file sizes and better quality using the JPG file format. Select File/Save As, and select JPG. You'll have a choice of how high or low a quality jpg you want to save. Try saving the image as a level 3, 4, or 5 jpg. Remember when you're saving web graphics that you'll make your life much easier if you always use lower case, and never use symbols (like *&%?#) in your file names. Remember to include the .jpg file extension in the file name. Our example image is named card3.jpg and the final file size is just 12K.

Commerce Solutions | Photo Tips