In this hour, you learn the basics of preparing graphics for use on Web pages. You also find out how to decide between the various graphics file formats used for Web page graphics, and how to make images that appear in stages for the illusion of speed.
(No HTML tags covered in Hour 8.)
I recommend that you download and use the popular graphics program Paint Shop Pro to work with photos, banners, buttons, and other Web page images (though you can use any other graphics program, including the Macintosh program BME).
Crop(Figure 8.1)
Use the rectangular selection tool to crop images as tightly as possible. Even after cropping, your image may be larger than it needs to be for a Web page. Generally, a complex photograph should be no more than 300x300 pixels, and a simpler photo can look fine at 100x50 or so.
Resize(Figure 8.2)
To change the size of an image, select Image | Resize to get this dialog box. You'll almost always want Smart size, Resize all layers, and Maintain aspect ratio selected.
Adjust Colors(Figure 8.3)
Gamma correction is the best way to fix images that are too dark or too light, and balance the color of images that aren't quite the right hue.
Save as JPEG(Figure 8.4)
Save photographic images in the JPEG format, and click the Options button in the Save As dialog box to control the file size and image quality. Progressive JPEG images will seem to appear faster on your pages, but will not work with older (pre-3.0 version) Web browsers.
Starting a New Image(Figure 8.5)
You need to know the approximate size of an image and the intended background color (see Hour 10) before you start working on it.
Add Text and Effects(Figures 8.6 - 8.9)
Use the text tool to create elegant lettering in a graphics image, then add special effects. Like most menu choices in Paint Shop Pro, the Image | Effects | Chisel command gives you an easy-to-use preview of the effects.
Decrease Colors(Figure 8.10)
Reducing the number of colors in an image can dramatically decrease file size without changing the appearance of the image much.
Save as GIF(Figure 8.11)
Save any image that looks okay with 256 or fewer colors in the GIF file format. Like progressive JPEG images, interlaced GIF images sometimes appear to display faster when loading. (You'll learn how to make parts of a GIF image transparent in Hour 10, and how to create animated GIFs in Hour 11.)
This mini-site demonstrates a few of the many styles of buttons and title banners that you can easily create with Paint Shop Pro (or other similar graphics programs). All the pages here use the same color scheme and fonts, but a variety of different graphics techniques.
See how the compression setting for a JPEG file and the number of colors in a GIF file effect the appearance and file size of two graphics images. Each 3K of file size will take about 1 second to download via a standard 56Kbps modem. (A 30K file will take about 10 seconds to appear, for example.)
"Almost all the graphics you'll see in this book were created with Paint Shop Pro, and this hour uses Paint Shop Pro to illustrate several key Web graphics techniques you'll need to know. Of course, there are so many ways to produce images with Paint Shop Pro, I can't even begin to explain them all. If you'd like a quick but complete tutorial on using Paint Shop Pro to make high-impact Web page graphics, I recommend that you check out the guest-authored tutorials available online from JASC when you register the software."
The Electric Diner
Compression Comparison