More Web ToolsAdobe 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. SlicesNot 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 MapsIf 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) slicesChapter 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. Figure 14-11. Slicing an imageFigure 14-12. Reducing the number of slices[View full size image] Slice OptionsWhile 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 boxhttp://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 you211, 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 custo206 in its place (whatever you type in th198 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 th198 field is no bigger than the slice itself. If it is, and you use the default Table method of writin200, 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 wit201 in order for the values to actually be functional. Saving slicesIn 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-code197. And we liked it! (Well, not really, but what choice did we have?) Fortunately, Photoshop can write ou211 for us now, making the whole process pain-free and very quick. The trick is to save the sliced image Figure 14-14. Output Settings[View full size image] Figure 14-14. More Output SettingsSlice Output. Photoshop can piece together your slices in one of two ways: as a207 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 smalle211. (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 you211, 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 th198 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 an197 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 SettingsIf 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 ColorsAs 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 boxYou 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 GIF," earlier in this chapter). However, there are a few special things to think about. Figure 14-15. Indexed Color dialog boxFigure 14-16. Anti-aliasing images[View full size image] Tip: Prioritizing ColorsOccasionally 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 PalettesAfter 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 tableIn 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 ColorsLet'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[View full size image] 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 ColorsWhat'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 colorsIf you want the hexadecimal equivalent without th198 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 ApplicationIf 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 GalleryThe 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[View full size image]
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 th198 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 GalleriesYou don't like the galleries that Photoshop creates? Not jazzy enough for you? No problem, you can always edit th198 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 o199, but it's surprisingly easy once you get the hang of it. The Animation PaletteAs 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 GIFsOddly, 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[View full size image] 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. |