Creating Web-Safe Images Using Adobe Photoshop

This tutorial will help you use Adobe Photoshop to edit original photos for Web use. Please remember to save a copy of your original image before making the modifications described below.

Setting Image Mode

Some images are set to Indexed color, which cannot be displayed on the web. Select Image > Mode > RGB Color (or Grayscale for non-color images).

Cropping the image

If "select the crop tool" you only want to use a certain part of the image, you will need to crop the desired area. Click on the Crop icon from the tool bar (shown at right), then drag a rectangle around the area that you want to crop (this is done by holding down the left mouse button). You can adjust this crop box by pulling the edges of the crop area until you are happy with the resulting image. Then double-click inside the selection to crop the document or hit escape to avoid cropping the document.

Setting the Size and Resolution

Images saved on the Web should not have a resolution greater than 72 DPI (DPI = Dots per Inch), and should be no wider than 500 pixels to fit in the WWU template. Select Image > Image Size.

Make sure Constrain Proportions and Resample Image: Bicubic are selected.
In Pixel dimensions, set the width to 500 pixels or less; the height will update itself automatically assuming Constrain Proportions is set.
Select 72 in the Resolution text box and pixels/inch in the drop down.
The image at right shows what your window may look like after making the modifications

After clicking on OK, you should notice your image shrink in size.

Changing the Contrast and Brightness

If an image seems too light or dark, or if the colors seem unnatural, you may need to adjust the contrast and lightness settings. Select Image > Adjustments > Brightness / Contrast... and

Be sure that Preview is checked to show you what the image will look like if you make the change.
A brightness or contrast of 0 means that the setting is unchanged from the original image.
Play around with the brightness and contrast scale bars until you are satisfied with the image.
Click on OK when you are done to save your settings.

Sharpening the image

If an image seems too blurry, you may be able to fix its appearance by sharpening it. Click on your image, and then click on Filter > Sharpen >Unsharp Mask... Select Preview so you can see how your selections affect the image. Set Threshold to 0, Radius to 1.0 and Amount to 30%. Then adjust these settings until you are satisfied. Please note that sharpening too much can make your image look worse that it would by being a little blurry; use your own judgment on how much sharpening an image needs. Always sharpen as the last step in making image adjustments.

Saving the image for the Web

Once you are satisfied with all the changes made to your image, you will need to save it as a Web-compatible format. Click on File > Save for Web . Notice that the image is shown twice for comparison - the image on the right is the one you are saving for the web and is being affected by the settings you select.

Make sure that the format is set to JPEG for photos, GIF for drawings or photos that have transparent areas.

For JPEG (photos):

Select the Optimized checkbox.
Set quality to High - or Quality Number to 60 - you can then decrease this until you see a difference. Lower quality creates a smaller file so select the lowest quality which still looks as crisp as the original (on the left).

For GIF (drawings or photos with transparency):

Set Lossy: 0 which results in a good quality image
Select Transparency if you have areas of your image where there is no background. This is the difference between the teapot on the right and the teapot on the left where the background has been left transparent so the background color of the page shows through.
Leave Interlaced unchecked (this ensures compatibility with the Flash image gallery included with the WWU template).
You can preview your image by looking at the right hand side of the window.
Once you are ready to save your image, click on Save.
A new window will allow you to choose a file name and location for your image. Click on Save when you have found an appropriate location and entered in a name. Remember that file names for the web should never contain spaces, uppercase letters or special characters (dash or underscore ok).