Real World Adobe® Photoshop® CS2 [Electronic resources] : Industrial-Strength Production Techniques نسخه متنی

This is a Digital Library

With over 100,000 free electronic resource in Persian, Arabic and English

Real World Adobe® Photoshop® CS2 [Electronic resources] : Industrial-Strength Production Techniques - نسخه متنی

Bruce Fraser, David Blatner

| نمايش فراداده ، افزودن یک نقد و بررسی
افزودن به کتابخانه شخصی
ارسال به دوستان
جستجو در متن کتاب
بیشتر
تنظیمات قلم

فونت

اندازه قلم

+ - پیش فرض

حالت نمایش

روز نیمروز شب
جستجو در لغت نامه
بیشتر
توضیحات
افزودن یادداشت جدید












More Web Tools


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


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.


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

[View full size image]

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.


Figure 14-13. Slice Options dialog box

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 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 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-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 Settings

Slice 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 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 GIF," earlier in this chapter). However, there are a few special things to think about.


Figure 14-15. Indexed Color dialog box

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

[View full size image]

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


Figure 14-17. Swapping indexed colors

[View full size image]


1.

Open the GIF image and select Color Table from the Mode submenu (under the Image menu).

2.

Click on the color you want to change, and when Photoshop asks you to, select a new color from the Color Picker (or type in RGB values). You probably want to make sure that the color you select is Web-safe.

If the image is anti-aliased and all the intermediary colors are clumped together in the palette (as they often are), you can change them all at once. For example, if you have five different red swatchesfrom light pink to bright redyou can drag the mouse from the first swatch to the last. When you let go of the mouse button, Photoshop asks you for the new first color (to replace the light pink), and then for the new last color (to replace the bright red). It will then build all the intermediary colors for you, based on the two you choose.

3.

Click OK and save the image.

Of course, this tip works best when the image has only a few 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.


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


Figure 14-18. Hexadecimal equivalents of colors

If 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 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

[View full size image]

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.


1.

After choosing Web Photo Gallery from the Automate submenu, choose a gallery style from the Styles menu, such as Horizontal Blue & Gray, Horizontal Gray, Centered Frame, or Dotted Border. Some of these are built (behind the scenes) usin200 tables; others are based on frames or Flash.

2.

Look at the settings in each tab of the Options popup menu (Banner, Gallery Images, Gallery Thumbnails, Custom Colors, and Security). These choices determine what your final Web gallery will look like (see Figure 14-20). For example, in the Banner tab, you should type the name of the photographer and the date the pictures were taken (or today's date). The Site Name field determines the title of the gallery (it's the Web site name, not usually the site where the photos were taken). Similarly, the two Images tabs let you choose how large and how compressed the final images should be.


Figure 14-20. The five tabs of the Web Photo Gallery dialog box

[View full size image]

When it comes to image and thumbnail size, the pixel dimension you specify (for instance "Small" means 250 pixels) determines the width or height of the image, whichever side is larger. The only way to find out the actual file size (on disk) is by trial and error, though Large images tend to be around 4060 K each, while Medium thumbnails tend to be around 25 K each.

You can assign captions for the thumbnails and/or for the larger images. The captions can just be the file name. Or, if you have filled out the fields in the File Info dialog box (under the File menu), Photoshop can use this datajust turn on the Title, Copyright, Caption, and Credits checkboxes.

The Security features let you tell Photoshop to add text to each image. For example, if you want your company name to be added in the lower-left corner of each image, you can select Custom Text from the Content popup menu. (You can also specify where you want Photoshop to place the text and in what font, size, and so on.) Of course, Adobe is using the word "Security" pretty looselythere's no reason someone can't copy the image and just crop out your name. But something is certainly better than nothing in this game.

3.

Click the Source and Destination buttons to specify a folder that contains all the pictures as well as a folder in which to put all the final files. If you want Photoshop to look inside subfolders, turn on the Include All Subdirectories checkbox. (Note that if you include an alias or a shortcut to another folder, Photoshop is smart enough to look inside those folders, too.)


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 Galleries

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


1.

Find the folder that contains the gallery templates (it's called Web Photo Gallery, and it's inside the Presets folder, in the main Photoshop folder).

2.

Make a copy of one of the template folders here, and name the duplicate folder as whatever you want your template to be called in Photoshop's Web Photo Gallery dialog box.

3.

Edit the files inside this folder using a text editor. You can edit them to some degree with Adobe GoLive or Macromedia Dreamweaver, but because these files are templates (rather than real Web pages), it's safer to make your changes in the actua205 code.

Note that the template works by replacing certain codes with the settings you make in Photoshop. For instance, the %%BGCOLOR%% code in the template automatically gets stripped out and replaced with the background color you chose in the Web Photo Gallery dialog box. If you always want the same background color, though, you can remove this code from the template and type in your own color.


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

[View full size image]

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:


1.

Place some black text where to want it to start.

2.

Give the text layer a Color Overlay layer style using the start color.

3.

Create a second animation frame in the Animation palette.

4.

Use the Move tool to move the text to where you want it to end up.

5.

Double click the layer style icon in the Layers palette to change the Color Overlay style to the end color.

6.

Choose Tween from the Animation palette flyout menu (it's hiding far off in the upper-right corner) and enter the number of in-between steps you want to create (use at least 5 or 10 to see the effect clearly). When you click OK, Photoshop adds the frames between the beginning and ending frames you had created.


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.


/ 219