Adobe Photoshop offers many more tools for getting great-looking Web images. In fact, with each new version, we see that the line between ImageReady and Photoshop becomes less distinct. Where will it ever end?
In this section, we'll explore image slicing, converting images to indexed color, making Web page galleries for browsing your photographs, and building animated GIFs. This certainly doesn't cover every Web feature in Photoshop, but we think it covers the most important ones.
Not every part of an image is equal, and not all parts deserve equal treatment. Often, some parts of an image can be compressed significantly more (with greater image degradation) than others. Or some parts are destined to be rollovers (areas that change when the cursor rolls over them in the Web browser), animations, or Web links. In any of these instances, you might consider slicing your graphic into smaller pieces with Photoshop's Slice tool. When you do this, and then save the image with the Save For Web feature, Photoshop saves each slice as a separate file to disk with its own compression settings. Or, if you open the sliced image in ImageReady, you can set each slice to be a rollover or other type of dynamic media.
Tip: Slices vs. Image Maps
If your entire image will be optimized the same way, you're not creating rollovers or other dynamic areas in the graphic, but you do want certain areas to be "buttons" or "hot links" (areas that, when clicked, take you to a different URL), then you might want to make the image an "image map" instead of slicing it up. It's easy to make image maps in ImageReady (there's even a special tool for it), and this way you only export a single image rather than one file for each slice. Plus, the "hot" areas in an image map can be rectangular, oval, or even a polygonwhereas slices are always rectangular.
Making (and breaking) slices
Photoshop offers two tools for creating slices: the Slice tool (it looks like a little blade in the Tool palette; press K to select it quickly), and the New Layer Based Slice feature (in the Layer menu).
You can't have a single slice of an image; however you make the slice, Photoshop automatically slices the rest of the image up. For example, if you make a square slice in the middle of the picture, Photoshop adds four other "auto-slices" to fill in the area around the square (see Figure 14-11). The slice you make is called a "user slice," and it looks slightly different on screen: user slices have solid boundaries, auto-slices have dotted boundaries. Each time you change or add a user slice, Photoshop reconfigures the auto-slices automatically.
Figure 14-11. Slicing an image
How do you change a slice once you've made it? Use the Slice Selection tool. This tool is hiding behind the Slice tool in the Tool palette; you can get it by pressing Shift-K, or, temporarily, by holding down the Command key while the Slice tool is selected. The Slice Selection tool lets you move the slice (click inside the slice and drag) or change the slice boundaries (drag the slice's corner or edge handles). You can only edit or move user slices, though. If you want to change an auto-slice into a user slice, click on it with the Slice Selection tool (you can't use the Command key trick here) and then click the Promote to User Slice button in the Options bar.
Tip: Minimize Your Slices
The main problem with automatic layer-based slices is that you often get many more slices using this feature than if you use the Slice tool with care. The more slices, the more files you have to keep track of on disk, and the longer it takes to transfer the image to the Web browser. We'll often start our sliced images with layer-based slicing, but then edit the slice boundaries once we're pretty sure the graphic won't change again. To edit the slice boundaries, you have to click on the slice with the Slice Selection tool and then click the Promote to User Slice button in the Options bar. Of course, after you do this, the slices are no longer tied to the layers (see Figure 14-12).
Figure 14-12. Reducing the number of slices
Tip: Overlapping Slices
Slices often overlap each other, especially when you use the New Layer Based Slice feature. In these cases, Photoshop adds "sub-slices" in the overlapping areas, which act just like regular slices, but cannot be selected with the Slice Selection tool. If you don't like the order in which the overlapping slices are arranged, you can change them by selecting the slice and clicking on the Bring to Front or Send to Back button in the Options bar (these buttons appear when you have the Slice Selection tool chosen in the Tool palette). In general, you should try to avoid overlapping slices unless you're going to apply the same optimization/compression techniques to each of them.
By the way, once you make your slices, you can lock them in place by selecting Lock Slices from the View menu. That way, you (or some careless colleague) won't accidentally move or resize the slice boundaries.
If you want to delete a single slice, click on it with the Slice Selection tool and press the Delete or Backspace key. If you want to delete all the slices, choose Clear Slices from the View menu. (No, we have no idea why these features are in the View menu; we figure they just couldn't decide where else to put them.)
While you need ImageReady to create dynamic media such as rollovers, you can control each slice and add some basic actions right in Photoshop by selecting the slice with the Slice Selection tool and clicking the Slice Options button in the Options bar. (Even faster, just Command-double-click on the slice with the Slice tool.) This opens the Slice Options dialog box (see Figure 14-13). Here's a quick rundown of the options.
Figure 14-13. Slice Options dialog box
The values you set in the Slice Options dialog box are saved with your Photoshop image, and are also transferred to ImageReady if you open the graphic in that program. But you still have to export the picture along with HTML in order for the values to actually be functional.
In the good old days, we used to have to slice up images manually, using the Crop tool, then write down the pixel dimensions for each slice, and then piece them together into a table using hand-coded HTML. And we liked it! (Well, not really, but what choice did we have?) Fortunately, Photoshop can write our HTML for us now, making the whole process pain-free and very quick. The trick is to save the sliced image using Save For Web, as described earlier in the chapter, and make sure that you choose Images and HTML from the Format popup menu in the Save Optimized As dialog box.
When you open the Save For Web dialog box, choose the Slice Selection tool (press K), click on each user slice, and specify how you want it to be optimized (GIF versus JPEG, number of colors, and so on). You can also click on one of the auto-slices and choose its optimization settings (all the auto-slices get the same optimization settings).
After you click the Save button, you'll see the Save Optimized As dialog box; choose Other from the Settings popup menu here. The Output Settings dialog box (see Figure 14-14) lets you control how Photoshop writes the HTML to disk, including how it names each slice that you haven't already named in Slice Options, whether the slices are arranged in an HTML table or with CSS tags, and a host of other options. Most of the settings aren't that exciting, or they're self-explanatory. Here are a few that we should mention, though.
Figure 14-14. Output Settings
Figure 14-14. More Output Settings
You can get to the Output Settings dialog box from either the Save For Web dialog box or the Save Optimized As dialog box (the dialog box that you get once you click OK from Save For Web). Both take you to exactly the same place.
Tip: Saving Output Settings
If you think you'll use a particular configuration of options in the Output Settings dialog box more than once or twice, you might as well save your settings to disk by clicking the Save button in the Output Settings dialog box. (Photoshop saves it in the proper place by default: the Optimized Output Settings folder, inside the Presets folder, inside the Photoshop folder.) Then, next time you want to use the same configuration, you can simply choose your saved file from the Settings popup menu (or click the Load button). Note, however, that the Save button only appears in the Output Options dialog box when you open it from the Save As Web dialog box; it's missing in action when you open Output Options from the Save Optimized As dialog box.
As we said in Chapter 3, Image Essentials, and earlier in this chapter, GIF images and many other graphics designed for games and multimedia are stored in Indexed Color mode. Indexed color images are small (about the same size as grayscale images), they often compress in file size really well, and they're perfect for those old and obsolete 8-bit color monitors that some folks still have.
Earlier, we said that converting images to Indexed Color mode before saving them as GIF files was obsolete, because it's more convenient to leave the image in RGB mode and use Save For Web to convert it on the fly. However, many people still need to work with indexed color images in Photoshop, and the program offers two features to help manage this process: the Indexed Color dialog box and the Color Table dialog box. There are also several ways to pick and manage Web-safe colors, which we'll discuss in the next section.
Indexed Color dialog box
You can convert an RGB or grayscale image to indexed color by selecting Indexed Color from the Mode submenu (under the Image menu). This brings up the Indexed Color dialog box (see Figure 14-15). Many of the controls here work in exactly the same manner as those we talked about in the Save For Web dialog box (see "GIF," earlier in this chapter). However, there are a few special things to think about.
Figure 14-15. Indexed Color dialog box
Tip: Prioritizing Colors
Occasionally you and Photoshop might disagree as to what colors in the image are the most important. For instance, if you convert a photographic portrait of someone against a bright blue background, the color palette will include a lot of blues that you might not necessarily care aboutyou probably want Photoshop to include more skin tones instead. You can force Photoshop to prioritize colors by selecting the area containing the colors you want, then converting to Indexed Color mode. Note that Photoshop may still change the colors slightly.
Tip: Saving Palettes
After converting an image to indexed color, you can view the palette by selecting Color Table from the Mode submenu (under the Image menu). More important, from there you can save this palette to disk in order to use it for other conversions (click the Save button). In this way, you can standardize a number of images on the same palette. Plus, custom color palettes that you've saved to disk from Photoshop can also be used in some multimedia programs. Note that you need to save the palette with an ".aco" extension if you want it to work on Windows or cross-platform machines.
Editing the color table
In an indexed-color image, each pixel is assigned a number from 0 to 255. The pixel's color comes only by comparing the number with a color lookup table (CLUT). Fortunately, this is all done behind the scenes, so you don't have to think about it much. One reason to convert an image to Indexed Color is so you can edit the particular colors in an image by editing the CLUT. If you choose Color Table from the Mode submenu, you can click on any color in the table to edit it. In color tables that have more than eight or 16 colors, this kind of editing is cumbersome; but in some instances, editing an image's color table can be a very powerful tool.
Tip: Swapping Indexed Colors
Let's say you have a logo on your Web page, which you want to be a different color every week. One way to make this color change would be to edit the GIF image's color lookup table (see Figure 14-17).
Figure 14-17. Swapping indexed colors
Tip: Which Swatch to What Color?
Trying to figure out exactly which swatch in the color lookup table represents each color in your indexed color image is almost impossible until you notice that the Info palette gives you this information automatically as you move the cursor over each pixel.
What's a Web color? In Photoshop, this term means two different things, depending on where you find it. Photoshop can display "Web Color" in the Info palette (select Palette Options from the palette's popout menu, or click on one of the little triangles in the Info palette to change the display). In this mode, the Info palette shows you the hexadecimal equivalents of your RGB colors (see Figure 14-18).
Figure 14-18. Hexadecimal equivalents of colors
(For those of you who care but don't already know: Hexadecimal is simply base-16, which means that after the number 9 comes A, then B, then C, and so on to F, which represents the number 15. So the digits 00 signify zero and FF signifies 255.)
The second use of the term "Web Color" is in Photoshop's Color Picker dialog box, where you can turn on the Only Web Colors checkbox. What this should read is Only Web-safe Colors. Or, even more specifically, "Only let me pick colors that won't dither when displayed in a Web browser on archaic 8-bit color monitors."
Tip: Copying Web Colors
The only time you would really need to know the hexadecimal equivalent of a color in your document is if you needed to duplicate it in another program, like GoLive or Dreamweaver. Fortunately, if you select the Eyedropper tool (press I), then hold down the Control key (on the Mac) or the right mouse button (in Windows) while you click, the context-sensitive menu offers to "Copy Color as HTML." The result: the HTML tag for the color you clicked on. For instance, it might copy COLOR="#E7ECF6" on to the Clipboard. You can then paste this into some other program.
If you want the hexadecimal equivalent without the HTML tag, you can simply click once with the Eyedropper tool, then click on the foreground color swatch in the Tool palette. The Color Picker dialog box now displays the hexadecimal values, as well as RGB, CMYK, Lab, and HSB.
Tip: Changing Your Jump To Application
If you use Photoshop and ImageReady together, it's worth noting that Adobe has a Jump To feature in the File menu and at the bottom of the Tool palette (or you can press Command-Shift-M). The Jump To feature does just one thing: it switches to ImageReady. If you have an image open when you invoke this command, Photoshop prompts you to save it (if it's not already saved), and then it opens the same picture in ImageReady.
However, the Jump To feature doesn't have to switch to ImageReady. If there's some other image-editing program that you'd rather use, you can easily change Photoshop's default behavior. Inside the Photoshop Settings folder there's a folder called Helpers. Inside the Helpers folder there's another folder called Jump To Graphics Editor. Inside this folder are aliases (or shortcuts on Windows). The alias with the curly braces around its name is the application that Photoshop switches to when you click the Jump To button on the Tool palette. We'll leave the rest to your imagination. Of course, whatever application you use must be able to open the file format of the images you're working on.
Web Photo Gallery
The Web Photo Gallery, found in the Automate submenu (under the File menu), is like the other automated features: it performs a task that you could do by hand, but it would be so painful and boring that you might fall out of your chair from the sheer monotony of the chore. In a nutshell, the Web Photo Gallery creates a Web page full of image thumbnails (see Figure 14-19). If you click on one of the thumbnails, it automatically links to a larger-size version of the picture. That's about it.
Figure 14-19. Web Photo Gallery
Fortunately, Adobe has come up with some nicer layout templates than earlier versions of Photoshop offered. Some layouts are pretty basic, but any of the layouts are more than adequate when it comes to a quick 'n' dirty display of images from a digital camera that need to be shared among several people on the Web. Some layouts even offer a clever mechanism for your audience to send you e-mail feedback on each image. And if you want to design your own layout, Photoshop lets you (see "Tip: Customize Your Galleries," later in this section).
Using one of these built-in Web photo galleries is pretty easy.
After you click OK, Photoshop processes each of the images in your folder(s) and saves them as JPEGs (this is a good time to go grab a cup of coffee). The final result is three foldersone for the thumbnail images, one for the larger-size images, and one for the HTML pages that display the larger-sized imagesplus two other text files. You can throw away the file called "UserSelections.txt." This is just a record of the settings you used in the Web Photo Gallery dialog box (we're not sure why Photoshop saves this, but there's probably a really good reason).
Tip: Customize Your Galleries
You don't like the galleries that Photoshop creates? Not jazzy enough for you? No problem, you can always edit the HTML files in GoLive, Dreamweaver, or some other editor later. However, if you're going to be making a lot of galleries, it would be more efficient to edit Photoshop's built-in templates instead.
Now, when you open the Web Photo Gallery dialog box, your new template should appear in the Styles popup menu. Obviously, making templates requires some knowledge of HTML, but it's surprisingly easy once you get the hang of it.
The Animation Palette
As we mentioned earlier, the Animation palette is a recent arrival, having earlier been seen only in ImageReady. The ability to create animated GIFs in Photoshop will either strike you as ridiculous (Bruce's eyebrows almost raised off his forehead upon finding this feature) or appropriate (David is just plain tired of launching ImageReady). But whatever the case, it's here, so we'd better at least touch on it.
Tip: Opening Animated GIFs
Oddly, when you open an animated GIF file in Photoshop, the program sees only its first frame. In order to get all the GIF's frames, you must open it in ImageReady, then use that program's Jump to Photoshop feature. If we're lucky, then this is just a bug that will be fixed before too long.
To create an animation, open the Animation palette from the Window menu (see Figure 14-21). At first, every document has a single animation frame. You can think of each frame in an animation as a state in the Layer Comp palettethat is, each frame remembers a given state in the Layer palette. If you click the New Frame button in the palette (technically it's called the Duplicates Selected Frames button, but we prefer our naming) you get a second frame. Now you can change which layers are visible in the Layer palette, where the pixels are on each layer (with the Move tool), or what layer styles are applied to each visible layer. The changes you make apply only to this second frame, so you can click on the first frame to return to the original settings.
Figure 14-21. Animation palette and palette menu
The fact that each frame remembers all those things (layer visibility, layer position, and layer styles) makes Photoshop's animation feature very flexible. For example, here's how to make some text move across the page while changing color:
To preview the animation you just created, click the Play Animation button in the palette. (Click the same button to stop playing.) You'll often find that the animation plays too quickly. You can slow down each frame by choosing a delay time from the popup menu at the bottom of each frame. To apply the same delay time to all the frames, click on the first one, then Shift-click on the last frame (to select it and all frames between), then change the delay for any one of them.
There are many other cool features hiding in the Animation palette menu, including the Make Frames from Layers feature, whichas you'd guessmakes one frame for each layer in your document.
Note that several features appear in the Layers palette whenever the Animation palette is visible. These animation-specific features don't make a lot of sense when you're not animating, but you can still make them stick around when the Animation palette is closed (or stay closed when that palette is open) by choosing from the Animation Options submenu in the Layers palette menu.
To save your animated GIF to disk, use the Save For Web feature and choose a GIF format, as described earlier in this chapter.