back next

Editing Images

Clip-art and images acquired from the web 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. Microsoft's Image Composer comes bundled with FrontPage, and offers many of the same features and capabilities. Each application generally operates under the same core principals, which are detailed below.

For the specifics of a particular application, see the help and tutorials included with the software. They are a good reference when stuck at a particular point, or to just get a better sense of an application's possibilities. In addition, many online tutorials are available:

Adobe Photoshop/Imageready Tutorial:
http://hotwired.lycos.com/webmonkey/design/graphics/tutorials/tutorial1.html
Macromedia Fireworks Tutorial:
http://hotwired.lycos.com/webmonkey/98/30/index2a.html
Resizing Large Images with Macromedia Fireworks:
http://www.depauw.edu/weba/training/image-resize.asp

Resizing Images

Chances are, your imported image isn't the exact size it needs to be for your site. To resize an image, choose Image Size 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).

As a general rule, never use a graphic that is any larger than the size it is to be displayed on your site. For example, if you create a graphic at 800 x 400 pixels, do not display that graphic at 200 x 100 pixels. Although the graphic is displayed at a smaller size, the file still downloads at full size and the browser reduces the display size. In the DePauw template, the maximum width of the content area is 605 pixels. Therefore, you will rarely, if ever, need an image larger than 605 pixels wide. Also keep in mind that some space around an image is good design practice, so a typical maximum size would be about 580 pixels wide. (One exception would be using the wide template, which allows for a 765 pixel wide content area. Consider this template for photo gallery pages, where you can put two 380 pixel images side by side down the page.)

Once you've resized the image, you may notice a loss of resolution quality. Unsharp Mask (under Filters) is a good tool for precisely sharpening an image into focus, especially those taken with a digital camera.

If you do want to use a large graphic, consider creating a thumbnail that leads to the graphic. Use the Auto-thumbnail function in Dreamweaver or FrontPage to create both the thumbnail and a hyperlink to the full-size picture. A page of thumbnails leading to these larger images is helpful to visitors who want to scan your site, particularly those on a dial-up modem connection.

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.

back next