The Web is nothing if not visual. In Lesson 2, you learned how to select appropriate images for your site. Now you'll learn a number of ways you can create a visually pleasing Web site using a combination of images and powerful tools.

Select a Graphics Tool

A number of graphics tools are available that are geared specifically for Web site development. This is good news because more sophisticated programs such as Adobe Photoshop are rather expensive. Two relatively low-cost Web-oriented graphics tools are:

• Macromedia Fireworks® from Adobe : From the creators of Dreamweaver and Flash, this product is heavily oriented toward Web site development, and makes it easy to create animations and image maps. It even allows you to "slice" your design into Web page components, generating HTML automatically.
• Corel® Paint Shop Pro® X : This image-editing software's Web-specific tools include one that optimizes your image in a particular format and a "slicing" tool.

Both of these products have a wide range of capabilities, including controlling brush size, applying special effects such as textures and lighting effects, and font control. The more capabilities a graphics program has, the more it costs (for example, Photoshop costs $650 retail) and the longer it takes to learn. If you decide to make your career in the Web business, by all means take the professional route. For the rest of us, an easier, cheaper tool might be more what the doctor ordered. As with your Web design tool, try out some free trial versions to figure out which graphics tool you like best.

Are Your Images Web Friendly?

Preparing images for the Web is quite different from preparing images for print. So, if you've done print publishing before, you may need to "unlearn what you have learned," as Yoda told Luke Skywalker.

The Web has rules for handling images. Basically, they are:

• You should only use JPEG (Joint Photographic Experts Group) and GIF (Graphic Interchange Format) images.
• Your image should be as small (in bytes) as possible. The smaller the file, the faster it loads.
• The resolution of your images should be 72 dpi (dots per inch).

Follow these simple rules and you shouldn't have any problems with download and pageload times.

Smaller Is Better

Both JPEG and GIF are compressed formats. This means that when you save anything in either format, the resulting file is smaller than it would be if you had saved the same image in uncompressed formats. By contrast, TIFF (Tagged Image File Format, which use the .tif extension) is among the highest-quality image formats. This format is typically used to save images that ultimately wind up in a printed publication.

GIF and JPEG are examples of two ways images can be compressed. The GIF format is excellent for compressing images with relatively few colors or no gradations in color, because it reduces the size of images by limiting the number of colors. The JPEG format reduces the quality of the image by selectively discarding information about the image that the viewer is unlikely to notice. That's why JPEG is best for compressing images with lots of colors. Drawings and clip art images make great GIFs, whereas color photographs look best as JPEGs.

What does all this mean for you? You're going to have to spend a lot of time manipulating your images. It's safe to say that you're probably going to spend more time fooling around with your images than working on the formatting of associated text.

What's Your DPI?

You'll find that a digitized image is often quite large -- so large, in fact, that it barely fits on your monitor's screen. This is a good thing! When you shrink the image in your graphics application, you also decrease its file size without compromising its quality. Most graphics software enable you to choose new dimensions for an image.

When reviewing Web development sites, you might come across the term ppi (pixels per inch). For the purposes of this course, you can assume ppi and dpi mean roughly the same thing.

As mentioned earlier, images for the Web should be saved at a resolution of 72 dpi. If you create images with a higher dpi, they may appear larger onscreen than you intend.

Nice Proportions

Notice as you move around the Web that images are usually proportional to the Web design -- no image is too big or too small. You might want to copy some of these images to your own computer. Open some in your graphics software and note their dimensions. Pretty soon you'll have a good sense of good image sizing parameters.

Take some time to play around with resizing your own images. Always resize them proportionally so that when you change one dimension, the other is changed by the same percentage. You can use HTML to choose size attributes for an image after you've placed it on a Web page you're working on, but the full-size image must still be downloaded when someone accesses your page. If you size the image file itself before you add it to the page, it will be smaller to start with, and will download more quickly.

Images add pizzazz to your Web site but also provide a good way to link pages to each other. In the next section, learn about these links and how to connect pages to each other and other pages on the Web.