Photoshop 6 for Windows Bible- P30

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

Thêm vào BST

Báo xấu

46
lượt xem 5
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Photoshop 6 for Windows Bible- P30:If you are reading this foreword, it probably means that you’ve purchased a copy of Adobe Photoshop 6.0, and for that I and the rest of the Photoshop team at Adobe thank you. If you own a previous edition of the Photoshop Bible, you probably know what to expect. If not, then get ready for an interesting trip.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Photoshop 6 for Windows Bible- P30

Chapter 19 ✦ Creating Graphics for the Web 843 prepare your images. To that end, the next few sections discuss the do’s and don’ts of Web imagery. The smaller, the speedier If you have any experience with the Web, you know that small images are speedy images. By “small,” I don’t mean small in physical size (although that often helps). I mean small in terms of disk space. A 20K image that fills your screen takes less time to download and display than a 50K file no larger than a sticky note. It’s the act of getting the data through the cables and phone lines that takes the time; by comparison, the time it takes your browser software to interpret the data is insignificant. Therefore, this chapter emphasizes ways to control file size. How can you squish the finest graphics you’re capable of creating into the smallest amount of disk space with the least amount of sacrifice? This is the single most important challenge facing Web artists today. And while the Web-wide world is certain to change by the time you read this, I have a sneaking suspicion that small and speedy will remain the watchwords for some time to come. Mac and PC monitor brightness Many Web artists come from a background in print media, and while much of what they’ve learned while preparing printed photographs is equally applicable to online artwork, there are differences. Foremost among the differences, you never need worry about converting images to the CMYK color space. All Web graphics are RGB (or a subset of indexed colors or gray values). This is extremely good news because it means that for once in the history of electronic publishing, what you see on screen is really, truly what you’re going to get. Well, almost. Ignoring the differences in the ways people perceive colors and the variances in ambient light from one office or study to the next, there are measurable differences between monitors. Some monitors produce highly accurate colors, others — especially older screens — are entirely unreliable. But more importantly, some screens display images more brightly than others. For example, the typical Macintosh user with an Apple-brand monitor is cursed with a very bright screen. Apple monitors — and many non-Apple brands developed for the Mac — are calibrated to a gamma of 1.8. Meanwhile, most PC monitors are calibrated to 2.2, which is roughly equivalent to a standard television. Note Higher gamma values translate to darker displays because they indicate degrees of compensation. By compensating less (1.8 versus 2.2), images appear lighter on the Mac. Figure 19-1 shows a test image subjected to various brightness settings. The upper- left example shows how the image looks when corrected for a typical PC screen. The upper-right example shows that very same image displayed on a typical Macintosh
844 Part V ✦ Color for Print and the Web monitor. While it may be safe to assume that most folks who visit your Web page own PCs, the graphics community is still very large and active on the Mac side. So it pays to keep both Mac and PC users in mind when preparing your artwork. Corrected on PC Washed out on Mac Slightly dark for PC Slightly light for Mac Figure 19-1: An image corrected for a PC screen lightens up dramatically when viewed on a typical Macintosh monitor. The solution is to strike a compromise. Choose Image ➪ Adjust ➪ Levels (Ctrl+L) and lower the gamma (the middle Input Levels value) to between 0.8 and 0.75. Although the result will look a tad bit dark on your screen, it strikes a nice balance between PC darkness and Mac brightness. The bottom two examples in Figure 19-1 show what happens when I lower the gamma to 0.75 and display the image on a PC screen (left) and a Mac screen (right). A little dark on one, a little light on the other, but ultimately an equitable compromise.
Photoshop Chapter 19 ✦ Creating Graphics for the Web 845 6 You can use the Photoshop 6 color management options to preview how your image looks on a foreign monitor. After selecting color profiles and other options in the Color Settings dialog box, as I explain in Chapter 16, choose View ➪ Proof Setup ➪ Macintosh RGB. To switch between the preview and original, press Ctrl+Y, which toggles the Proof Colors command on and off. More rules of Web imagery Here are a few more items to remember when creating Web graphics: ✦ Resolution doesn’t matter. Regardless of the Resolution value you enter into the Image Size dialog box, the Web browser displays one image pixel for every screen pixel (unless you specify an alternative image size in your HTML file). All that counts, therefore, is the pixel measurements — the number of pixels wide by the number of pixels tall. Caution In the future, however, browsers may end up paying attention to the resolu- tion information, in which case the graphic would get scaled down to the dimension you specify. ✦ Save in GIF or JPEG. GIF and JPEG are the file formats of choice for Web graphics. GIF supports just 256 colors, so it’s better for high-contrast artwork and text. JPEG applies lossy compression, so it’s better for photographs and other continuous-tone images. The upstart format is PNG, which is essentially a 24-bit version of GIF designed for small full-color images that you don’t want to compress. ✦ Index colors with a careful eye. Before you can save an image in the GIF for- mat, you must reduce the number of colors to 256 or fewer. Photoshop uses a technique called indexing, which reassigns colors according to a fixed index, serving much the same purpose as the index in the back of this book. In Photoshop, you can create custom color tables so that the indexing process leaves many of the original image colors intact, thereby improving the appear- ance of your graphics. Tip ✦ Save essential data only. If you save your Web images via the standard Save or Save As command instead of the Save For Web dialog box, you can reduce your file size by turning off all nonessential options — annotations, alpha channels, and so on. Also, for the sake of previews, go into the Saving Files panel of the Preferences dialog box (press Ctrl+K and then Ctrl+2) and set Image Previews to Ask When Saving. Then turn off the previews when saving the files. By recognizing which formats to use when, and how best to reduce colors, you can better ensure that visitors to your Web site will spend less time sitting on their hands and more time enjoying your site. I explain the fine points of the file formats and color indexing in the following sections.
846 Part V ✦ Color for Print and the Web Saving JPEG Images When it comes to saving photographic images, no format results in smaller file sizes than JPEG. As explained in gory detail in Chapter 3, the JPEG format decreases the file size by applying a lossy compression scheme that actually redraws details in the image. Inside the JPEG Options dialog box, select lower Quality settings to put the screws to the image and squish it as low as it will go. But in doing so, you also sacrifice image detail. (Revisit the second color plate in this book, Color Plate 3-2, to see an example of JPEG compression at work.) Just to show you how well the JPEG format works, Figure 19-2 shows a series of images saved in the JPEG and GIF formats, along with their file sizes. The original file consumed 62K in memory. Yet by lowering the Quality setting to Medium, I was able to get the file size down to 28K on disk. To accomplish similar savings using the GIF format, I had to reduce the color palette to 3 bits, or a mere 8 colors. (For the record, this same file saved in the PNG format consumed 63K on disk.) As you can plainly see in the enlarged details, applying JPEG compression has a less destructive effect on the appearance of the image than reducing the color palette. JPEG Maximum (8), 43K High (6), 34K Medium (3), 28K GIF 8 bits/pixel, 71K 5 bits/pixel, 44K 3 bits/pixel, 26K Figure 19-2: JPEG compression produces smaller file sizes with less impact than reducing the color palette and saving in GIF. The number in parentheses indicates the Quality value entered into the JPEG Options dialog box.
Chapter 19 ✦ Creating Graphics for the Web 847 Tip When judging small differences in file size, right-click the file at the desktop level and choose the Properties command. Then check the Size item listed in bytes. For example, the Size item in Figure 19-3 reads 16KB (16,551 bytes), 32,768 bytes used. The value in parentheses is the true reading, accurate to the byte. The second value — in this case, 32,768 bytes — is measured in drive blocks, which are the smallest parcels of disk that the system can write to. This makes for a misleading measurement that is invariably larger than the actual file size and that grows in proportion to the capacity of the hard drive (or drive partition). Whatever you do, don’t believe the size listed in the preview box at the far-left end of the status bar. This is the size of the image in memory, but where Web graphics are concerned, all that counts is the size of the file on disk. Figure 19-3: To gauge the true size of a file — accurate to the byte — right-click it at the desktop level, choose the Properties command, and observe the value in parentheses. You can save an image to JPEG using either the standard File ➪ Save As command or the Save for Web command, which I explore later in this chapter. When you save via File ➪ Save As, Photoshop displays file size information at the bottom of the dia- log box, assuming that you select the Preview check box, as shown in Figure 19-4.
848 Part V ✦ Color for Print and the Web The stated size reflects an approximate indication of the file size you’ll get if you use the current JPEG options. What’s more, Photoshop estimates how long the file will take to download at a given modem speed, which you select from the Size pop- up menu. Although these values are just approximations, they give you a good idea of how much compression you need to apply to the image to keep it at a reasonable download time. Figure 19-4: If you turn on the Preview check box, Photoshop displays the approximate file size and download time of the image at the current settings. The other dialog box options work as follows: ✦ Matte: Unlike GIF, JPEG does not support transparency. So if your image contains transparent areas, Photoshop needs to know what color to fill them with. Select the desired color from the Matte pop-up menu. Keep an eye on the background image to make sure that you like the effect. Be aware that JPEG compression may cause the actual matte color to differ somewhat from the color you choose from the menu. ✦ Quality: If you’ve ever seen the movie This Is Spinal Tap, you may recall the scene in which lead guitarist Nigel Tufnel demonstrates how he can crank up the dials on his amplifier to 11, one beyond the standard maximum of 10. When asked, “Why not just make 10 louder and make 10 the top number?” Nigel blanks for a moment and finally concludes, “This goes to 11!” In that same vein, I present you with the Quality value, which once topped out at 10 and now extends to 12. Why not simply make 10 better quality and make 10 the top number? You don’t need a computer science degree to figure out the answer to that question: “This goes to 12!” At any rate, use the Quality option to specify the amount of compression applied to your image. Lower values mean smaller file sizes and more JPEG
Chapter 19 ✦ Creating Graphics for the Web 849 compression gook. Many experts say Medium (3) is the best setting for Web graphics, but I think it looks pretty awful, especially on screen. I prefer a Quality value of 5 or better. ✦ Format Options: Most Web browsers support two variations on the JPEG format. The so-called baseline (or sequentially displayed) format displays images in line-by-line passes on screen. The progressive JPEG format displays an image on screen in multiple passes, permitting visitors to your page to get an idea of how an image looks right off the bat, without waiting for the entire image to arrive. To save a baseline image for use on the Web, select Baseline Optimized. This format includes better Huffman encoding that makes the file even smaller than Baseline (“Standard”). You can generally reduce the file size by 5 to 10 percent by using this option. ✦ Scans: If you select the Progressive radio button, you can pick a number of passes from the Scans pop-up menu. A higher value results in a faster display of the initial image on your page, but it also takes longer to display completely on screen because of all the incremental refreshing (although some browsers are smart enough not to redisplay individual JPEG scans if they already have received data for subsequent ones). A medium value of 4 is probably best if you choose to create progressive images. Caution There’s a fair amount of debate over whether you should use progressive JPEG (and other incremental display options such as GIF interlacing). I used to be a fan of the option because it gives the viewer the early right of refusal. But I’ve become aware of enough compatibility issues that I now advise people to turn the option off. Preparing and Saving GIF Images So much for JPEG; on to GIF. The GIF format came into being during a time when only the super savvy owned 1200-bps modems. It supports a maximum of 8 bits per pixel (256 colors), and it uses LZW compression, just like TIFF. GIF comes in two varieties, known by the snappy monikers 87a and 89a, with the latter support- ing transparent pixels. Frankly, GIF is getting a little long in the tooth. Most online pundits figure PNG will replace GIF in the next few years. But for the time being, GIF is an extremely popular and widely supported format. And despite its obvious limitations, it has its uses. GIF is a much better format than JPEG for saving high-contrast line art or text. Figure 19-5 shows two versions of the same image; the top image was saved in the JPEG format, and the bottom one was saved in GIF. As you can see, the JPEG com- pression utterly ruins the image. And I had to reduce the Quality setting to 0 — the absolute minimum — to get the file size down to 16K. Meanwhile, saving the image in the GIF format sacrificed no detail whatsoever and resulted in a file size of 18K. GIF’s LZW compression is well suited to high-resolution artwork with large areas of flat color.
850 Part V ✦ Color for Print and the Web Figure 19-5: The JPEG format creates weird patterns in high-contrast images (top) and saves relatively little space on disk. Meanwhile, GIF keeps the sharp edges very much intact (bottom). But before you can save a color image in the GIF format, you have to reduce the number of colors using Image ➪ Mode ➪ Indexed Color. The following section explains how this command works. Using the Indexed Color command Choose Image ➪ Mode ➪ Indexed Color to display the dialog box shown in Figure 19-6. This command permits you to strip an image of all but its most essential colors. Photoshop then generates a color look-up table (LUT), which describes the few remaining colors in the image. The LUT serves as an index, which is why the process is called indexing. For some reason, Photoshop doesn’t let you apply the Indexed Color command to Lab or CMYK images. And although you can apply Indexed Color to a grayscale image, you don’t get any control over the indexing process; Photoshop doesn’t let you reduce the image to fewer than 256 colors, for example. So if you want to index a Lab or CMYK image or custom-prepare a grayscale image, choose Image ➪ Mode ➪ RGB to convert the image to the RGB mode and then choose Image ➪ Mode ➪ Indexed Color. Alternatively, you can use Save for Web to save and index your images at the same time. (See the section “Optimizing JPEG and GIF Images,” later in this chapter, for more information.)
Chapter 19 ✦ Creating Graphics for the Web 851 Figure 19-6: Use the Palette options to select the kinds of colors that remain in the image. Use the Colors option to specify how many colors remain. Tip Don’t expect to be able to edit your image after indexing it. Most of Photoshop’s functions — including the gradient tool, all the edit tools, and the filters — refuse to work. Others, like feathering and the paintbrush and airbrush tools, produce undesirable effects. If you plan on editing an 8-bit image much in Photoshop, convert it to the RGB mode, edit it as desired, and then switch back to the indexed color mode when you finish. Now that I’ve gotten all the warnings and special advice out of the way, the following sections explain how to use the options inside the Indexed Color dialog box. Adobe gave the dialog box an overhaul in Version 5.5, adding helpful options for locking down important colors, choosing from more naturalistic palettes, and applying transparency. Specifying the palette The first pop-up menu — Palette — tells Photoshop how to compute the colors in the look-up table. The following list explains how each of the options works: ✦ Exact: If the image already contains fewer than 256 colors, the Exact option appears by default. This only occurs if you’ve created an extremely high- contrast image — such as a screen shot — or you’re working from an image that originally started out as grayscale. If Exact is selected, just press Enter and let the command do its stuff. No sense messing with a good thing. ✦ System: Photoshop offers two System options, which are used by the Macintosh and Windows operating systems. The only reason to select either of these options is if you want to add a bit of imagery to the system. For example, it’s a good idea to select the System (Windows) option when creating a background pattern, a wallpaper image, or some other item that appears at the desktop level. Color Plate 19-1 shows examples of a 24-bit image downsized to the Mac and Windows system palettes.
852 Part V ✦ Color for Print and the Web ✦ Web: Just to make things as confusing as possible, Web browsers subscribe to their own variety of color palette. According to folklore, this 216-color LUT is an intersection of colors found in the Mac and Windows system palettes. But in fact, the Web palette includes those 216 colors whose R, G, and B values are divisible by 51. That means each primary color can be set to 0, 51, 102, 153, 204, or 255. Calculate all possible combinations, and you get 216 colors. When displaying an image on an 8-bit screen, the browser invariably changes all colors to those in the Web palette. Therefore, converting your colors to the Web palette ensures that what you see on your screen is what your guests see as well. But for most folks, I still argue in favor of Adaptive if indexing must be done. An image with an adaptive palette will look far better on 16-bit and better monitors, and these days, high-color screens are in the majority. (The notable exceptions are portables, which often max out at 8-bit screens. But these LCD screens hardly do your color graphics justice, so it seems silly to let such lowest-common-denominator concerns dictate your work.) ✦ Uniform: This is the dumbest option of them all. It merely retains a uniform sampling of colors from the spectrum. I’ve never heard of anyone finding a use for it — but as always, I welcome your suggestions. ✦ Adaptive: This option selects the most frequently used colors in your image, which typically delivers the best possible results. Because it ignores all system and Web palettes, images downsized with Adaptive look best on high-color monitors, as I mentioned previously. To demonstrate just how much better they look, the bottom row of Color Plate 19-1 shows three images subject to the Adaptive palette at various Color Depth settings. Even with a mere 64 and 16 colors, the middle and right images look as good or better than the 256-color system-palette images above them. Photoshop 6 In Photoshop 6, Adaptive comes in two flavors, Local and Selective. Choose Local (Adaptive) if you want Photoshop to consider the colors in the current image only. If you have several images open and want to create a palette based on all the images, choose Master (Adaptive). Tip When you use the Local option, you can influence the performance of the Adaptive option by selecting an area of your image before choosing the Indexed Color command. Photoshop favors the selected area when creating the palette. For example, before indexing the image in Color Plate 19-1 down to the 8-color palette (bottom right), I selected the fellow’s face to avoid losing all the flesh tones. If you have more than one image open, Photoshop considers the selection in the active image and the entire palettes in the other images. ✦ Perceptual and Selective: These two options, added in Photoshop 5.5, are variations on Adaptive. But where Adaptive maintains the most popular colors, Perceptual is more intelligent, sampling the colors that produce the best transitions. The Selective option tries to maintain key colors, including those in the so-called 216 “Web-safe” palette.
Chapter 19 ✦ Creating Graphics for the Web 853 Tip That said, here’s some advice: Select Perceptual for images where smooth transitions are more important than color values. Use Selective when an image contains bright colors or sharp, graphic transitions. And if an image contains relatively few colors — and you want to maintain those colors as exactly as possible, go for Adaptive. Photoshop 6 As with Adaptive, choose the Local version of Perceptual and Selective if you want the palette created solely on the basis of the current image. The Master versions take all open images into account. ✦ Custom: Select this option to travel to the Custom Table dialog box, where you can load a look-up table from disk, or to create and save a custom table. This is useful when creating multimedia content, but rarely serves any purpose for Web graphics. I explain how to save a custom palette later in this chapter, in the section “Editing indexed colors.” ✦ Previous: This option uses the last look-up table created by the Indexed Color command. If you’re trying to create a series of high-contrast graphics that you want to look as homogeneous as possible, use this option. The Previous option is dimmed unless you have used the Indexed Color command at least once during the current session. Colors Note Like all computer programs, Photoshop measures color in terms of bit depth. As I’ve mentioned elsewhere in this book, an 8-bit image translates to 256 colors. Photoshop computes this figure by taking the number 2 and multiplying it by the number of times specified by the bit depth. 24-bit means 2 to the 24th power, which is 16 million; 4-bit means 2 to the 4th power, which is 16. Before Photoshop 5.5, you controlled the number of colors in the palette by choosing a particular bit depth. Now you simply enter the actual number of colors into the Colors option box. The idea is that scaling colors by an entire bit depth — 8-bit for 256 colors, 7-bit for 128, 6-bit for 64, and so on — isn’t really necessary to achieve smaller file sizes, so you might as well free your mind and enter the exact number of colors you deem fit. Still, it was a valuable option, and I would have preferred to see it stay. Sacrificing an entire bit does sometimes make a difference, after all. As you can guess, fewer colors result in smaller GIF files. I generally start with 64 colors. With the Preview check box turned on, I can see the effect of this palette in the image window. If the image looks okay, I try going even lower. It’s all a matter of getting the colors as low as they can go without becoming ugly. The bottom row in Color Plate 19-1 shows examples of the same image with 256, 64, and 16 colors.
854 Part V ✦ Color for Print and the Web Forced In the past, an Adaptive palette could easily upset extremely important colors. For example, the white background of an image might turn a pale red or blue, even if white was a predominant color. Photoshop 5.5 added the Forced option, which enables you to lock in important colors so that they don’t change. Black and White locks in black and white. Primaries protects eight colors — white, red, green, blue, cyan, magenta, yellow, and black. And Web protects the 216 colors in the Web-safe palette. If you choose Custom, you can select the colors that you want to lock in. When you select Custom, Photoshop opens the Forced Colors dialog box. You see a color swatch for each color locked by the previously selected setting. To add another color, click an empty swatch and then select the color from the Color Picker dialog box. Click an existing swatch to replace it with another color. And to unlock a color, Ctrl-click the swatch. You can save your settings as a color table by clicking the Save button. (Forced colors files use the file extension .act.) Save the file in the Optimized Colors folder, located inside the Presets folder. Load existing settings by clicking the Load button. Transparency If an image is set on a layer against a transparent background, selecting this check box maintains that transparency. Bear in mind, however, that transparency in a GIF file is either on or off; there are no soft transitions as in a Photoshop layer. Note If you apply the Indexed Color command with the Transparency check box turned on, the familiar checkerboard pattern appears in the transparent portion of the image, as shown in Figure 19-7. What’s unusual about this is that Photoshop flattens the file when you first choose the Indexed Color command, as indicated by the sin- gle Background layer pictured in the figure. Furthermore, you cannot add new layers to the file. This makes an indexed image the only kind of Photoshop document that can accommodate transparency without layers. Matte The Matte option works in collaboration with the Transparency check box. (If there is no transparency in an image — that is, all layers cover one another to create a seamless opacity — the Matte option is dimmed.) When you select Transparency, the specified Matte color fills the translucent pixels in the image. When Transparency is turned off, the Matte color fills all translucent and transparent areas. To ensure smooth transitions, select the Matte color that matches the background color of your Web page.
Chapter 19 ✦ Creating Graphics for the Web 855 Figure 19-7: An indexed image is unique in that it can accommodate transparency inside a flattened document. Dither This option controls how Photoshop mimics the several million colors that you asked it to remove from an image: ✦ None: Photoshop maps each color in the image to its closest equivalent in the look-up table, pixel for pixel. This results in the harshest color transitions. But as I explain in a moment, it is frequently the preferable option. ✦ Diffusion: This option dithers colors randomly to create a naturalistic effect, as shown in the lower-right example of Figure 19-8 and the last image in Color Plate 19-2. ✦ Pattern: Pattern dithers colors in a geometric pattern, which is altogether ugly. Look to the lower-left example of Figure 19-8 and the middle image in Color Plate 19-2 for examples. ✦ Noise: Added in Photoshop 5.5, the Noise option mixes pixels throughout the image, not merely in areas of transition.
856 Part V ✦ Color for Print and the Web Original None Pattern Diffusion Figure 19-8: The results of converting an image (upper left) to the System palette using three of the Dither options: None, Pattern, and Diffusion. After looking at Figure 19-8 and Color Plate 19-2, you may think that Diffusion is the option of choice. And in many cases it is, especially because you can control the amount of dithering using the Amount value, discussed next. But often, None is the better option. First of all, None results in smaller GIF files (as Color Plate 19-2 shows). Because LZW is better suited to compressing uninterrupted expanses of color, harsh transitions mean speedier images. Second, if a guest views your page on an 8-bit monitor, the system dithers the image automatically (assuming that you selected one of the Adaptive options from the Palette pop-up menu). System dithering on top of Diffusion dithering gets incredibly messy; system dithering on its own, however, is acceptable.
Chapter 19 ✦ Creating Graphics for the Web 857 Amount When you choose Diffusion as the dithering mode, you can modify the amount of dithering by raising or lowering this value. Lower values produce harsher color transitions, but lower the file size. It’s a trade-off. Keep an eye on the image window to see how low you can go. Preserve Exact Colors The Preserve Exact Colors check box is available only when the Diffusion option is selected from the Dither pop-up menu. When turned on, this option turns off dithering inside areas of flat color that exactly match a color in the active palette. Say that you’ve created some text in a Web-safe color. The text is antialiased, but the letters themselves are flat color. By selecting Web from the palette pop-up menu and selecting the Preserve Exact Colors check box, you tell Photoshop to dither around the edges of the letters but to leave the interiors undithered. As I mentioned before, you may often get better looking images if you apply no dithering. But if you decide to dither, turn Preserve Exact Colors on. Even if you can’t see a difference on your screen, it may show up on another screen. Editing indexed colors As I said earlier, Adaptive is generally the best choice when creating Web graphics because it scans each image for its most essential colors. But even the Adaptive option doesn’t get things 100-percent right. On occasion, Photoshop selects some colors that look wildly off base. To replace all occurrences of one color in an indexed image with a different color, choose Image ➪ Mode ➪ Color Table. The ensuing Color Table dialog box, shown in Figure 19-9, enables you to selectively edit the contents of the LUT. You can get to this same dialog box by choosing Custom from the Palette pop-up menu in the Indexed Color dialog box, discussed in the preceding sections. The table also appears in the Save For Web dialog box, explored in the upcoming section “Optimizing JPEG and GIF Images.” To edit any color, click it to display the Color Picker dialog box. Then select a different color and press Enter to go back to the Color Table dialog box. Press Enter again to close the Color Table dialog box and change every pixel colored in the old color to the new color. The Color Table dialog box also enables you to open and save palettes and select predefined palettes from the Table pop-up menu. What the Color Table dialog box doesn’t let you do is identify a color from the image. For example, if you’re trying to fix a color in your image, you can’t display the Color Table dialog box, click the color in the image, and have the dialog box show you the corresponding color in the look-up table.
858 Part V ✦ Color for Print and the Web Figure 19-9: Use the Color Table dialog box to modify the colors in an indexed image. Note “But,” you say, “what about the eyedropper in the dialog box? Doesn’t that lift colors?” The answer is yes — but it doesn’t add the color you click to the table. Instead, it makes the color transparent, as explained in the next section. The only way to be sure you’re editing the correct color — and be forewarned, this is a royal pain in the behind — is to slog through the following steps, which begin before you choose Image ➪ Mode ➪ Color Table. STEPS: Editing a Specific CLUT Color 1. Use the eyedropper tool to click the offending color in the image. This makes it the foreground color. Remember, you take this step before opening the Color Table dialog box — you want to work with the eyedropper from the toolbox, not the one in the dialog box. 2. Click the foreground color icon to display the specs for the color in the Color Picker dialog box. Or display the Info palette by pressing F8 and then hover the cursor over the foreground color icon. Either way, write down the RGB values on a handy piece of paper, the palm of your hand, or a bald friend’s scalp. (Don’t edit the color inside the Color Picker dialog box at this time. If you do, you just change the color without changing any pixel in the image associated with that color.) If you’re working in the Color Picker, press Esc to close it.
Chapter 19 ✦ Creating Graphics for the Web 859 3. Choose Image ➪ Mode ➪ Color Table. This command becomes available only after you convert the image to Indexed Color mode. 4. Click a color that looks like it might be the right one. After the Color Picker appears, compare the color’s RGB numbers to those you wrote down. If they match, boy, did you ever luck out. Go ahead and edit the color as desired. If the RGB values don’t match, press Esc to return to the Color Table dialog box and try again. And again. And again. Tip To create a color ramp — that is, a gradual color progression — drag, rather than click, the colors in the palette to select multiple colors at a time. Photoshop then displays the Color Picker dialog box, enabling you to edit the first color in the ramp. After you select the desired color and press Enter, the Color Picker reappears, this time asking you to edit the last color in the ramp. After you specify this color, Photoshop automatically creates the colors between the first and last colors in the ramp in even RGB increments. Making colors transparent In the old days, you used File ➪ Export ➪ GIF89a Export to save a GIF image with transparent pixels. Now any GIF file can store transparency information. (See the next section for more information.) After indexing the colors in an image, you can make all occurrences of one of those colors transparent using the Color Table command. Just select the eyedropper tool in the Color Table dialog box, shown in Figure 19-9, and click a color in the palette or in the image itself. Either way, that color becomes transparent. The Color Table command suffers one limitation, though: You can make just one color transparent at a time. To make a second color transparent, you must press Enter to exit the dialog box and then choose Image ➪ Mode ➪ Color Table again. Cross- For examples of transparent pixels, you might want to check out my site at Reference http://www.dekemc.com. Every single graphic includes some transparent pixels, permitting the drop shadows and other gradual elements to blend in with the background. Saving (and opening) GIF with transparency There’s really no reason to go on using the GIF89a Export command — the regular GIF format available through the Save As and Save For Web dialog boxes offers all the functions formerly accessible only through GIF89a Export. In addition, GIF89a Export is hard to script from the Actions palette, and you lose your work if you cancel midway through. In fact, the File menu doesn’t even offer GIF89a Export anymore — you have to install it separately from the Photoshop 6 program CD.
860 Part V ✦ Color for Print and the Web Note It’s long been rumored that the GIF89a Export command makes files smaller than standard GIF; I even made the mistake of repeating this rumor in the Photoshop 5 Bible. (Shame on me.) But after further testing, the rumor turns out to be a misread- ing of the evidence, as the scientists would say. It’s not the GIF89a format per se, but rather its automatic exclusion of extraneous data that produces smaller files. When you save to GIF in Photoshop 6, the program automatically disables most options that save nonessential image data. Here’s the new, improved way to save a GIF image with transparency: 1. Specify the transparency using the Indexed Color command. You can make additional colors transparent using the Color Table commands, if you like. Photoshop 2. Choose File ➪ Save As and select the As a Copy check box. This option 6 replaces the Save a Copy command in Photoshop 6. 3. Select CompuServe GIF from the Format pop-up menu. Note Be sure to turn off image previews (icons and thumbnails). This assumes that you set the Image Previews option to Ask When Saving inside the Preferences dialog box. 4. Press Enter. Photoshop displays the GIF Options dialog box, which offers two options: Normal and Interlaced. If you want the Web browser to display the image in incremental passes — similar to a progressive JPEG image — select the latter. Otherwise, select Normal. (I recommend that you don’t interlace GIF images, though, because they can create problems in some browsers.) 5. Press Enter again. Photoshop saves the GIF file to disk. Tip If you save a file to the GIF format before indexing the colors, Photoshop displays the Indexed Color dialog box before showing you the GIF Options dialog box. You can then specify all your indexing preferences as you normally do. So if you forget to index the image before opening the Save As dialog box, don’t bother canceling out of the dialog box to go back and choose the Indexed Color command. Just do your indexing as part of the save process. However, note that the on-screen image remains an RGB image; Photoshop doesn’t completely convert the image to indexed mode until you close the file. Caution Regardless, after you create the GIF file, the open image window continues to bear the name and extension it had in the past. This is because you saved a copy of the image; you did not save the open version of the file. If you make any changes to the image, you need to resave the GIF copy to update it. When you open a GIF file that contains transparency, Photoshop displays the transparency as a checkerboard pattern. No more having to remember which colors are transparent and which are opaque — what you see is what you get.
Chapter 19 ✦ Creating Graphics for the Web 861 Optimizing JPEG and GIF Images Not sure what settings to use when saving a GIF or JPEG file? Wouldn’t it be nice to compare a bunch of different settings side-by-side to decide which provided the best trade-off between quality and size? The Save for Web command, introduced in Photoshop 5.5, permits you to do exactly that, and more. File ➪ Save for Web enables you to index colors, add transparency, and save to GIF or JPEG in one operation. So there’s no need to use the Indexed Color or Color Table commands — in fact, Save for Web works best if you start from a full-color, RGB image. Photoshop 6 Save for Web also enables you to save image slices, which you can create using the slice tool now available directly in Photoshop, as well as ImageReady. When you save the image, Photoshop saves each slice as an individual image file and also generates the HTML file your browser needs to rebuild the image on the Web page. The Save For Web dialog box can be a little overwhelming at first, but in reality, there’s not much more going on than when you save a JPEG or GIF file normally. The following steps provide an overview of the process: STEPS: Optimizing a Web Image 1. Choose File ➪ Save for Web or press Ctrl+Shift+Alt+S. Either way, Photoshop displays the large window shown in Figure 19-10. 2. Click the tab for the display you want to use. You have four choices: Original shows you the original image — not much use for that one. Optimized shows the image as it will appear if you save using the current optimization settings. To compare multiple settings at the same time — the real power of the window — click the 2-Up or 4-Up tab in the top-left corner of the window. Figure 19-10 shows the 4-Up view. When you choose 2-Up, Photoshop shows you the original and optimized images side by side. With 4-Up view, you get two additional optimized images, which Photoshop generates using settings that create even smaller versions of the file. Photoshop bases the settings for these two additional previews on those you select for the primary optimized view. Photoshop 6 If your image contains slices, you can toggle slice previews on and off by clicking the slice display button, labeled in Figure 19-10. Tip To get a closer view of your image in the dialog box previews, zoom and scroll the previews using the zoom and hand tools or use the standard spacebar-based keyboard equivalents. You can also change the zoom ratio via the zoom pop-up menu in the bottom-left corner of the window.
862 Part V ✦ Color for Print and the Web Optimize menu Slice select tool Preview menu Zoom menu Browser preview View/hide slices Figure 19-10: Click the 4-Up tab at the top of the window to compare the original image to three sets of Web compression settings. 3. Click a preview and choose the optimization settings you want to apply. The settings, which run down the right side of the dialog box, change according to the file format that you select. Most options duplicate those found in the JPEG and GIF Options dialog boxes; you can read about the other settings in the next two sections. After you change a setting, Photoshop rebuilds the preview to show you the result. To compare the results with another group of settings, click another preview and apply the new settings. Keep playing around until you arrive at the optimal outcome for your image. You can also select an option from the Settings pop-up menu to apply a preset collection of optimization settings. Photoshop provides several presets, and you can save your own presets, as well. The upcoming section “The Preview menu” explains how. Photoshop 6 If your image contains slices, you can optimize selected slices only. With the slice preview turned on, click the slice select tool, also labeled in the figure, and then click the slice you want to optimize. Shift-click to select additional slices. (For details on how to create slices in the first place, see the section “Slicing Images,” later in this chapter.)