Real World Adobe Photoshop CS2: Industrial-strength Production Techniques

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.

Slices

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).

• Slice tool. The Slice tool acts much like the Marquee selection tool: just drag it over the area you want to define as a slice. You can constrain the shape or size of the slice by choosing Constrained Aspect Ratio or Fixed Size from the Style popup menu in the Options bar (see Chapter 8, Making Selections, for more on how to use these options).

• New Layer Based Slice. Let's say you've got five buttons in your image and you want each one to be a separate slice. If each one is on its own layer, then you can avoid the Slice tool entirely by selecting a layer and choosing New Layer Based Slice from the Layer menu (then repeating this for each layer with a button on it). Photoshop creates slices based on the boundaries of whatever is on each layer. Better yet, if you change a layer, the slices update automatically.

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.

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).

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.)

Slice Options

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.

• Name. Photoshop automatically gives your slice a name based on the name of the file itself. When you save the slices to disk, it'll have this name (plus .gif or .jpg, depending on the file type). You can override the name here, if you like. Note that if you're using Cascading Style Sheets (CSS), this is also the object name (see "Saving Slices," below).

• URL. You can make this slice "hot" (so that you can click on it to jump to a different Web page) by typing a URL into the URL field. If the Web page you're linking to will be in the same folder as the current page's folder, then you can just type the file's name (like "mypage.html"). However, if you're linking to a different site's page, you need the full URL (like "http://www.moo.com").

• Target. The Target field tells your Web browser where to open the new Web page that you linked to in the URL field. If you leave this blank, the Web page replaces the current Web page (if you're using frames, then it replaces the current frame). On the other hand, you can type "_top" in the Target field to force the linked page to replace the entire window (even if there's a frame there), or "_blank" to open the link in a new window. If you're using frames in your HTML, you can also type the target frame name.

• Message Text. By default, when you move your cursor over a link in a Web browser, the link URL shows up at the bottom of the browser window. You can replace that URL with a specific message by typing in the Message Text field. We usually leave this blank.

• Alt Tag. If the person viewing your Web page has a slow Internet connection, it might take a while to download an image. While they're waiting, it's often helpful to show them an alt tagsome text that describes what the image will be. This is even more important if they've set their browser's preferences so that no images are downloaded at all. The alt tag (if you type one in this field) appears in place of the image. For instance, this isn't important in a slice that has no relevant information in it, but it's crucial that you label slices that are buttons with their action. Otherwise, some of your viewers may not be able to navigate your Web site.

• Dimensions. The Dimensions fields let you specify where the slice is in your image and how wide and tall it is (in pixels). This is most useful when you're trying to align slices along their edges.

• No Image. If you choose No Image from the Slice Type popup menu, Photoshop won't save this slice to disk. Instead, it includes some custom HTML in its place (whatever you type in the HTML field of the Slice Options dialog box). For example, if you type text here, you'll see that text in place of the slice in the Web browser. If you leave the field blank, it'll leave a hole in the image (the Web page's background will show through, unless you change the Background setting in Output Options, which we'll talk about in a moment). You can type any HTML you want here (up to 255 characters). But make sure whatever you put in the HTML field is no bigger than the slice itself. If it is, and you use the default Table method of writing HTML, then all hell will break loose and your image will fall apart.

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.

Saving slices

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.

• Formatting. There's a certain breed of person who deeply cares about exactly how the HTML is typedfor instance, whether certain words are in all capital letters, in lowercase, or in initial caps. You can specify this sort of thing in the Formatting section of Output Settings. We tend to be more mellow about these things, so we just ignore this section.

• Slice Output. Photoshop can piece together your slices in one of two ways: as an HTML table or using CSS. The default setting is Table, which is probably the way you should go in most instances. The only time we can think of when CSS would make more sense is if you were doing something like animating the pieces of the slice so that they fly around the screen. Otherwise, Table offers easier and smaller HTML. (And you can always position the table on your Web page with CSS later, using something like GoLive or Dreamweaver, if you really want to.) Whichever you choose, we recommend leaving the other settings in this section at their defaults, unless you have a very good reason to change them.

• View As. If your image is destined to be a background image (a picture that gets tiled so that it covers the whole Web browser window), you should choose View As from the Background tab of the Output Settings dialog box (press Command-2 to jump there quickly). However, you can't make a sliced image a background image, so this is grayed out if you have any slices. Of course, this is only relevant if you're asking Photoshop to write your HTML, which you often don't need if you're just making a background image.

• Background. The field labeled Background (inside the Background tab of the dialog box) lets you tell Photoshop what to use as a background image in the HTML it writes. For example, if you choose a color from the Color popup menu, Photoshop places your image (even if it's sliced) on top of that color. This isn't really relevant if you're planning on placing the sliced image onto some other Web page using GoLive or Dreamweaver.

• Saving Files. The Saving Files tab of the Output Settings dialog box (press Command-3 to get there quickly) gives you lots of control over exactly how Photoshop names each file, and where it puts these files. But the file names in this section relate more to dynamic images, such as rollovers created in ImageReady. If we change anything here, it's the name of the folder where the files are saved (the default "images" is fine, but we often use different names, depending on what we're doing; or, if you turn off the Save Images In checkbox, then Photoshop just saves the images and HTML in the same folder).

• Slices. The place to specify how Photoshop names slices when it saves them to disk is the Slices tab of the Output Settings dialog box (press Command-4 to jump to this tab). Again, we usually just leave this set to the defaults, but you can tweak it if you've got a favorite naming algorithm. Note that we were confused by this setting until we realized that the second line of popup menus is connected to the first line by the little plus symbol.

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.

Indexed Colors

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.

• Preview. The Preview checkbox lets you see exactly how you're messing up your image. There are few (if any) reasons to turn this off.

• Palettes. The Palette popup menu offers a number of different options, including Perceptual, Selective, and Adaptive color reduction methods in both "Local" and "Master" flavors. As far as we can tell, there's no reason to use the Master versions in Photoshop; they're errant holdovers from ImageReady. If you want to use master palettes (palettes that are consistent across multiple images), ImageReady is probably a better bet. Again, we generally use Perceptual for scanned photographic images, and Selective for synthetic images with sharp edges.

• Transparency. Any pixels that are transparent in your image can be transparent in the final indexed color image, too. However, if you don't have any transparent pixels, then turn off the Transparency checkbox in the Indexed Color dialog box; otherwise, Photoshop adds a color swatch to your color table and specifies that swatch as a transparent color (taking up a swatch that could better be used for a color).

  Of course, indexed color documents cannot contain partially transparent pixels, so the Matte feature lets you anti-alias these pixels into some other color (whatever color the image will later sit on). If you set the Matte popup menu to None, Photoshop gives you a hard-edged boundary. This sounds bad, and images that have no anti-aliasing around them often look really jaggy in Photoshop; but when they're placed over a colored or patterned background, you often don't notice the jaggies at all (or if you do, they're still better than a halo around the image; see Figure 14-16).

  Figure 14-16. Anti-aliasing images

• Forced. The Forced popup menu lets you force particular colors into the image's color palette. For instance, if you choose Black and White (which is on by default), Photoshop ensures that those two colors are in the palette. This is especially important when you're using very few colors or when you need to make sure that a specific color is locked in and won't change. Besides Black and White, the Forced popup menu offers you Primaries (which forces red, green, blue, cyan, magenta, yellow, black, and white into the palette), Web (which ensures that all 216 Web-safe colors are in your palette), and Custom (which lets you specify your own colors that should be in the final palette).

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).

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.

Web Colors

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).

(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.

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.

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.