|
|
by Dick Oliver
Whether you are painting your Web page graphics "by hand," modifying existing artwork, or scanning your favorite photos, graphics software like Paint Shop Pro can do some of the hardest work for you.
This chapter shows you how to find, scan, or capture existing graphics and introduces a host of automatic tools to create, modify, and enhance images at the push of a button. Then it explains how to use certain effects to create snazzy buttons, 3D titles, and backgrounds as quick as you can click.
Most of the examples in this chapter will use Paint Shop Pro, a shareware graphics program included on the CD-ROM with this book and introduced in Chapter 16, "Bigger, Faster, Better Graphics." Most other commercial graphics programs include similar commands to the ones demonstrated in Paint Shop Pro.
You probably use your computer for other things besides building Web pages. You may even use it to build old-fashioned paper pages with a word processor or page layout program. Or perhaps you've created or bought some other programs that display interesting graphics or type. In any of these situations, and many others, transferring part of an image you see on your computer screen to a Web page can be useful.
Figure 17.1 shows a carefully laid-out page that I created in Adobe PageMaker for a paper publication. Suppose I wanted to post this page on the Internet. How would I do it? Even though PageMaker has a built-in Web page export feature, I would lose all the fancy typography and borders at the top of the page if I used it. PageMaker doesn't have a command that enables me to export this entire title as a graphic that I could load into Paint Shop Pro.
The solution to my dilemma is to capture an image of the title from my computer screen while the PageMaker program is running. There are two easy ways to do this:
In this case, I opened both PageMaker and Paint Shop Pro at the same time and hid all page layout guidelines in PageMaker. Then I selected Capture | Setup in Paint Shop Pro, made sure that Capture/Area was selected, and clicked the Capture Now button. Paint Shop Pro automatically minimized its own window so PageMaker's window became visible.
I clicked with the right mouse button inside the PageMaker window, and the mouse cursor turned to a crosshair. This crosshair indicates that Paint Shop Pro is ready for an area to be specified. One left-button click to the top left of the title and one click to the lower right corner of the title is all it takes for the image to be cropped and captured directly into Paint Shop Pro. (If I had selected Full Screen, Client Area, Window, rom or Object instead of Area in the Capture Setup dialog box, only one right mouse click would have been needed to capture the image.)
Once the title graphic has been captured, you can use any of Paint Shop Pro's tools and commands to modify the image. Generally, I recommend saving one copy of the image as captured (see top image in Figure 17.3) and using Edit | Copy followed by Edit | Paste | As new image to create a working copy before you make any modifications (see bottom image in Figure 17.3). That way, if you don't like your changes, you won't have to set up the screen capture again to get the original file back.
| Tip |
If you have other graphics software, such as CorelDRAW!, Adobe Illustrator, or a 3D rendering program, it is probably capable of exporting some file format that Paint Shop Pro can open. (To browse the extensive list of file formats which Paint Shop Pro can handle, select File | Save As and pull down the Save As Type list.) However, the graphics files that your applications save may be at a resolution that is better for paper printing or video production than Web pages, and there can often be a significant difference between the colors you see on the screen and the colors you'll see when you open the resulting graphics file. You may often find it faster and more reliable to simply capture images straight from the screen while a graphics application is running. That way you know the image will appear on your Web page exactly as you see it when you do the capture. This method is also an easy way to capture still images from video clips as you play them back on your screen. |
Imagine for a moment that you want to put that "Scientific World Records" page on the Web. You've captured the fancy title shown in Figure 17.3. You've selected a suitable background graphic, and you've got all the graphics files that were used to print the paper version of the page. So you toss all those graphics together with a little HTML and you should be all set, right?
Wrong. The requirements for Web graphics are radically different than the requirements for printed graphics. In fact, almost all the rules are reversed:
The bottom line is that graphics created for print publications seldom work unmodified for Internet publication. Because most clip art and stock photography was originally designed for print publications, you need to be aware of these differences even if you've never printed a paper page in your life.
Figure 17.4 shows two fairly typical images from a clip art collection, which were used to illustrate the paper version of the article on scientific world's records. Notice that the files are very large; the lower right corner of the Paint Shop Pro window indicates that the image of the Earth is 1,656 by 1,131 pixels. Also notice that the one-third-sized rendition shown doesn't look very interesting because much detail is lost.
To make these images smaller while losing as little detail as possible, I converted them to grayscale by choosing Colors | Increase Color Depth | 256 Colors and then selecting Image | Resample. The Resample command uses sophisticated image processsing math to maintain the best quality when shrinking an image. If I had used Image | Resize instead, the results would have been dramatically less detailed.
| Tip |
To squeeze the absolute best out of images when you reduce their size, always try to resample to exactly one-half, one-quarter, or one-eighth the original size if possible. The mathematical reasons why this works better are beyond what I could explain in this little tip, but trust me, it works. For example, a 12005800 pixel image will usually look better when resampled down to exactly 3005200 pixels than it would if you resampled it to 3125208 pixels, even though the 3125208 image is slightly bigger. If the requirements of your page don't allow a division in size by exactly two, four, or eight, stick to other simple division factors like three, five, or six. |
Another technique for bringing out detail in graphics that will be viewed mostly on a computer screen is to make sure that any thin lines are in a lighter color than the background around them (the opposite of what you'd do on paper). In this case, simply negating the image colors works well to portray stars and a planet in space. Figure 17.5 shows the final images reduced, recolored, and ready for the Web.
Figure 17.5 : White-on-black shows details better on computer screens than black-on-white.
Once the overall size of the images is reduced, you may still need to crop them and reduce the number of colors to get the file size down. The images in Figure 17.5 were reduced to 16 colors with the Colors | Increase Color Depth command after some color adjustments with the Colors | Adjust | Gamma Correct and Colors | Adjust | Brightness | Contrast commands.
All these techniques together reduced the star map image file from 180 K to 23 K in size and the Earth image from 90 K to 18 K. These images are still a bit large for Web pages, but they couldn't be reduced much more without losing so much detail that they'd be difficult to recognize. Because of the relatively large file sizes, I chose to save them as interlaced gifs, which will display a blurred version of the file long before it is completely done downloading. Because these graphics aren't essential in understanding the text content of the page, visitors won't need to wait for the images to finish downloading before they start reading the page.
Such cosmic graphics deserve a suitably celestial background. A starry background tile I found through the Textures and Backgrounds Wonderland site mentioned in Chapter 16 (http://netletter.com/cameo/hotlist/hotlist.htm) does the trick nicely. However, like many backgrounds available on the Web, this background is intentionally provided at a larger size than is appropriate for most Web pages. (Gini Schmitz, the background guru who created it, knows that it's easier to reduce the size of an image than to increase it.)
As with the grayscale graphics discussed earlier, Image | Resample is also the command of choice for reducing the size of full-color graphics. In Figure 17.6, the image is resampled to exactly half its original size in each dimension (from 2505250 pixels to 1255125 pixels).
Most images also have too much contrast and too wide a color range for use as Web page backgrounds. As with size adjustment, it's always easier to decrease contrast and get rid of too much color than the other way around. The most useful command for adjusting background colors is Colors | Adjust | Gamma Correct. This command changes the bright/dark balance in an image without losing any color information. This command is usually better than the Brightness/Contrast adjustment because Brightness/Contrast often washes out the brightest whites or blacks out dark colors. A gamma correction factor between 0 and 1 darkens an image, and a factor between 1 and 4 lightens an image.
A correction of 0.81 is applied in Figure 17.7. I came up with 0.81 just by twiddling the setting up and down until it looked as though white text would show up clearly over the background, but the stars were still easily visible.
Figure 17.7 : Gamma correction is the best way to fade background images without losing detail.
You've seen three of the four key steps involved in adapting almost any image for use on a Web page:
Step 4 on the list is often the most time-consuming step. The other steps become almost automatic after you've created a few pages. But the more you explore Paint Shop Pro's powerful capabilities, the more tempted you'll be to spend half an hour with Colors | Edit Palette to get that title color just right or playing around with Image | Special Effects | Drop Shadow for the precise 3D look you're after.
But take my advice, discipline yourself to spend only a few minutes perfecting the graphics on each page. I indulged in a couple of worthwhile improvements to the completed page pictured in Figures 17.8 and 17.9. The gradient fill of World Records and filling in the words New Scientific with white were well worth the minimal effort these procedures involved. Likewise, using the color replacer tool to fill the continents of the Earth with a nontransparent shade of black definitely made the graphic more easily recognizable.
But will my picky adjustments and re-adjustments of the palette of colors in the title really make any difference to the people who visit this site? Probably not. And that glow effect experiment I tried when you weren't looking was a nice idea, but it increased the file size of the title image from 4 K to 23 K. (Oops! Never mind.) So do as I say, not as I do; stop having so much fun playing around with your pages and focus on productivity and serious stuff like that. And, hey, I don't want to see anybody fooling around with that Image | Deformation Browser command any more, got it? Good.
To incorporate photographic images into your Web pages, you need some kind of scanner to transform the colors of the photo into bits that the computer can handle. You can buy a decent handheld color scanner for as little as $200, which should prove quite sufficient for most images at the relatively low resolutions appropriate for the Net.
Of course, to properly prepare photographic images for online display, you need some photo retouching software-like our familiar friend, Paint Shop Pro. It can handle almost any image correction and enhancement task you need for the Net, and Paint Shop Pro even includes the standard TWAIN interface for scanners so you can scan without leaving the program. To scan an image, select File | Acquire and the scanning controls for your particular scanner will appear (see Figure 17.10).
| Note |
The dialog box that you see when you select File | Acquire will probably look different than the one shown in Figure 17.10. The exact interface will depend on which scanner you have and the software drivers that you installed when you connected the scanner to your computer. (Figure 17.10 shows the interface for my Logitech Color ScanMan.) If you get an error message or nothing happens when you select File | Acquire, then you either don't have a scanner or your scanner is not compatible with the TWAIN standard. If that's the case, you will need to use the software that came with your scanner to scan and save images. You can then open them in Paint Shop Pro. |
If you plan to scan images often, you should add the Acquire Image button to your toolbar. To do so, select File | Preferences | Customize Toolbar, highlight the Acquire Image icon as shown in Figure 17.11, and click the Add button. While you're at it, you might like to add the Brightness/Contrast, Adjust RGB, and Gamma Correction buttons to your toolbar as well. These functions are frequently used to enchance scanned images.
Figure 17.11: If you scan photos often, add the Acquire Image icon to the Paint Shop Pro toolbar.
Paint Shop Pro's Colors | Gamma Correct and Brightness/Contrast commands, which are used to correct the overall tone of images, were demonstrated earlier in this chapter under "Customizing and Correcting Images." Several other useful color correction tools are available on the Paint Shop Pro Colors menu (and in most other photo editing programs).
You will often want to isolate the main subject of an image from its original background before you place it on your Web page. (Isolating a subject from its background becomes especially useful when you use transparent images, as discussed in Chapter 16.) Figure 17.12 is an image of a flat-coated retriever that I retrieved from the alt.binaries.pictures.animals newsgroup. If I wanted to publish a flat-coated retriever home page on the Web, I'd probably want to remove the distracting background from this image.
Figure 17.12: A bad picture of a good dog.
The hard way to free this dog would be to outline him with the lasso hand-selection tool. Given the irregular boundaries of a flat-coated retriever, that task would be impossible with a mouse and tiresome with a drawing tablet. An easier way would be to use the magic wand tool to automatically select a similarly colored area. In this image, the dog contrasts fairly well with the background, so this approach has promise. By double-clicking the magic wand, I can even adjust the tolerance to best capture the range of colors that distinguishes the dog from the background. Selecting a region this way generally takes some trial-and-error to find the best tolerance, but this method can save a lot of work in high-contrast images. Figure 17.13 shows the Magic Wand control box and tool ready to make a selection.
Figure 17.13: The magic wand tool automatically selects a region based on color similarity.
After highlighting the dog (and some unwanted but similarly colored background details) with the magic wand, I can then select Edit | Copy and Edit | Paste | As New Image to produce a cutout picture. By carefully tweaking the tolerance and using the other painting tools to smooth the edges, I could get a better outline than this. Figure 17.14 shows the start of this approach, but I didn't bother finishing because it was a lot of picky work and I could see that, for this particular image, there was a better way.
The better way in this case was to use the brightness and contrast controls to fade most of the background out to pure white. Figure 17.15 shows the result, which has much cleaner edges than any magic wand selection could achieve on a low-resolution image.
| Note |
All the tools mentioned in the following paragraph are on the Select toolbar in Paint Shop Pro. Similar tools are also found in almost every major image-processing or photo-editing program. For more details on how these tools work, consult the online help for Paint Shop Pro or your favorite comparable software. |
To remove the rest of the background, I first eliminated the people's legs and shadows with the rectangular selection tool, the lasso selection tool, and the Edit | Clear menu command. Then I went in by hand with the paintbrush and push brush tools to clear away the stuff around the dog's head. Finally, I touched up a bit with the softening tool to eliminate any jagged edges. I chose to leave the small shadows under his feet, but I did use the image clone tool to get rid of that pesky leash. In Figure 17.16, the retriever is finally free.
Figure 17.16: A bit of touching up with the painting tools and he's a free dog.
A good photographer or publishing professional can do very impressive color correction in a traditional darkroom. Other forms of digital image enhancement, however, are difficult or impossible to do without a computer. Image filters based on a mathematical technique called convolution may seem especially magical in their ability to bring out detail, sharpen or soften edges, and automatically produce complex-looking special effects like embossing. But you don't have to understand the math or the magic to use filters. In fact, PaintShop Pro's Image | Filter Browser control (see Figure 17.17) makes it easy to choose and apply a filter.
Figure 17.17: Use the filter browser to preview any of PaintShop Pro's image filters.
| Tip |
Note that the edge and emboss filters give better results on images that aren't scanned with a hand scanner, as the flatcoat.jpg file appears to have been. The extra noisy edges are by-products of the scanning process. You can often avoid or reduce this problem by reducing the contrast in the image before embossing it. Selecting Colors | Posterize can also help tidy up messy images before you use an edge-oriented filter on them. |
You should be able to tell from the Filter Browser which filter might do your image some good. When it doubt, try it! You can always select Edit | Undo afterward if you need to.
Retouching images can be a lot of work. It can also be a lot of fun, especially when you use image deformation tools. As with filters, Paint Shop Pro gives you an interactive preview browser for deformations (see Figure 17.18). When you pick a deformation in the browser and click the Apply button, you get a dialog box that enables you to adjust the effect settings for that particular deformation and preview the results on the entire image before committing to it (see Figure 17.19).
Figure 17.18: The Deformation Browser is your own computer-controlled funhouse mirror.
Figure 17.19: Before you deform an image, you can adjust the amount of effect to apply.
You can create dramatic and useful graphics effects by combining two images with image arithmetic. To combine images in a variety of ways, use the Image | Arithmetic menu choice in Paint Shop Pro. For example, you can add two images together, making one appear superimposed over the other with partial transparency, as shown in Figures 17.20 and 17.21.
Figure 17.20: The Image Arithmetic dialog box allows you to combine two images mathematically.
Here's a quick tour of the Image Arithmetic dialog box shown in Figure 17.20:
When you click on OK, Paint Shop Pro goes through each pixel in the first image and adds (or multiplies, subtracts, and so on) its value to the corresponding pixel color value in the second image. The result is divided by the Divisor you entered, and then the bias is added. In Figure 17.20, I selected Add and entered a Divisor of two. The pixel color values of the two source images were added together and then divided by two, effectively averaging the two images together as shown in Figure 17.21.
Image addition is relatively easy to describe, but the other operations offer creative possibilities that words could never begin to convey. If you want to combine two images for a layered or faded look, your best bet for finding the right effect is good old-fashioned trial and error.
Note that the Subtract function isn't symmetrical, meaning that subtracting image #1 from image #2 would give a significantly different result that subtracting image #2 from image #1. All the other Image Arithmetic functions are symmetrical, however.
| Tip |
Simple gradations created with the paint bucket tool (like the rightmost image in Figure 17.21) are especially useful for creating special effects with the Image Arithmetic dialog box. You can select radial, sunburst, or linear fill in the paint bucket style palette, and then use the Image Arithmetic dialog box to fade out a corresponding pattern in another image. |
Paint Shop Pro's Image | Special Effects menu is a treasure chest of time-saving gems to make your Web pages richer. You won't find most of these tricks in many other graphics programs.
| Note |
One of the most magical and practical items on the Image | Special Effects menu is Create Seamless Pattern. Because this is specifically for making background tiles, it's covered in Chapter 20, "Backgrounds, Image Maps, and Creative Layouts" instead of this chapter. All the other items on the Special Effects menu are discussed in this section. |
One of the most popular effects used by every graphics pro is the drop shadow, which is a subtle darkening of the area directly behind a graphic or some text to make it look like it's floating above the page. Unlike many automatic computer effects, shadowing is in no danger of becoming an overused visual cliche. Shadows are just too prevalent in the physical world. In fact, not knowing how to use shadows effectively is more likely to make your pages look mundane than overusing them is.
Fortunately, Paint Shop Pro makes drop shadows incredibly easy to create. You can add a shadow behind any selected text or region with the Image | Special Effects | Add Drop Shadow command. The dialog box that appears (see Figure 17.22) lets you pick the color of the shadow and gives you several other controls as well. You can set the Opacity of the shadow to any number from 1 (almost completely transparent) to 255 (solid with none of the existing image showing through). The Blur setting controls how many pixels across the fuzzy edge of the shadow will be. A Blur setting of 1 makes the edges crisp with no fuzziness, and the maximum setting of 36 will make a hazy shadow or a glowing effect if you use a bright color. In Figure 17.22, I chose a medium-bright shadow color around the light text, which gives both a shadow and a glow effect to the letters.
To control how far your object leaps out of the page, use the slider controls in the bottom part of the Drop Shadow dialog box. These controls set the vertical and horizontal offset of the shadow from the selection in pixels. Larger values make the selection look further from the page, and negative values put the shadow on the upper left instead of the lower right of the object. For a glow effect, set both offsets close to zero and use a high blur setting, or select the Add Drop Shadow command twice and put one shadow below and the other above, as I did in Figure 17.22.
| Note |
To select the Add Drop Shadow command, you must have an open full-color or grayscale image and an active selection (with moving dotted lines around it). These requirements are also necessary in order to use most other Special Effects commands; Paint Shop Pro can't add an effect if you haven't selected anything to add the effect to! |
When you have an impressive title with a drop shadow behind it, you'll naturally want to create some 3D buttons for the links between your Web pages. Once again, Paint Shop Pro makes this effect a snap to create. Select a rectagular area with the selection tool, and choose the Image | Special Effects | Buttonize command. Choose the exact button effect you want from the Buttonize dialog box shown in Figure 17.23.
The height of the button is set with Edge Size as a percent of the total button width. You can also choose between a button with transparent edges (such as the push me button in Figure 17.23) or solid edges (such as the ok? button in Figure 17.23). In either case, the button will be shaded with a combination of the current foreground color, the existing image, and a shade of gray to create the 3D look.
Figure 17.23 also uses two of the three remaining options on the Paint Shop Pro Special Effects submenu. Chisel outlines the current selection for a chiseled effect, and Hot Wax Coating tints and chisels at the same time. The final option, Cut Out, creates a beveled effect at the edges of the selection so it appears to be dropped slightly into the page. This is the same idea as the 3D-look borders of most inset controls in Windows 95 programs.
The last item on Paint Shop Pro's Special Effects list is a bit different than the rest. Hot Wax Coating doesn't sound like something you'd do with your computer, let alone a graphics program. Nonetheless, it is a very useful tool for Web pages because it combines a number of common tasks into a single one-click operation. The math behind Hot Wax Coating is tricky, and the effect is too; basically, this tool tints the current selection with the foreground color while also enhancing the edges, improving the contrast, and darkening the highlights in a way that would be difficult to achieve without applying a number of other tools one after the other. This tool is an excellent choice for any part of a page or image where you want a button or illustration to look like it is layered over something else. The Just don't button in Figure 17.23 shows an example of this effect.
Though this chapter has covered just about every special effect tool that Paint Shop Pro offers, I would be remiss in my duties if I didn't remind you that Paint Shop Pro also supports standard graphics plug-in filters created by third-party developers. These plug-ins, from serious graphics gurus such as the makers of Kai's Power Tools and Adobe Photoshop, can give you even more creative power to make your Web pages fly.
In this chapter, you've seen how to capture, scan, enhance, and add special effects to the graphics on your Web pages. Chapter 18, "Creative Use of Text, Fonts, and Type," helps you add the same pizazz to the text on your Web pages.
