by Eric Ladd and Mark R. Brown
When you see a graphic on your computer screen, what you're really seeing is a collection of colored screen pixels that, taken together, produce a meaningful image. An image file, therefore, has to contain information on how to reproduce that collection of pixels on-screen. This is accomplished by describing the pixels' properties mathematically and storing these descriptions in the file.
The catch in this situation is that there's not a unique way to mathematically describe image data. Given time, you can come up with your own way and, thus, your own storage format. Because you can express image data many ways, there are many possible image file formats--on the order of several dozen!
Fortunately, each of these formats can be classified as one of two types: a bitmapped graphic or a vector graphic. The next two sections examine the specifics of each type.
With a bitmapped graphic, information about each pixel is stored as a sequence of bits in the file. Depending on the storage formats, these bits could represent colors, saturation levels, brightness, or some other visual characteristic of the pixel. What's important is that each sequence of bits tells the computer how to paint the pixel on the screen.
Bitmaps are something of a natural format because they store information in exactly the same way the computer displays it on a monitor. This means the program that renders the image has to do very little processing. It just reads in the data and passes that information along to the screen drivers, which, in turn, display the pixels.
NOTE: The above is not entirely true if the bitmapped image is compressed. Compression reduces the size of an image file by reducing the amount of information needed to replicate the image. A compressed file will download more quickly, because of its smaller size, but it needs to be decompressed before the image can be displayed. This decompression step means additional processing effort.
A vector graphic file contains mathematical information that is used to redraw the image on the screen. When a computer displays a vector image file, it reads in the redrawing instructions and follows them. This might sound like a lot of unnecessary processing, but there is an important advantage to this approach: You can rescale the image to new sizes without loss of resolution because there's no fixed relationship between how its defined in the file and the pixel-by-pixel image on the screen. When you try to resize a bitmapped file, you often get a loss of resolution that detracts from the image.
Vector graphic formats are typically used for images with distinct geometric shapes. Computer Aided Design (CAD) drawings are examples of this type of image.
NOTE: Some file formats combine the best of both bitmapped and vector graphics into what's called a metafile format. Windows metafiles (.WMF) are frequently used to store clip-art images that need to be resized often.
When you focus your attention on Web graphics, the vast number of usable graphic storage formats quickly reduces to two. The Graphics Interchange Format, or GIF, was developed by CompuServe in 1987 to store graphics used over its network. The other format came about more recently and is named for the group that developed it: the Joint Picture Experts Group, or JPEG. Both formats are bitmapped formats. Currently, there is virtually no support for vector storage formats, except by means of browser plug-ins.
The specifics of each of these formats, and instances when you would want to use one over the other, are discussed in the following sections.
CompuServe released the GIF standard in 1987 and updated it in 1989 and 1990. The current standard is 89a, and it supports 8-bit color. That is, a GIF image can contain up to 28, or 256 colors.
How GIF Works Image data in a GIF file is organized into related blocks and subblocks that provide information on how to paint screen pixels to reproduce the image. When transmitting a GIF image, a program called an encoder is used to produce a GIF data stream of control and data blocks that are sent along to the destination machine. There, a program called a decoder parses the data stream and assembles the image. GIF is a compressed format as well. GIF files employ the LZW compression scheme to reduce the amount of information needed to completely describe the image. The LZW scheme is best suited to simple images like line drawings or images with just a few unique colors. As the number of colors grows, LZW compression becomes less efficient, providing compression ratios of 2:1 or less.
NOTE: The LZW compression used with GIFs was actually conceived by the Unisys Corporation and not by CompuServe. CompuServe and Unisys were entangled in patent disputes for a while. The end result was CompuServe's licensing of the GIF format--a move that had Internet developers worried that they would have to pay for a license. Fortunately for them, the license agreement pertained only to software that was primarily used for accessing CompuServe. The downside was these developers still had to worry about licensing with Unisys as well. Unisys has yet to pursue this with any vigor though, and the GIF format continues to be one of the most popular formats on the Internet.
Transparent GIFs GIF supports many effects that are desirable on Web pages. Chief among these is transparency. In a transparent GIF, you can designate one color to be the transparent color. Then, whenever the GIF is rendered on screen, pixels painted with the transparent color will actually be painted with the color of the page background. This gives the illusion of the pixels being transparent, since they allow what's behind them to show through. The advantage of transparent GIFs is that they make a graphic appear to float freely on a page. To see what this means, take a look at Figure 22.1. The image at the top is nontransparent. The words you see are sitting inside of a rectangular bounding box, and both the words and the bounding box are visible. The bottom image is a transparent GIF in which the color of the bounding box was designated as the transparent color. The result is that the bounding box disappears and the words seem to sit on the background with no particular boundary around them.
FIG. 22.1
You can make images float on a page by using a transparent GIF.
Many graphics programs available today come with support for creating transparent GIFs. Lview Pro, a graphic utility discussed later in this chapter, makes it very easy to designate a transparent color in a GIF.
Interlaced GIFs When you store a GIF in an interlaced format, nonadjacent parts of the image are stored together. As the GIF is decoded, pixels from all over the image are filled in rather than being filled in row by row. The result is that the image appears to "fade on" to the page, as if it were being revealed from behind Venetian blinds. This permits the user to get a sense of the entire image right away instead of having to wait for the whole thing to be read in from top to bottom. It usually takes several passes for the image to fade in completely. Figure 22.2 shows an interlaced GIF on the Discovery Channel site in the process of being read in. The complete image is shown in Figure 22.3.
FIG. 22.2
An interlaced GIF appears fuzzy as it is read in.
FIG. 22.3
As the last pieces of image data are read in, the interlaced GIF comes into sharper
focus.
Just as with transparency, most good graphics programs give you the option of saving a GIF as interlaced. All three programs discussed in this chapter support interlaced GIFs.
Animated GIFs The first animations that appeared on the Web required a great deal of effort. Using an approach introduced by Netscape called server push, you could create an animation by having a server literally push several images down an open HTTP connection. When presented in sequence on the browser screen, these images created the illusion of animation. Setting this up required knowledge of the Common Gateway Interface (CGI) and some type of programming language. Since most digital media graphic artists don't have knowledge of CGI programming, producing a Web animation often required collaboration between the artists and the server administrator. Then it occurred to someone that the GIF 89a standard supports multiple images stored in the same file. Further, you could place instructions in the file header that describe how the images should be presented. In short, the 89a standard gives you everything you need to produce an animation! The individual frames that comprise the animation can all be stored in one file, and you can specify in the file header parameters like how much delay before starting the animation and how many times the animation should repeat. Figure 22.4 shows several animated GIFs on the 7-Up site.
FIG. 22.4
Animated GIFs let you place animations on a page without knowledge of programming.
Creating animated GIFs has become fairly easy with the advent of software tools like the GIF Construction Set, available at http://www.mindworkshop.com. In this program, you can specify the individual GIF files that make up the animation and presentation instructions in a set of dialog boxes. When you're finished with the setup, the program will create the animated GIF file using the information you specified.
CAUTION: Like many popular Web page components, a number of animated GIFs have been made publicly available for download at many sites. The result is that these GIFs quickly become overused. Placing such a GIF on your pages does nothing to distinguish them. If you really need an animated GIF on your page, create your own unique animation. Don't put a trite animated GIF on a page just for the sake of having one there.
JPEG actually refers to a set of formats that supports full-color and grayscale images and stores them in compressed form. JPEG stores color information at 24 bits per pixel, allowing an image to contain 2^24 or over 16.7 million colors! This makes it the format of choice for photographs, especially nature photographs , where a continuum of colors is in play (see Figure 22.5).
FIG. 22.5
Photographs of naturally occurring objects are prime candidates for being stored
as JPEGs.
How JPEG Works JPEG can handle so many colors while still keeping file sizes reasonable because it compresses the image data. You even have some control over how big or small the file ultimately is. You can specify a high level of compression to get a very small file, but the quality of the image on-screen will be reduced. When you decompress a JPEG image, there is always some amount of loss, meaning that the image will not look the way it did originally. Fortunately, JPEG's compression/decompression scheme is such that the lost image data tends to be in the higher color frequencies, where it is harder for the human eye to detect the differences. In spite of this loss, you can still use JPEG to achieve compression ratios between 10:1 and 20:1 without appreciable change in the image. This means you've essentially reduced the amount of storage space per pixel from 24 bits to 1 or 2 bits--quite a savings! You can take the compression ratios even higher, but as noted above, the loss will become more detectable and image quality will suffer.
TIP: Always do the conversion to JPEG as your very last step in creating a Web image. Resaving as a JPEG after each change can increase the amount of loss, since the image is recompressed each time.
Progressive JPEGs JPEG isn't as versatile a format as GIF when it comes to supporting desirable Web page effects. However, a relatively new type of JPEG, called a progressive JPEG or p-JPEG, provides an analogy to the interlaced GIF. A p-JPEG is stored as a series of scans that together comprise the entire image. When the first scan is read in, users see a blocky approximation of the whole image, so they can quickly get an idea of what they're ultimately going to see. As subsequent scans are read in, the image comes into sharper focus.
NOTE: People often ask if there will ever be transparent JPEGs. Unfortunately, the answer to this question is no. To understand why, recall that there is always some loss during JPEG compression/decompression. This means that some pixels are not colored with the same color they originally were.
Now suppose you've specified a transparent color for the JPEG. If a pixel originally colored with the transparent color is assigned a new color due to the loss, then that pixel will no longer be transparent. Similarly, nontransparent pixels could be colored with the transparent color after compression/decompression, meaning that they will end up being transparent. Either way, you get the opposite of what you wanted and the on-screen results would be disastrous.
Unless JPEG is changed to become a lossless format, there is little hope of there ever being transparent JPEGs.
Given that you have the choice between two formats for Web graphics, you may find yourself wondering when to use one or the other. To help you answer that question, review some guidelines below.
You have to use a GIF if you want transparency or animation, since it's the only format that supports them. Beyond that, you should consider GIF for the following types of images:
JPEG is better suited for the following situations:
Because the compression computations work better with a continuum of color, the JPEG format is not well suited to images that have very sharp color changes.
GIF and JPEG are currently the two principal Web formats, but there's a new kid on the block that shows a great deal of promise. The Portable Network Graphics (PNG) format has been defined as a network standard by the World Wide Web Consortium (W3C).
PNG is described as "an extensible file format for the lossless, portable, well-compressed storage of raster (bitmapped) images. PNG provides a patent-free replacement for the GIF format and can also replace many common uses of the older TIFF format. Indexed-color, grayscale, and true color images are supported. PNG is designed to work well in online viewing applications, such as the World Wide Web, and so it is fully streamable with a progressive display option." Look for PNG graphics to become more prevalent on the Web as this new standard is adopted. It is already supported by Internet Explorer 4.0 and Netscape Communicator 4.0.
ON THE WEB: You can find out more about the PNG graphics format on the W3C Web site at http://www.w3.org/Graphics/PNG/.
While it is true that a properly designed image can enhance a document, a poorly designed image can detract from it. Graphic images certainly have their place in Web documents, and in fact, they are expected in many places by users. The next few sections look at the types of graphics commonly found on the Web and give you some tips on how to maximize the effectiveness of each kind.
If you've visited many Web sites, you've very likely noticed the tendency to put a large graphic on the main page of a site that lets a visitor navigate to all of the major sections of the site. Such a graphic is a good idea for many reasons. It lets the user know right away what major content sections are available. Additionally, it lets the site designer establish a visual look for each section, which can be helpful to users later as they navigate through the site. But there are pitfalls to this type of image. Here are some things to think about:
Your main-page graphic is the first thing users will see when visiting your site and sets the tone for the rest of their time there. The best rule of thumb for this kind of graphics is to make sure it is eye-catching and distinctive, without falling prey to one of the issues above.
Icons are small graphics that are meant to represent a certain content section or piece of information on your site. Commonly used icons include a question mark for Help and Frequently Asked Questions (FAQ) sections or a magnifying glass for a search engine.
Because icons are small, file size is usually not a problem. Icons download quickly and, once they are in a user's cache, can be reused again and again without further downloading. But an icon's smallness can also be a disadvantage because you have to pack a very specific concept into a fairly small part of the screen. For this reason, your chief concern when designing icons is intuitiveness. Users should be able to look at an icon and almost immediately discern what it means.
The best way to see if your icons are intuitive is to test them with a group of users as you're designing the site. A commonly used test involves presenting users with a set of potential icons and asking them to write down what they think each icon represents. If you find that most users interpret an icon the same way, you can feel pretty good about using that icon to represent the idea they say it does. If there's no clear interpretation of an icon, you should scrap it or send it back to the drawing board.
Once you have chosen your icons, be sure to use them consistently. This helps to reinforce their meaning with the user and makes navigating your site much less stressful.
NOTE: If you expect a global audience to visit your site, you also need to consider how your icons will be interpreted by users from cultures different from your own. This typically requires trying out your icons on users from those cultures, if at all possible.
Very large sites have to support the user with some kind of navigation aid. Navigation image-maps are frequently found at the top or bottom (and sometimes both) of a document and give the user single click access to the major content areas of the site and other useful resources like a table of contents or a search engine. You may also include some navigation options that point to places within a given section of a site, particularly if the user has had to drill down several levels to get to a document.
Navigation graphics present some of the same design issues as main-page graphics. These include the following:
A well-chosen background image can make a page look very distinctive. Many corporate sites have a faded version of the company logo in the background. This approach reinforces the company's corporate identity, while not being so obtrusive that it obscures the primary content of the document.
Another popular approach to background images is to use a very small pattern that is tiled to fill the browser window. Typically these files are very small and load quickly. However, if the tiling isn't smooth, it can produce seams on the page that can distract a user. Fortunately, more and more graphics programs are including a tessellating function that allows you to produce seamless tiling in all directions when using a tiled background pattern. Both Paint Shop Pro and Adobe Photoshop come with this useful feature.
TIP: Whether you're using a large image or tiling a small image in your background, you can use the BGCOLOR attribute of the <BODY> tag to immediately paint the background with a color that approximates the dominant color of your background image. This smoothes over the transition to the image, and if the image fails to load, the user can at least have a sense of what color your background was supposed to be.
The worst thing you can do is use a background image that is so busy that it detracts from content in the foreground. If you're not using a solid color or a pattern, make sure that the visual elements in you background image are sufficiently muted so that they don't interfere with the user's ability to read and understand the content of your document.
Not everyone is lucky enough to have a team of digital graphic artists on staff to support a Web site. If your role as a Webmaster is "jack-of-all-trades," that most likely means you're responsible for graphic content as well. Fortunately, there are many sites on the Web that provide royalty-free graphics that you can download and use on your own site.
One particularly good public repository of graphics is Microsoft's Multimedia Gallery at http://www.microsoft.com/workshop/design/mmgallry/. Not only can you find icons, background patterns, and navigation graphics in the Gallery but you can also download audio clips as well!
One caution about using graphics from a public download site: other people might be using them too. This robs your site of a truly distinctive look and, in cases where the graphics are overused, can make your pages seem trite. Do you remember the little colored balls people used as bullets in a bulleted list? This is a classic example of an overused graphic. The colored balls even made a comeback as animated GIFs where the color of the ball cycles through many different colors!
Don't let your pages be common--try to customize the graphics you download to set them apart. One easy way to do this is to repaint the graphics in the color scheme of your site. This makes them seem more like they were designed just for your site.
As popular as graphics are with users, they can become immensely unpopular when they take forever to download. By keeping file sizes small, you minimize the time your users spend waiting to see your pages. A good rule of thumb is to keep each large image to between 50K and 100K. Icons should be even smaller--between 5K and 10K.
Even with small file sizes, different users may have to wait different lengths of time for an image to download. A 50K image may transfer in just a few seconds over a T1 connection, but dial-up users who are limited to 14.4Kbps or 28.8Kbps may have to wait several minutes. Be sure to remember your users with slower connections when you design your graphics. You may even ask a few of them to test your image files to see if they require a long time to download.
TIP: Don't forget to use the ALT attribute in your <IMG> tags so that the user can see a description of your image in case it fails to load.
Corporate intranet designers tend to be a little more fortunate in this department. Most intranet users are on a high-speed connection over the company's Wide Area Network (WAN). With such a homogeneous group, it's usually possible to design higher-end graphics and still have reasonable download times. You should still have some coworkers test your images though, especially those who are located a great distance from your server.
If you think you have an image file that's too big, don't despair! There are plenty of techniques for bringing the size down. Depending on the makeup of the image and the format you saved it in, you may want to try one of the following:
CAUTION: Always resize an image in a graphics program, keeping the aspect ratio the same. If you try to use the WIDTH and HEIGHT attributes of the <IMG> tag to resize the image, you're relying on the browser to do the resizing and you're likely to be disappointed with the results. Additionally, resizing with the browser doesn't save you download time because the original image file still has to be downloaded.
It's not always necessary to create your own graphics. In fact, it's very often convenient to scan something in (if you have access to a scanner) or use an image that someone else has already scanned in. Either approach is perfectly valid. No one will ever expect you to create all of your own images. When you do use a scanned image though, you should make sure that it really contributes to the message you're trying to convey in your document and that you're not just using it for the sake of using it.
CAUTION: Some people will let you use images that they scanned as long as you give them credit in your document. Make sure you acknowledge the sources of your scanned images.
If you do have a flatbed scanner, making your own scanned images is a simple task. You can use the software that came with the scanner, or you can use a program like Photoshop or Paint Shop Pro.
If you're looking for existing scanned images, you can try any of the following sources:
Scanned images invariably need some kind of touch-up done on them so they are a truer representation of the original. By zooming in on the scanned image in an editor, you can usually see imperfections along the edges of objects and in the coloring of pixels. Be sure to give your scan a good "once over" in this way so it can look its best in your document. (Most scanners come with some kind of image touchup software, like Adobe Photoshop.)
Throughout this chapter, reference has been made to many different manipulations and edits you can make to an image. Now it's time to look at some of the programs you can use to make these modifications. The next five sections introduce you to the following image editing programs:
Each of these is a great graphics program in its own right. You should consider each one and then select the one that meets your needs and is within your budget.
This section concludes with a look at the GIF Construction Set, a shareware program you can use to create animated GIFs.
Lview Pro is a great shareware program you can use to edit existing graphics or to convert them to GIF or JPEG format. It offers many of the common manipulation features found in most paint programs plus several other options that give you very fine control over image appearance.
NOTE: The information on LView Pro presented here is based on the evaluation copy of version 1.D2. You can download the latest version of LView Pro by pointing your browser to http://www.lview.com/. A license costs $30 U.S. plus $5 U.S. for shipping and handling.
Figure 22.6 shows the LView Pro window along with its extensive tool palette. Almost every tool in the palette corresponds directly to one of LView Pro's menu options.
FIG. 22.6
LView Pro's tool palette enables you to make modifications to most aspects of an
image.
The only LView Pro tool for creating anything is the Add Text tool. It stands to reason that you'll probably have to use a different program to create your graphics. But, what LView Pro lacks in ability to create, it makes up for with its ability to make very particular changes to an image. These program features are found under the Edit and Retouch menus.
The Edit Menu LView Pro's Edit menu provides options for many of the basic manipulations that Paint can perform, including horizontal and vertical flips and rotations by 90 degrees to the right or left. The Add Text option, discussed above, is also found under the Edit menu. The Resize and Redimension options can create some confusion for the user who is unfamiliar with them. Resize changes the dimensions of an image, with the option to retain the image's aspect ratio (the ratio of the width and height). When you resize, you can choose from a standard set of sizes or you can enter your own size. Redimension lets you choose from only the standard set of sizes and doesn't permit you to keep the same aspect ratio.
The Capture option under the Edit menu does a screen capture of either the Desktop, the Window, or the Client Area. When you invoke one of the screen capture options, LView Pro will minimize itself and capture the region that you requested on-screen.
The Retouch Menu The options under LView Pro's Retouch menu really expand the program beyond a simple graphics manipulator. One option of note is Gamma Correction, a parameter that can impact the contrast in an image (and therefore the size of the image file). Gamma correction is used to increase or decrease the brightness of pixels in the image. You can set gamma correction values for Red, Green, and Blue color components separately by moving the scrollbar next to each color. A gamma correction value greater than zero will brighten the color, and values less than zero will darken the color. If you want to adjust the gamma correction for all three colors simultaneously, check the Lock RGB Scrollbars check box. This moves all three scrollbars whenever you move any one of them. To reduce the size of an image file, you can reduce the contrast in the image. This means you want a negative value for gamma correction. Another useful option under the Retouch menu is Palette Entry. Choosing this option calls up the Select Color Palette Entry dialog box, shown in Figure 22.7. From this dialog box, you can select one of the colors in the current image's palette and change its RGB color specification. You can also select the image's transparent color from this dialog box.
FIG. 22.7
Changing a particular palette color is easy with the Palette Entry option of the
Retouch menu.
A final Retouch option of interest is Color Depth (see Figure 22.8). This option is used to select a True Color image (24 bits per pixel, 16.7 million colors) or a Palette image (up to 8 bits per pixel and 256 colors). Palette images can be two colors (black and white), 16 colors (like the default Windows palette), 256 colors (as with a GIF image), or a custom number of colors. If you're decreasing your color depth, you may want to activate Floyd-Steinberg dithering, a process that uses combinations of colors in the palette to approximate colors that are not in the palette.
FIG. 22.8
If you need to reduce your color depth to make an image file smaller, you can do
it in Lview Pro from the Color Depth dialog box.
LView Pro Properties Settings The Properties dialog box (choose File, Properties) lets you do much more than set up retouch instructions. There are 11 different tabs on the panel that enable you to configure LView Pro to run according to your own image editing preferences. Two of the tabs deserve special attention because of their relevance to creating Web graphics. The GIF tab, shown in Figure 22.9, has two check boxes that can be used to instruct LView Pro to save a GIF file as either interlaced or transparent.
FIG. 22.9
LView Pro can make interlaced and transparent GIFs if you tell it to do so.
NOTE: To designate the transparent color in LView Pro, choose Retouch, Background Color and select the color you want to be the background color from the palette you see. When you save the image as a transparent GIF, the background color will become the transparent color.
The other noteworthy tab is the JPEG tab, shown in Normal mode in Figure 22.10. From this tab you can choose compression and decompression options, including progressive decompression for making a progressive JPEG.
FIG. 22.10
LView Pro can also make a progressive JPEG once you activate progressive compression.
Another good shareware program for graphics work is Paint Shop Pro from JASC, Inc. Paint Shop Pro handles many types of image storage formats, enables you to do the most common image manipulations, and even comes with a screen capture facility.
Figure 22.11 shows an image loaded into Paint Shop Pro, along with the many available tool panels that give you single-click access to Paint Shop Pro's functions. The Zoom panel lets you zoom in to magnifications as high as 16:1 and out to magnifications as low as 1:16. Tools located on the Select panel allow you to sample colors, move the image around in the window, define a custom area of the image to clone or resize, and change the foreground and background colors.
The Paint panel is a welcome addition that was not available in earlier versions of Paint Shop Pro. It supports 22 different tools you can use to make your own graphics. These tools enable you to create brush, pen, pencil, marker, and chalk effects; draw lines, rectangles, and circles; fill a closed region with color; add text; and sharpen or soften part of an image. The Histogram window displays a graphic representation of the luminance of all colors in the image, measured with respect to the brightest color.
TIP: You can toggle any of the tool panels on or off by using the options found under the View menu.
Paint Shop Pro's versatility enables you to open images stored in 25 bitmapped formats, including GIF and JPEG, and 9 meta/vector formats (image components stored as geometric shapes that combine to produce the entire image), including CorelDRAW!, Micrografx, and Ventura. However, it can save in only one of the raster formats. Nevertheless, Paint Shop Pro is still handy for converting to bitmapped formats. The Batch Conversion option under the File menu lets you select any number of files to convert to a new storage format (see Figure 22.12).
FIG. 22.11
Paint Shop Pro's tool panels give you easy access to common painting and image manipulation.
FIG. 22.12
Have a bunch of files to convert? Paint Shop Pro can be set up to handle them all
at once.
TWAIN refers to a set of industry standards that allows graphics programs to work with image acquisition hardware like scanners. If you have a TWAIN-compliant scanner attached to your computer, you can use the File, Acquire option to scan in a new image. The Select Source option, also under the File menu, lets you choose which device you want to use for the acqui-sition.
The Image menu includes the options used to do many of the standard manipulations like flipping the image upside down, creating a mirror image of an image, and rotating the images. The Image, Resample option is used to change the size of an image, without the jagged edges caused by standard resizing. You'll also find several effect filters under the Image menu that let you add or remove noise, enhance darker or lighter colors, and blur (sharpen or soften) the image. You can even define effect filters of your own.
The Colors menu is host to many of the advanced image manipulations you read about in the LView Pro section, including adjustment of brightness, gamma correction, RGB values, and conversion to grayscale or photographic negative versions of an image. You can also load, modify, and save color palettes from the Colors menu. The Increase and Decrease Color Depth options allow you to change the number of colors being used to render the image.
Paint Shop Pro adds some color editing functionality that LView Pro doesn't have. The Highlight/Midtone/Shadow option under the Adjust pop-up list lets you skew an image's contrast to emphasize highlights, shadows, or mid-range colors. The posterizing effect (choose Colors, Posterize) makes the image look more like a poster by reducing the number of bits used per RGB color channel. You can also use the Colors, Solarize option to invert colors that are above a luminance level you specify.
One very useful feature of Paint Shop Pro is its screen and window capture facility. Options in the Capture, Setup dialog box are used to capture the whole screen, a single window on the screen, the client area inside a window, or a user-defined area. You can also choose whether the mouse pointer should be included in the capture and which hotkey will activate the capture.
The current release of Paint Shop Pro comes bundled with many more special effects filters than in previous versions. These include the following effects:
Additionally, you can install Adobe Photoshop-compatible plug-ins and define your own effect filters.
When it comes to saving an image as a GIF or JPEG, Paint Shop Pro can handle the basic format, as well as most of the associated effects. About all that Paint Shop Pro won't do is allow you to save a progressive JPEG.
Paint Shop Pro is a very capable image editing program. You can also purchase it bundled with Kai's Power Tools SE for added functionality. To order this combination package, contact JASC sales at 1-800-622-2793. For more information about Kai's Power Tools, consult http://www.metatools.com/. To learn more about Paint Shop Pro, direct your browser to http://www.jasc.com/.
Adobe promotes Photoshop as the "camera for your mind," but it's really much more--it's the premier software package for doing graphical manipulations. You can use Photoshop to create your own original artwork, scan in an image, or make edits to an existing image. Photoshop can read in files stored in over a dozen formats and save them in just as many formats, including GIF and JPEG.
Making Your Own Artwork Photoshop supports you in graphics creation with an extensive toolbar, located on the left side of the window (see Figure 22.13). You can choose tools for placing text, filling regions, drawing lines, airbrushing, painting, freehand drawing, smudging, blurring, and lightening.
FIG. 22.13
Many of the drawing options found in other image creation pro-grams are available
in Photoshop as well.
TIP: Many toolbar tools have special options available in the dialog box at the bottom left of the Photoshop window.
Layers and Channels One of Photoshop's nicest features is image layers--different levels of the image you can overlay to produce the entire image. Figure 22.14 shows an image that uses layers. The sun is on a separate layer from the checkered background, but when the two are superimposed, they produce the desired image.
FIG. 22.14
Layers separate the different components of an image into their own separate entities
so you can work on them individually.
A graphic element in a given layer can be painted with RGB color, and Photoshop will provide access to each component color through color channels. Figure 22.15 shows the channels for the sun layer from the graphic in Figure 22.14. The sun is painted yellow, which is formed by a combination of green and blue. Notice in Figure 22.15 that there is no contribution from the red channel--only from the green and blue channels.
FIG. 22.15
Color channels split a color into its individual red, green, and blue components.
Web Graphics Effects Photoshop can help you apply a number of desirable effects to Web graphics. One important one is anti-aliasing, a process that softens the jagged edges that often occur at a boundary between two different colors. Anti-aliasing an edge is fairly easy to do. You just select the item with the edge to be anti-aliased by using the Lasso tool (freehand region selection) and then check the Anti-aliased box on the Options tab in the dialog box at the bottom-left of the window.
NOTE: Anti-aliasing is available when using the magic wand, fill, and line tools as well.
Embossing is an effect that makes an image look "raised," just as lettering on an engraved invitation is raised. Photoshop has an embossing filter that is easy to apply to an image. You select the part of the image to emboss, then choose Filter, Stylize, and then select the Emboss option from the pop-up list that appears. An image and its embossed equivalent are shown in Figure 22.16.
FIG. 22.16
Embossing "raises" parts of an image and gives your pages the illusion
of depth.
Photoshop also supports saving files in GIF, interlaced GIF, transparent GIF, JPEG, and progressive JPEG formats, although plug-in programs are required to accomplish this. Two of the most popular plug-ins are PhotoGIF and ProJPEG from BoxTop Software, Inc. You can download the latest versions from BoxTop's Web site at http://www.boxtopsoft.com/.
So Much More! Trite as it may sound, Photoshop is much more than what has been noted here. Some of the program's other handy features include the following:
Photoshop is a powerful image creation and modification tool that makes a worthy addition to your software library. For many folks, the limiting factor is often price, since Photoshop can cost between $500 and $1,000 per license, depending on which platform you're running it. Students can obtain a "light" version of Photoshop at a substantial discount. If you're running a highly graphical Web site and you can afford Photoshop, you should seriously consider purchasing it as your graphics tool of choice.
NOTE: For a fuller treatment of Photoshop and its many features, consult Que's Special Edition Using Photoshop 3 for Macintosh. The Windows version of Photoshop 3 has the same functionality, although the interface may be different in places.
Microsoft continues to expand its software offerings that support Internet publishing by producing Microsoft Image Composer (see Figure 22.17), which is a feature-rich, image-editing program that works with Microsoft FrontPage and the Microsoft GIF Animator.
FIG. 22.17
Microsoft Image Composer comes bundled with either Microsoft FrontPage or Microsoft's
Visual InterDev.
Image Composer breaks new ground in developing graphics for Web documents by introducing sprite technology. Put simply, a sprite is an image whose shape is not necessarily rectangular (like it would be in any other image program). Instead, a sprite's shape is exactly the shape of the object in the image. Microsoft provides a good example on one of its Image Composer Web pages (see Figure 22.18). The image on the left is a sprite. It does have a rectangular bounding box, but the image's shape is that of the bunch of flowers. The image on the right would be done in a traditional image editor. You could make the black background transparent to achieve the same effect you get in the sprite, but this would require extra steps that aren't needed with Image Composer.
CAUTION: Macromedia Director users should not confuse Image Composer sprites with Director sprites. Although they share the same name, they are not the same thing.
FIG. 22.18
A sprite is an image that takes on the shape of the object in it, instead of just
being rectangular.
Sprites are made possible by an Image Composer feature called the alpha channel. Every sprite has a built-in, 8-bit (256 color) alpha channel that stores transparency information. This means you can have up to 256 levels of transparency--much more flexible than the single transparent color you get in a transparent GIF! You can use the levels of transparency to seamlessly overlay sprites (refer to Figure 22.18) and create eye-catching effects. When you've finished your composition, you can export the whole thing as a GIF and place it in any of your Web documents.
Beyond sprite technology, Image Composer offers many of the things you'd want in a graphics editing program. It saves images in both the GIF (including transparent GIF) and JPEG formats. You get all of the standard image creation tools like paint, fill, text, and shapes. Further, you get over 500 different special effects filters that include the following:
Those are just a few. Image Composer can also work with Adobe-compatible plug-ins like Kai's Power Tools 3.0, KPT Convolver, and Andromeda Series 1 Photography. The Impressionist plug-in package is shipped with Image Composer, and the effects found in Adobe Gallery Effects 1.51 are resident in Image Composer already.
ON THE WEB: For more information about Microsoft Image Composer, point your Web browser to http://www.microsoft.com/imagecomposer/.
NOTE: Don't forget about Alchemy Mindworks' excellent program GIF Construction Set, which is covered in detail in Chapter 25, "Animation."
TIP: Macintosh users should check out GifBuilder for creating animated GIFs.
© Copyright, Macmillan Computer Publishing. All rights reserved.