Important things to know about scanning.
Typical Modes of Images
Although the specifics of getting the best results from your scanner vary depending on what hardware you are using, there are a few general tips that can help you out.
Most scanning software lets you select the mode. Adjust the mode depending on what type of image you are scanning. The most typical modes are line art, halftone, grayscale, and color.
Line art is for things that contain solid areas of black and white. You use this mode if you are scanning a black-and-white logo off your letterhead or a pen-and-ink drawing. The key to this mode is that it doesn't read any shades of gray.
Halftones are pictures from books, newspapers, and magazines. When pictures are printed in newspapers, the continuous tones of the photographs need to be converted into tiny black dots of varying sizes. Pictures in books and magazines are made up of dots too, only a lot smaller. In the case of color pictures, the dots are yellow, black, magenta, or cyan, all layered on top of each other to form the picture. Anyway, the halftone setting is for scanning these kinds of pictures.
To scan actual color or black-and-white photos, use the color and grayscale modes.
Prints and the Resolution
If you've determined what kind of picture you're dealing with and selected the area that you're going to scan, now you need to tell your computer what size and resolution you want. These two settings are related, and most scanning software has a slider for both. Some software, however, assumes you scan things in at screen resolution (72 dpi — dots, or pixels, per inch) and lets you change only the size of the picture at that resolution.
This resolution stuff is important if you're going to scan something in and print it or if you're going to manipulate it in image-editing software. But if it's just a picture for your web page, all you need to remember is to make the settings 72 dpi at 100%. This will ensure that the picture is the same size on the screen as it is in your hands.
If you want the picture half as big on the screen, select 72 dpi for the resolution and 50% for the scale. If you want the picture to be twice as big, make the scale 200%. Or if you want to be really tricky, set the resolution at 144 dpi and the scale at 100%. Remember, scale and resolution are linked. You can either double one or double the other; it doesn't really matter which.
Now that you have your picture scanned in, all you need to do is save it as a GIF or a JPG.
Editing Images
Clip-art (vector type) and images acquired from the web (bitmap type) are generally ready to use "as is". Most others will require some editing before putting them in place on your site. After digitizing an image into your computer, the next step is to open the file with a graphic editing software program. Two of the most common are Adobe Photoshop/Imageready and Macromedia Fireworks, which are both pro-caliber tools, but there are cheaper and less complex alternatives. (ex. Photoshop Elements from Adobe, Paintshop Pro from Jasc…) Microsoft's Image Composer comes bundled with FrontPage, and offers many of the same features and capabilities.
1. Resizing
Chances are, your imported image isn't the exact size it needs to be for your site. To resize an image, choose “Image Size” or “Resize” and convert the measurement units to pixels, which are the standard unit of measurement for HTML tables and therefore the best way to estimate the size of the photo you'll need. Also, since monitors only display 72 dpi (Dots Per Inch), set the image Resolution to 72 (this may be the default or only choice in some applications).
2. Cropping
The easiest way to remove a portion of an image is with the Crop tool. Simply select the part of the image you want to keep, and the crop tool discards the rest. Note that unnecessary parts of an image (for example, a lot of extra background) not only take up screen space, but add to the downloaded file size of the final image (see Optimizing below).
In many cases, resizing and cropping are all the editing your image needs, and you're ready to move on to Optimizing. That said, editing imported images is only part of the Web graphics game. Occasionally, as in the example of a custom logo, you'll want to create an image from scratch.
Optimizing the Image
Optimizing is the process of compressing an image file to reduce its file size. While ideally all images would be left in their original highest-quality state, compression is a necessary evil for web images. Overly large image file sizes increase the total download time of your pages, making your viewers wait longer to see the content. Keep in mind the dramatic difference between the speed of the DePauw network and a dial-up modem connection; pages that load quickly on campus may be intolerably slow over a modem connection.
Formats
Nearly all graphics on the Internet are either JPEG (Joint Photographic Experts Group) or GIF (Graphics Interchange Format) format. Other file formats, such as PNG (Portable Network Graphics) exist, but to be sure that the greatest number of browsers can display a graphic, choose either JPEG or GIF.
1. GIF
As a general rule, GIFs are better suited for graphics with areas of solid or flat color such as illustrations and logo than for photographs. The GIF format also lets you create transparencies, interlacing, and animations.
Use .gif files for:
A transparent GIF allows one color to be set as transparent, usually a background color. All Web graphics are square or rectangular and transparencies are a way to create the illusion of irregularly shaped images. Interlaced images display a rough version of the entire image quickly and then gradually fill in the details. This affords the viewer a sense of the image before it fully downloads, a godsend to those with low bandwidths. Animated GIFs are files that contain multiple images set to display like a slide show. They work on all major browsers and require no plug-ins.
2. JPEG
The JPEG format was designed for photographic images.
Use .jpg files for:
3. PNG
PNG (Portable Network Graphic) is largely considered the format of the future. While it has many advantages, many older browsers (I.E. 4 and Netscape 4 or older) do not support the format at all, and some newer versions still have sporadic problems. Use GIF and JPEG instead.
4. Tagged Image File Format (TIFF)
TIFF is a format of choice for archiving images. It’s the most universal and widely supported format across all platforms. (Mac, Windows, Unix)