Photoshop 6 for Windows Bible- P31 pot

873 Chapter 19 ✦ Creating Graphics for the Web • Turn on the Copy Background Image When Saving option if you want to save a copy of the background image you select along with the other images. If you turn off the option, the HTML code for the background points to the original file location. To make copying all files associated with a page easier, I suggest that you leave this option turned on at all times. • For GIF and PNG images, turning on the Include Copyright option embeds whatever copyright information you enter into the File Info dialog box for the image (File ➪ File Info). The copyright information isn’t visible in a browser, but if others download the image, they can view the data by opening the File Info dialog box. ✦ Slices: If you haven’t assigned specific names to your slices in the Slice Options dialog box, Photoshop names each slice automatically for you. You can choose how you want the program to generate the names by using the pop-up menus on this panel, as in the Saving Files panel. If, by this time, you’re feeling overwhelmed by all the choices available to you when you use the Save For Web dialog box, you can just select one of the ImageReady Defaults options from the Settings pop-up menu. Or, if someone else saved some custom settings, you can load them by clicking the Load button. And if you’re the one who did all the work—and don’t want to ever do it again—click the Save button to save your choices as a custom setting that you can load the next time you need to save Web graphics. Saving PNG Images As I write this, the newest Web image format is the Portable Network Graphics format, or PNG (pronounced ping). Developed by a panel of independent graphics experts, PNG was designed specifically to outperform and ultimately replace GIF. It supports 24-bit and 48-bit images, it permits you to include mask channels for gradual transparency control, and — perhaps most importantly — PNG is not patented. Starting in 1995, Unisys, the developer of GIF, began to charge royalties to Web software developers. PNG, meanwhile, is free for all, which is why some folks claim PNG unofficially stands for “PNG, Not GIF.” PNG files are typically larger than comparable JPEG or GIF images because a PNG file does not include JPEG’s lossy compression, and it can contain more colors than a GIF image. (The exception is when you save a grayscale or indexed PNG file, which is frequently smaller than the same file saved in GIF.) So PNG is generally best suited to small images — buttons and thumbnails — with fine details that you don’t want mangled by JPEG compression. 874 Part V ✦ Color for Print and the Web Photoshop supports any RGB, grayscale, or indexed image in the PNG format. PNG doesn’t support layers (of course), but it does permit you to include a single mask channel. Assuming the browser supports extra PNG channels, the mask defines the opacity and transparency of the image on the page. PNG graphics can even be translucent (as defined by gray areas in the mask channel), a terrific advantage over GIF and JPEG. When you save a PNG image, Photoshop displays a small dialog box that gives you the option to apply interlacing or not. Before you rush out to save an image to the PNG format, however, bear in mind that browser support is thus far spotty. If you want to include a PNG image on your page, your guests may have to install a third-party plug-in, such as Siegel and Gale’s PNG Live. I live in hope that this will change. I imagine that PNG support might become more universal by, say, the year 2002. In the meantime, the format is more interesting than practical. Slicing Images If you’re like most Web designers I talk to, you rough out your pages in Photoshop. If you don’t, you should — it’s a great way to work. Photoshop lets you assemble all the elements the way that you want them to appear on the final Web page. Then you can slice and dice the elements and save them out to later assemble in HTML. Consider the rough layout I created for my own Web site, shown as in Figure 19-20. It features a variety of buttons and text labels that I separated into independent GIF files using the Photoshop slicing functions. You can see the slice boundaries in the figure. Yes, you read that last bit correctly — I said the Photoshop slicing functions. You no longer have to switch to ImageReady to create slices; Adobe added the slicing tools and related functions into Photoshop 6. You may still want to visit ImageReady to handle some Web chores, such as adding rollovers and animations, but for simple slicing, no need to stray from Photoshop. The following sections explain how to use the new slice tools. Creating slices To draw your slices, press K to select the slice tool. The tool shares a flyout with the slice select tool, as shown in Figure 19-20. You can tell the two apart because the slice select tool includes a little arrow cursor, the universal symbol for selection tool. 6 Photoshop 6 6 Photoshop 6 Caution 875 Chapter 19 ✦ Creating Graphics for the Web Figure 19-20: A page from my Web site, shown here with the slice previews turned on. Because images have to be rectangular in shape, it makes sense that all slices are rectangular. Draw a rectangle around the shape that you want to slice; Shift-drag to constrain the slice to a square. For each slice that you create, a slice number appears in the upper-left corner of the slice, as shown in the figure. If the numbers start to annoy you, you can turn them off by deselecting the Show Slice Numbers check box on the Options bar. Here are a few other points of note relating to slice drawing: ✦ Just as you can constrain the rectangular marquee tool to a fixed size or specific aspect ratio, you can set the slice tool to create a fixed size slice by choosing Fixed Size from the Style pop-up menu on the Options bar and entering values into the Width and Height option boxes. Alternatively, choose Constrained Aspect Ratio to draw a slice using a specific width to height ratio. Again, enter values into the Width and Height options boxes to set the slice ratio. Slice tools Slice number Auto slice Selected user slice 876 Part V ✦ Color for Print and the Web ✦ If you want to base a slice on a selection, draw the selection outline as usual (it must be rectangular, of course). Then select the slice tool and use the selection outline as a guide as you drag to create the slice. Photoshop doesn’t clear the selection outline when you activate the slice tool, as it does when you choose other tools. Another convenient option is to drag guidelines into the image to set up your slices and then just follow the guidelines as you drag with the slice tool. ✦ To create a slice that surrounds everything on a particular layer, select the layer in the layers palette and then choose Layer ➪ New Layer Based Slice. If you later change the layer’s contents, Photoshop redraws the slice boundary if necessary to include new pixels. Use this technique when saving slices that contain layer effects, such as drop shadows. This way, you can edit the effect without having to worry about redrawing the slice manually if the new effect takes up more space. ✦ As you draw borders around buttons, graphics, and other page elements, Photoshop automatically fills in the gaps with spacer slices. To differentiate these automatic slices from the so-called “user slices,” Photoshop uses dotted lines for borders of the auto slices and a solid line for the user slices. You can set the color for user slices via the Line Color pop-up menu on the Options bar. Photoshop uses this same color scheme on the slice numbers. ✦ To hide and show the slice boundaries, press Ctrl+H, which hides all on-screen aids, including guides and selection outlines, unless you’ve set up permanent display via the Show Options dialog box. To toggle the slice boundaries on and off independently, choose View ➪ Show ➪ Slices. You also can choose View➪ Show➪ Show Options to specify which on-screen aids you want Photoshop to display at all times. ✦ If you draw slice boundaries that overlap, the slices are stacked according to the order in which you drew them, with the most recent slice at the top of the pile. You can edit only the top slice, but you can rearrange the stacking order to get to a lower slice, as explained in the next section. After you get your slices just so, choose View➪Lock Slices to make them uneditable. That way, you won’t accidentally alter a slice boundary. View ➪ Unlock unshackles the locked slices. Editing slices Need to change to a slice boundary? Grab the slice select tool and click the slice to select it — Shift-click to select additional slices. Then use the editing techniques in the following list to adjust the slices. You can temporarily access the slice tool while the slice select tool is active by pressing and holding Ctrl. Conversely, if the slice tool is active, holding Ctrl gets you the slice select tool. Tip 6 Photoshop 6 6 Photoshop 6 Tip Tip 877 Chapter 19 ✦ Creating Graphics for the Web ✦ To modify the size or shape of a slice boundary, click it to display handles around the slice. Drag a handle to change the shape of the slice. You can also drag inside a selected slice boundary to change its location or press the Backspace to delete it. You can drag boundaries in the Save For Web dialog box, as well as in the image window. Click the slice select tool button in the dialog box and drag away. ✦ To duplicate a slice, put the tool cursor on the slice boundary. Then Alt-drag the slice. ✦ To promote an auto slice to a user slice, click the Promote to User Slice button on the Options bar. You can then adjust the boundaries of the slice. ✦ Click the Slice Options button, also on the Options bar, to name the slice, add a link, and set other slice attributes, as covered in the next section. You can also access this dialog box from inside the Save For Web dialog box; select the slice and then double-click the slice select tool icon. ✦ If you created overlapping slices, you can access the topmost one with the slice select tool. Use the four stacking order buttons near the left end of the Options bar, shown in Figure 19-21, to change the stacking order. You can send the selected slice to the bottom of the stack, the top of the stack, or up or down one level. Figure 19-21: Click a stacking order button to send the selected slice up or down in the stacking order. Send to back Up one Down one Send to front Tip 878 Part V ✦ Color for Print and the Web Setting slice options After you create a slice, you can give the slice a specific name, create a link to a Web page, and more. Formerly, you had to do this work in ImageReady; now you can enter the data in Photoshop. First, select the slice you want to format and then click the Slice Options button on the Options bar. Or double-click the slice with the slice select tool. Either way, you get the dialog box shown in Figure 19-22. Figure 19-22: You can assign links, create alternate message text, and name individual slices in Photoshop 6. The dialog box options work like so: ✦ Slice Type: You can either fill a slice with an image or with HTML text. Select the No Image option for the latter. The dialog box options change, giving you only a text-entry box into which you can type HTML text. You can format the text using standard HTML tags. But you won’t be able to preview the text in Photoshop — you have to use a browser to see it. The Image option saves the image data for the slice plus any linking data or alternative text that you assign to the graphic. ✦ Name: Photoshop automatically names the slices in the order they appear. If you want to override the automatic naming system, enter your slice names here. This option and the four that follow apply only when you select Image as the slice type. 6 Photoshop 6 879 Chapter 19 ✦ Creating Graphics for the Web ✦ URL: To turn the slice into a button, enter the URL for the page you want the button to link to. If you want to link to a page stored in the same folder as the slice, a simple file name will suffice. For files inside other folders, enter the path name. To link to an outside Web page, enter the full URL, such as http://www.dekemc.com. ✦ Target: If your page includes frames, enter the appropriate frame tag into this option box. ✦ Message: Enter a message to appear at the bottom of the browser window when a visitor hovers the cursor over the button. For those familiar with JavaScript, Photoshop handles this using an onMouseOver=”window.status” tag. ✦ Alt: To provide a text alternate for the button, enter the text into this option box. ✦ Dimensions: To specify the exact placement and size of a slice boundary, enter the pixel coordinates into the X and Y options and the dimensions into the W and H options. You have access to these options even when you select No Image as the slice type. When you use the Save For Web dialog box to save your image, you get access to two additional options. Inside the dialog box, double-click the slice with the slice select tool. You get the same options as just described plus these two: ✦ Background: If your image contains transparent areas, you can choose to fill them with a color selected from this pop-up menu. Choose Custom to select a color from the Color Picker; choose None to leave transparent areas alone. Again, you can’t see the background color in Photoshop; you must use a browser. ✦ Linked: That little link icon means that the optimization settings for the slice are linked to another slice. By default, all spacer (automatic) slices are linked together. You can’t link slices in Photoshop; you must open the image in ImageReady and choose Slices ➪ Link Slices. You can then apply the same optimization settings to all the linked slices at once, either in ImageReady or in the Save For Web dialog box in Photoshop. Saving slices I imagine that by now, your eyes are glazed over and you’d just as soon watch another rerun of Big Brother—even though you already know who gets banished from the compound and who gets to stay—so I’ll keep this final bit of slice-related data simple. After you create image slices, you’ll want to take one or both of the following saving steps: ✦ To save your original image with all slice information intact, choose File➪ Save As and select either the Photoshop or TIFF format. Be sure to select the Layers check box, or the slice data gets dumped. When you reopen the image, choose the slice select or slice tool to redisplay the slice boundaries and make any further changes. Tip 880 Part V ✦ Color for Print and the Web ✦ To output the image in Web-ready form, choose File ➪ Save for Web. This command enables you to save all the slices as individual image files and to create the HTML page that will reassemble the image in the Web browser. You also can save individual slices, if you like. The preceding thousands of pages in this chapter — okay, so maybe I exaggerate, but just a little— explain this feature. Doing More in ImageReady If you like things plain and simple, you can stop reading this chapter right now. You already know everything you need to know to create your basic Web images and sliced graphics. But if you want to add some spice to your Web pages— and really, what’s a Web page without a little seasoning?— crack open ImageReady and try your hand at creating the three types of graphics described in this section: image maps, rollovers, and animations. Creating an image map Slicing divides a document into several independent graphics. You can turn any of those slices into a button that a viewer clicks to jump to a linked page or frame. By default, each graphic accommodates one and only one button. The upside is simplicity — each slice gets one URL. The downside is that the buttons are rectan- gular in shape. Even if your button graphic appears circular or some other shape, the browser cursor reacts the second it enters the rectangular boundaries of the sliced graphic. For complex Web designs— imagine a map of the world in which each country is a separate button — slicing becomes less practical. Each country would have to comprise several graphics, pieced together like colored bricks. The better solution would be one big graphic with irregularly shaped buttons drawn over it. In other words, an image map: 1. First establish a slice around the entire image. In the case of my example, the entire map of the world. 2. Set each area that you want to set as a button on a separate layer. France would be on one layer, Germany on another, Austria on a third, and so on. 3. Select the first button’s layer in the Layers palette. If it isn’t visible on screen, choose Window ➪ Show Layers. If the layer includes an effect (drop shadow, glow, what have you), make sure that the layer — not the effect — is selected in the Layers palette. 4. Choose Layer ➪ New Layer Based Image Map Area. Now display the Image Map palette (Window➪ Show Image Map), shown in Figure 19-23, and select the shape that you want ImageReady to use to trace the layer outline. In the case of the map, Polygon is the only setting that makes sense, as shown in Figure 19-23. 6 Photoshop 6 881 Chapter 19 ✦ Creating Graphics for the Web Figure 19-23: Use the Image Map palette to specify the URL that you want to associate with an image map button. 5. Enter the desired file name or address into the URL option box. To link to an outside Web page, remember to enter the full URL, complete with the http:// prefix. 6. Select the next layer that you want to assign as a button and repeat steps 4 and 5. Keep going until you assign all the button links. By using the image map preview button in the toolbox, labeled in Figure 19-23, you can see whether the image map is functioning the way you want. To pre- view the image map in a browser, click the browser preview button to the right. You can select the browser you want to use from the button’s flyout menu. 7. Choose your optimization settings and then choose File ➪ Save Optimized. You tell ImageReady how to optimize the image map via the Optimize palette (Window➪ Show Optimize). The settings here duplicate those in the Photoshop Save For Web dialog box, explored earlier in this chapter. After you choose File ➪ Save Optimized, the Save Optimized dialog box appears. Select HTML and Images from the Format Files of Type pop-up menu. You can control other aspects of the save by clicking the Output Settings button and following the guidelines discussed earlier in this chapter to make your choices. 6 Photoshop 6 6 Photoshop 6 Image map preview Rollover preview Browser preview Drag to tear off palette 882 Part V ✦ Color for Print and the Web When you click Save, ImageReady saves both the image and the HMTL code, complete with client-side image map coordinates. If you prefer to create a server-side map, click the Output Settings button in the Save Optimized dialog box and then travel to the HTML panel of the dialog box. Then select the desired setting from the Types pop-up menu. (If in doubt, Client-Side is the way to go.) As an alternative to creating layer-based image maps, you can draw the boundaries of each button using the new image map tools, shown in Figure 19-23. Drag with the rectangular, circular, or polygonal tools to draw the boundaries of the button. The button automatically appears in the Image Map palette. Add the link information, as usual. Drag again to create the next button. You can tear the image map tools off the toolbox to create a tiny floating palette containing just the tools. To do so, drag the down-pointing triangle at the bottom of the flyout menu (see Figure 19-23). If you ever want to change the button information, click it with the image map selection tool. You see the current data in the Image Map palette. Enter the new data and resave the graphic to finalize the update. JavaScript rollovers ImageReady’s slicing functions make quick work of creating and assembling HTML buttons. But the program’s rollover capabilities are even easier — absolute child’s play, in fact. I’m confident you could figure them out without me. But I’ve already slapped together an introduction, so I might as well keep writing. For those who aren’t familiar with them, a rollover is a collection of JavaScript functions that make a button change according to the actions of the mouse cursor. The most common example is a button that highlights when you roll the cursor over it — hence the term “rollover.” The following steps explain how to make a rollover: 1. Create the different button states, each on its own layer. For example, Figure 19-24 shows a button created using a series of layers. The first three layers make up the base button, as shown in the top image. A fourth layer, Pink Dent, adds a depression to the button’s center, as shown in the bottom image. This dent will be my rollover. 2. Display those layers that make up the base button state. In my case, I turn off the Pink Dent layer by clicking on its eyeball icon in the Layers palette. 3. Display the Rollover palette. Just click the Rollover tab, or choose Window➪ Show Rollover. 4. Select the desired slice that surrounds the button. Show the slice bound- aries if necessary and click the button with the slice select tool. (If you haven’t gotten around to drawing a slice yet, by all means, get with it.) The button appears in the Rollover palette, as shown in Figure 19-25. 6 Photoshop 6 Tip 6 Photoshop 6 [...]... number For example, in Figure A-5, I lowered the values to the left of the CMV and then above the CMV by 1 apiece to increase the sharpening effect To ensure that the image did not darken, I also raised the CMV to compensate When I did not raise the CMV, the image turned black, as shown in Figure A -6 5 6 Extra Reading ✦ Photoshop 6 for Windows Bible Figure A-5: Raising the CMV to compensate for the... all) The result is that Photoshop maintains the original color balance of the image while at the same time filtering it slightly differently When I did not raise the Scale value, the image became progressively lighter, as illustrated in Figure A-4 3 4 Extra Reading ✦ Photoshop 6 for Windows Bible MV1 MV2 MV6 MV3 MV7 MV11 MV8 MV12 MV15 NP2 NP11 11 NP12 NP NP15 NP20 MV22 NP8 NP 16 MV24 NP5 NP10 NP13 NP... unlike anything provided by Photoshop s standard collection of filters Figure A-7: Symmetrical values can result in sharpening (left), blurring (middle), and edge-detection (right) effects 7 8 Extra Reading ✦ Photoshop 6 for Windows Bible Sharpening The Custom command provides as many variations on the sharpening theme as the Unsharp Mask filter In a sense, it provides even more, for whereas the Unsharp... (presets) for your rollovers That way, you can easily churn out multiple buttons that all use the same rollover effects Creating Web animations I don’t know if you’ve ever tried to open an animated GIF file in Photoshop, but it’s not a pretty sight Photoshop opens the first frame only and throws the rest away God forbid you make changes and save the file — if you do, you’ll throw away all the frames that Photoshop. .. process Tip To give yourself the freedom to modify your animation file at some later point in time, be sure to also save it in Photoshop s native PSD format This will likewise permit you to open the file inside Photoshop ImageReady saves all layers in the RGB color space; the Photoshop format doesn’t accommodate layers inside an indexed file Animations and rollovers You’d never know it by looking at them,... effects An in-depth analysis of the Displace filter A look at Photoshop s predefined displacement maps How to apply custom gradations and textures as displacement maps A tour of the immensely powerful but complicated Filter Factory Create your own fully functioning filter that rotates channels independently ✦ ✦ ✦ ✦ 2 Extra Reading ✦ Photoshop 6 for Windows Bible The Custom filter The Custom command enables... take you backward or forward one frame Other buttons appear exclusively in the Animation palette: The double-arrow button takes you to the first frame, the single right-pointing arrow button plays, and the square button stops Note that ImageReady plays the animation at a slower speed than it will play in a Web browser 885 8 86 Part V ✦ Color for Print and the Web Back one frame Forward one frame Figure... Figure 19-25: Select the base button with the slice select tool to add it to the Rollover palette New rollover state Figure 19- 26: Click the page icon and display the alternative button layer to add a new state to the palette Chapter 19 ✦ Creating Graphics for the Web Photoshop 6 To make sure the rollover looks the way you want, select the rollover preview button in the toolbox (labeled in the preceding... state appears in the Over slot, as in Figure 19- 26 Note For you JavaScripters, there’s no need to create another button state for the onMouseOut event ImageReady adds one automatically that restores the normal appearance of the button (You can, if you wish, override this by creating an Out state, as explained in the next step.) 883 884 Part V ✦ Color for Print and the Web Figure 19-25: Select the base... enter negative values around the perimeter of the matrix Figure A-10: To sharpen more subtly, increase the central matrix value and then enter the sum into the Scale value 9 10 Extra Reading ✦ Photoshop 6 for Windows Bible Figure A-11: When you soften the effect of radical sharpening, you create a thicker, higher-contrast effect, much as when raising the Radius value in the Unsharp Mask dialog box Blurring . includes a little arrow cursor, the universal symbol for selection tool. 6 Photoshop 6 6 Photoshop 6 Caution 875 Chapter 19 ✦ Creating Graphics for the Web Figure 19-20: A page from my Web site,. the animation at a slower speed than it will play in a Web browser. Tip 6 Photoshop 6 6 Photoshop 6 8 86 Part V ✦ Color for Print and the Web Figure 19-27: The Layers and Animation palettes permit. this chapter to make your choices. 6 Photoshop 6 6 Photoshop 6 Image map preview Rollover preview Browser preview Drag to tear off palette 882 Part V ✦ Color for Print and the Web When you click