Scanning and Editing Images for the Web with Photoshop Elements

Background

  • When you are scanning images, the primary variable to be aware of is resolution. All digital images are composed of a sequence of dots called pixels. The more pixels there are in an image, the higher its resolution. If you select an excessively high resolution when scanning, the image's dimensions and file size will be needlessly large.

Guidelines for choosing a scanning resolution for a web image:

  • If you want your image to appear on the web at about the same size as the original print, then choose a resolution of 72 ppi (pixels per inch).
  • If you want your image to be magnified, then choose a higher resolution. For example, setting a resolution of 144 ppi will effectively double the size of the image.
  • Exceptions: If the image you are scanning needs touching up (perhaps it is over or under-exposed, colors need correcting, etc.), you should scan at at least 2 times the desired resolution so that you have more pixels with which to make the corrections.
  • So, this gives us the following formula for choosing your scanning resolution:
    • 72 x scale x touchup
    • scale = the amount of enlargement or reduction ("2" to double, "3" to triple, etc.)
    • touchup - use "1" if your image is in good shape; use "2" if it needs to be touched up

Where to scan

  • There are two scanners in the Lawrence Library: one by the audio CD's on the main floor, and one in the Information Technology Center Lab on the second floor. To scan your image, follow the directions beside the scanner. The reference librarian on duty can assist you with the scanner on the main floor.

To Crop an image

  1. Open the image in Photoshop Elements
  2. Select the Crop tool (shown at right)
  3. Draw a selection around the part of the image that you want to keep.
  4. To fine-tune adjustments, click and drag the squares on the sides of the selection
  5. Type enter to crop the image

To Adjust the colors or brightness of an image

  • experiment with the different options under the "Enhance" menu.
  • if you're not sure what to use, try the "Quick Fix" command

To Resize and Compress an image for use on the web

  1. Open the image in Photoshop Elements
  2. Select File->Save for Web
  3. Set the "Zoom" in the lower left to 100% if necessary
  4. If the Size of the image needs to be adjusted:
    1. type in a percent reduction in the "New Size" area on the right hand side
    2. click Apply
    3. keep adjusting until the image is the desired size (NOTE: for e-portfolios, make your image no more than 500 pixels wide).
  5. If the image is a photograph, select "JPEG Medium" or "JPEG High" from the "Settings" menu at the upper right. Generally, you want the "Quality" to be as low as is acceptable. This makes the file size smaller which makes the image load faster. Compare the image on the left (uncompressed) with the image on the right (compressed) and lower the "Quality" percentage as much as possible without noticeably degrading the image.
  6. Click OK.
  7. Save the image (NOTE: for e-portfolios, save the image in your site's "images" folder).

To Insert an image on a web page in Dreamweaver

  1. First make sure you have cropped, resized, and compressed your image first (see above steps).
  2. Open your web page and click where you want your image to appear.
  3. Select Insert->Image
  4. Click Yes if a message appears asking you if you want to copy the image to your site folder.

last updated on 2005 NOV 11