You don't have to be an artist to put high-impact graphics and creative type on your Web pages. You don't need to spend hundreds or thousands of dollars on software, either. This chapter tells you how to create the images you need to make visually exciting Web pages. It also explains how to make those images appear as quickly as possible, even for people using slow modems to access them. (Chapter 11, "Making Pages Display Quickly," presents more techniques for speeding up the display of your graphics, too.)
Time Saver: One of the best ways to save time creating the graphics and media files is, of course, to avoid creating them altogether. Any graphic or media clip you see on any site is instantly reusable as soon as the copyright holder grants (or sells) you the right to copy it. Grabbing a graphic from any Web page is as simple as clicking it with the right mouse button, and picking Save Image As in Netscape Navigator or Save Picture As in Microsoft Explorer. Extracting a background image from a page is just as easy: Right-click the background and choose Save Background As.
You can use almost any computer graphics program to create graphics images for your Web pages, from the simple Paintbrush program that comes free with Microsoft Windows to an expensive professional program such as Adobe Photoshop. If you have a digital camera or scanner attached to your computer, it probably came with some graphics software capable of creating Web page graphics.
If you already have some software that you think might be good for creating Web graphics, try using it to do everything described in this chapter. If it can't do some of the tasks covered here, it probably won't be a good tool for Web graphics. To Do: One excellent and inexpensive program that does provide everything you're likely to need is Paint Shop Pro from JASC, Inc. If you are using a Windows computer, I highly recommend that you download a free, fully functional evaluation copy of Paint Shop Pro before reading the rest of this chapter.
(Macintosh users should download BME at http://www.softlogik.com instead, because Paint Shop Pro is currently available for Windows only.)
Just A Minute: The Paint Shop Pro software you can get online is a fully functional shareware evaluation copy. If you agree with me that it's essential for working with Web page images, please be prompt about sending the $69 registration fee to the program's creators at JASC Software. (The address is in the online help in the software.) I'm confident that you're not going to find any other graphics software even close to the power and usability of Paint Shop Pro for anywhere near $69. (In fact, I have all the leading super-expensive commercial graphics programs from Photoshop on down, and Paint Shop Pro is the best by far for day-to-day work with Web graphics.)
Almost all the graphics you'll see in this book were created with Paint Shop Pro, and this chapter 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, pick up a copy of the Que Publishing book Creating Your Own Web Page Graphics, by Andy Shafran and Dick Oliver (yep, that's me).
Two forces are always at odds when you post graphics and multimedia on the Net. Your eyes and ears want everything to be as detailed and accurate as possible, but your clock and wallet want files to be as small as possible. Intricate, colorful graphics mean big file sizes, which can take a long time to transfer, even over a fast connection.
So how do you maximize the quality of your presentation while minimizing file size? To make these choices, you need to understand how color and resolution work together to create a subjective sense of quality.
The resolution of an image is the height and width measured in pixels (the individual dots that make up a digital image). Large, high-resolution images take longer to transfer and display than small, low-resolution images. Resolution is usually written as the width times the height; a 300x200 image, for example, is 300 dots wide and 200 dots high.
You might be surprised to find that resolution isn't the most significant factor determining the storage size (and transfer time) of an image file. This is because images used on Web pages are always stored and transferred in compressed form. The mathematics of image compression is complex, but the basic idea is that repeating patterns or large areas of the same color can be squeezed out when the image is stored on a disk. This makes the image file much smaller, and allows it to be transferred faster over the Internet. The original appearance of the image can then be restored by the Web browser program when the image is displayed.
In the rest of this chapter, you'll learn exactly how to create graphics with big visual impact and small file sizes. The techniques you'll use to accomplish this depend on the contents and purpose of each image. There are as many uses for Web page graphics as there are Web pages, but four types of graphics are by far the most common:
The last of these will be covered in Chapter 13, "Backgrounds and Color Control." But you can learn to create the other three kinds of graphics right now.
To put photos on your Web pages, you'll need some kind of scanner or digital camera. You'll often need to use the custom software that comes with your scanner or camera to save pictures on your hard drive. Note, however, that you can control any scanner that is compatible with the TWAIN interface standard directly from Paint Shop Pro and most other graphics programs--see the software documentation for details.
Time Saver: If you don't have a scanner or digital camera, any Kodak film-developing store can transfer photos from 35mm film to a CD-ROM for a modest fee. You can then use Paint Shop Pro to open and modify the Kodak Photo CD files.
Once you have the pictures, you can use Paint Shop Pro (or a similar graphics program) to get them ready for the Web.
You want Web page graphics to be as compact as possible, so you'll usually need to crop or reduce the size of scanned images. Follow these steps to crop an image in Paint Shop Pro:
Figure
10.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.
Time Saver: Notice that in Paint Shop Pro the resolution of the current image is shown at the bottom-right corner of the window. The image may look larger or smaller than it really is, because Paint Shop Pro automatically adjusts the image to fit in the window while you're working on it. To see the image at the size it will appear on a Web page, select View | Normal Viewing (1:1).
Most graphics programs offer two different ways to change the resolution of an image, and one technique gives much nicer-looking results than the other. The names of these techniques vary from program to program, but in Paint Shop Pro you should always use the Image | Resample command (instead of Image | Resize). You'll get the Resample dialog box, shown in Figure 10.2.
You'll almost always want Custom size and Maintain aspect ratio selected. When you enter the width (in pixels) which you'd like the image to be, the height will be calculated automatically to keep the image from squishing out of shape.
Figure 10.2. To change the size of a photographic image, always use Image | Resample.
Many photographs will require some color correction to look their best on a computer screen. Like most photo editing programs, Paint Shop Pro offers many options for adjusting the brightness, contrast, and color balance of an image.
Most of these options are pretty intuitive to use, but the most important and powerful one may be unfamiliar if you're not an old graphics pro. Whenever an image appears too dark or too light, select Colors | Adjust | Gamma Correction. For most images, this works better than Colors | Adjust | Brightness and Contrast, because it doesn't "wash out" bright or dark areas.
As shown in Figure 10.3, you can click on the small arrow buttons in the Gamma Correction dialog box to adjust the correction factor until the image looks about right. (Numbers above 1 make the image lighter, and numbers between 1 and 0 make the image darker.)
Figure 10.3. Gamma Correction is the best way to fix images that are too dark or too light.
Most of the other image editing tools in Paint Shop Pro offer small preview windows like the one in Figure 10.3, so a little playful experimentation is the best way to find out what each of them does.
Photographic images look best when saved in the JPEG file format. When you're finished adjusting the size and appearance of your photo, select File | Save As and choose the JPG-JPEG-JFIF Compliant file type with Standard Encoding, as shown in the bottom half of Figure 10.4.
Figure 10.4 also shows the File Preferences dialog box you'll see when you click the Options button. You can control the compression ratio for saving JPEG files by adjusting the compression level setting between 1 percent (high quality, large file size) and 99 percent (low quality, small file size).
In Chapter 11 you'll see how various JPEG compression levels affect the quality of typical images.
Figure 10.4. Paint Shop Pro allows you to trade reduced file size for image quality when saving JPEG images.
Graphics that you create from scratch, such as banners and buttons, involve different considerations than photographs.
The first decision you need to make when you produce a banner or button is how big it should be. Almost everyone accessing the Web now (or in the foreseeable future) has a computer with one of three screen sizes. The most common resolution for notebook computers and televisions is 640x480 pixels. The resolution of most desktop computers today is 800x600 pixels, and 1024x768 pixels is the preferred resolution of most new computers and future laptops. You should generally plan your graphics so that they will always fit in the smallest of these screens, with room to spare for scrollbars and margins.
This means that full-sized banners and title graphics should be no more than 600 pixels wide. Photos and large artwork should be from 100 to 300 pixels in each dimension, and smaller buttons or icons should be 20 to 100 pixels tall and wide.
Figure 10.5 shows the dialog box you get when you select File | New to start a new image. You should always begin with 16.7 Million Colors (24 Bit) as the Image type. You can always change the size of the image later with Image | Crop or Image | Enlarge Canvas, so don't worry if you aren't sure exactly how big it needs to be.
For the Background color, choose White to match the background that most Web browsers ordinarily use for Web pages. (You'll see how to change the background color of a page in Chapter 13. When you know you'll be making a page with a non-white background, you can choose a different background color here, too.)
Figure 10.5. You need to know the approximate size of an image before you start working on it.
When you enter the width and height of the image in pixels and click OK, you are faced with a blank canvas--an intimidating sight if you're as art-phobic as most of us! Fortunately, computer graphics programs such as Paint Shop Pro make it amazingly easy to produce professional-looking graphics for most Web page applications.
To make the title banner and buttons in Figure 10.6, for instance, all I did was pick colors from the color palette on the right, click on the text tool on the left, choose a font and size, and position each word where I thought it looked nice. I used the Image | Special Effects | Buttonize menu option to automatically add three-dimensional shading to the edges of the buttons. Other sophisticated effects like drop shadows, sunburst gradient fills, and textured papers are equally effortless.
Figure 10.6. Many sharp-looking Web page images can be created with minimal artistic skill or computer graphics experience.
One of the most effective ways to reduce the download time for an image is to reduce the number of colors. This can drastically reduce the visual quality of photographic images, but works great for most banners, buttons, and other icons.
In Paint Shop Pro, you can do this by selecting Colors | Reduce Color Depth. (Most other graphics programs have a similar option.) The software will automatically find the best palette of 16 or 256 colors for approximating the full range of colors in the image.
Just A Minute: Even if you use only two or three colors in an image, you should still select Colors | Reduce Color Depth | 16 Colors before you save it. If you don't, the image file will waste some space leaving room for lots of colors even though very few are actually in use.
When you reduce the number of colors in an image, you will see a dialog box with several choices (see Figure 10.7). For Web page images, you will almost always want to choose an Optimized palette, and Nearest color instead of Error diffusion or any form of dithering.
Figure 10.7. Reducing the number of colors in an image can dramatically decrease file size without changing the appearance of the image much.
Time Saver: Dithering (called error diffusion in Paint Shop Pro) means using random dots or patterns to intermix palette colors. This can make images look better in some cases, but usually should be avoided for Web page graphics. Why? Because it substantially increases the information complexity of an image, and that almost always results in much larger file sizes and slower downloads. So, listen to your Great Uncle Oliver and "don't dither!"
There is a special file format for images with a limited number of colors, called the Graphics Interchange Format (GIF). To save a GIF image in Paint Shop Pro, select File | Save As and choose GIF-CompuServe as the image type.
Both the GIF and JPEG image file formats offer a nifty feature to make images appear faster than they possibly could otherwise. An image can be stored in such a way that a "rough draft" of the image appears quickly, and then the details are filled in as the download finishes. This has a profound psychological effect, because it gives people something "complete" to look at, instead of drumming their fingers waiting for a large image to pour slowly onto the screen.
A file stored with this feature is called an interlaced GIF or progressive JPEG. Despite the two different names, the visual results are similar with either format.
Most graphics programs that can handle GIF files enable you to choose whether to save them interlaced or noninterlaced. In Paint Shop Pro, for example, you can choose the Version 89a-Interlaced Sub type on the Save As dialog box, just before you save a GIF file (see Figure 10.8).
To save a progressive JPEG file, choose the JPG-JPEG-JFIF Compliant image type and the Progressive Encoding Sub type.
Figure 10.8. Paint Shop Pro lets you save interlaced GIF images, which appear to display faster when loading.
Just A Minute: The progressive JPEG standard is quite new and is supported only by Netscape Navigator version 2.0 or higher and Microsoft Internet Explorer version 3.0 or higher. Browsers that don't support progressive JPEG will not display the file as if it were just a regular JPEG--they will display nothing at all or a message saying the file isn't recognizable. Interlaced GIFs, on the other hand, will appear correctly even in older browsers that don't support two-stage display.
Figure 10.9 shows a Web page with a title banner saved in the interlaced GIF format being downloaded from the Internet. Notice that the banner appears blocky. If this weren't an interlaced GIF, only the top half of the image would be showing at this point in the download.
Figure 10.10 shows the same page a few seconds later, when the download is complete.
Figure 10.9. The banner at the top of this page looks blocky because the interlaced GIF file isn't done loading yet.
Figure 10.10. The same page as in Figure 10.9, after all images are done loading.
Just A Minute: Image files smaller than about 3KB will usually load so fast that nobody will ever see the interlacing or progressive display anyway. In fact, very small images may actually load more slowly when interlaced. So save these tricks for larger images only.
To Do: Well don't just sit there reading, grab that mouse and crank up Paint Shop Pro! I can't tell you what graphics best convey the mood and spirit you'd like for your site. But here are a few pitfalls to avoid and shortcuts to take as you navigate the uncharted territory of your own Web graphics:
To help your creative juices start flowing (and perhaps keep them from flowing too wildly), I've provided a number of sample pages with thematic images almost anyone could produce in Paint Shop Pro or an equivalent graphics program. To browse through these pages, go to
http://www.mcp.com/sams/books/235-8/cafe10.htm
and click on the Great Graphics Ideas link.
In this chapter, you learned the basics of preparing graphics for use on Web pages. You saw how to download and use the popular graphics program Paint Shop Pro to work with photos, banners, buttons, and other Web page images. You also found 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.
Don't miss Chapter 11, "Making Pages Display Quickly," for more graphics speed-up tricks.
