Creating Web 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

Select Crop Tool

If 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

Select 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 700 pixels to fit in the Full Content layout of the Western Template. Select Image > Image Size.

  1. Select Constrain Proportions and Resample Image: Bicubic
  2. In Pixel dimensions, set the width to 700 pixels or less; the height will update itself automatically assuming Constrain Proportions is set.
  3. Select 72 in the Resolution text box and pixels/inch in the drop down.
  4. 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.
  • Play around with the brightness and contrast scale bars until you are satisfied with the image. A brightness or contrast of 0 means that the setting is unchanged from the original 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, PNG 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).
Transparent Teapot image
teapot no transparency

For PNG or 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-top and the teapot at right-bottom. The background of the image at top has been left transparent so the background color (blue) shows through around the image.
  • The matte is the background colour you want to use behind your image. If you've enabled Transparency, then the foreground image will be faded at the edges to blend in with the matte colour. If you choose the Matte setting of None, the GIF will have a "hard transparency" with no fading; this is great if you want to be able to use the image on any colour background.
    However if you've disabled Transparency, the transparent areas of your image will be filled in with the matte colour.
  • 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 at the bottom of the screen.
  • 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).