Web based School
|
||
Chapter
10 Chapter 10Creating Web Page ImagesYou 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.)
Choosing Graphics SoftwareYou 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.)
Almost all the graphics you'll see in this guide 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 guide Creating Your Own Web Page Graphics, by Andy Shafran and Dick Oliver (yep, that's me). Graphics BasicsTwo 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. Preparing Photographic ImagesTo 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.
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.
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. Controlling JPEG CompressionPhotographic 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. Creating Banners and ButtonsGraphics 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 noteguide 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. Reducing the Number of ColorsOne 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.
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.
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. Interlaced GIFs and Progressive JPEGsBoth 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.
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.
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:
SummaryIn 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. Q&A
Quiz Questions
Answers
Activities
|
 |
 |
Popular Tutorials
-
MS Access
1109
-
C++
1222
-
HTML
584
-
JavaScript
616
-
Vbscript
873
-
Oracle
473
-
VC++
875
-
SQL
2959
-
XML
514
-
Java
814
-
Perl
455
-
Linux
451
