===============================================================

Scanning for the Web

Module D41h

 ===============================================================

Contents

About this document
Audience and Objectives

If you are using a browser, you can click on this separator wherever you see it to return to the Contents ===============================================================

Overview

This exercise gives you practice scanning images, fixing them, and incorporating them into a Web page. It is intended also to provide you with scanned materials to use for the project discussed in module D45h.

===============================================================

Scan an Image

If you're working in a lab, you'll need to use a scanning station, because the scanners aren't available through the network. Bring your Zip or diskette! If you're at home, and have a scanner and Photoshop (or similar graphics program), you can just use your own computer.

First, find some images to scan. At least one of them should be from a newspaper, magazine, flyer, or other screened print publication. You can also use printed photos. Then run a graphics program (Photoshop, ImageReady, Fireworks, or something of your own) and bring up the scanning software for the scanner:

TWAIN is the protocol (machine "language") for communicating between computers and scanners. Scanning software varies by who made the scanner, and also by version. You may also find the same model of scanner running under different control software on different computers! Here's the general procedure:

  1. Place the desired page on the glass carefully (do your best to get it straight!) and create a preview image.
  2. Use the mouse to select the area of the page you want to use.
  3. Set the resolution or image size. Resolution can be as little as 72 dpi, but working at a higher resolution gives you more "wiggle room" in case you decide to crop the image or enlarge part of it. If the scanning software gives you the option of setting the size of the image (which is another way of setting the resolution) make the image at least as large as the picture you want to use in the Web page; making it larger gives you more options later if you decide to manipulate it.
  4. Check the image mode: if you're scanning a color picture, scan in at least 16 bit color depth ("thousands of colors"); otherwise, use greyscale or drawing mode.
  5. Have the final image scanned or "placed" into the graphics software.
  6. If necessary, close the scanning software window.
    ===============================================================

Fix the Image

You'll often find the photo surrounded by "junk" you don't want. Use Photoshop or Fireworks' selection or cropping tools to eliminate the unwanted portions. Use Photoshop's Rubber Stamp or Paintbrush tool to fill in missing areas. Zoom in as needed to get a good view of what you're doing, and change your "brush" to get the right size for each part.

Because the printed matter is screened, you may find that resizing the image creates a moiré effect. One way to prevent this is to use a Gaussian blur filter.

The idea is to eliminate the "dottiness" but not make the image look too blurred. Experiment with different pixel sizes on the blur filter to smoothe out the dots without degrading image quality. The best effects are usually between 0.5 and 1.5 pixels. Here's a "before and after" example of a photo scanned from WCC's Live - Work - Learn publication:

Original scan. Maginfying glass shows the graininess resulting from the printer's screening.

Gaussian Blur of 0.9 pixels applied. Note the smoothness of the texture, but the slight loss of clarity of lettering on the rider's helmet.

 

===============================================================

Display the Images

Put at least 2 scanned images into the project page you're building. (Module D45h)

Audience: This is for people who have learned the basics of Adobe Photoshop and want to use it to scan images for the Web. 
Objectives: When you successfully complete this lesson, you will be able to...

===============================================================

About this document...
Module D41h: This document is part of a modular instruction series in computer technology. For more information, see the overview or the list of modules in this series, D: Desktop Publishing and Computer Graphics. This document has been used in the following classes: INP 143

Author: Laurence J. Krieg
Institution: Internet Professional Department, Washtenaw Community College
History: Original: June 2000; This revision posted Monday, 31-Aug-2009 11:47:56 EDT
Copyright © 2000, Laurence J. Krieg, Washtenaw Community College
Instructors: You may point to this file in your Web-based materials.
Students: you may make a copy for your personal use.
All other uses: contact the author, Laurence J. Krieg for permission.
===============================================================