Before you begin working on an image in ImageReady, you should complete most of your editing work in Photoshop. ImageReady has a limited range of editing tools compared to Photoshop, since it is designed primarily for creating dynamic web graphics. If your image is already open in Photoshop, simply click on the Jump to ImageReady button at the bottom of Photoshop?s toolbox; ImageReady will load and open your image in the application window.

You?ll notice several differences between ImageReady and Photoshop, reflecting the unique design of the programs and their respective functions. The basic differences:

You may have seen image maps as you?ve browsed the web: these graphics have two or more regions that take the user to various URLs upon clicking. An image map region is the graphic equivalent of a hypertext link. Image maps have two basic parts: an image file and the HTML code that defines the borders of each region and tells the browser to open the new URL. Using ImageReady, you can define image map regions by clicking and dragging or selecting menu commands, and the program will write the HTML code for you.

In ImageReady you can create either layer-based or tool-based image maps. Layer-based image maps, as their name implies, are created from existing layers in your image, while you can use the Rectangle, Circle, or Polygon Image Map Tool (P) to create tool-based image map areas. How do you know which method will work best for you? Here are a few guidelines:

Before we move into the details of each method, here?s one more important tip for creating image maps: Never mix image map areas and slices with URL links! The browser will interpret these two kinds of code as competing references, and your image may not work as you intended. (We?ll discuss slices below.)

To get started on a tool-based image map, you?ll first need to decide what shape (rectangle, circle, or polygon) each of your mapped regions will be. (ImageReady refers to these regions, once created, as image map areas.) To get started, select the appropriate tool from the Image Map Tools space in the toolbox (P).

If you?re using the Rectangle or Circle Image Map Tool, click and drag to select an image map area; to select an area of a predetermined size, check the option for Fixed Size and type the desired dimensions into the Options bar before making a selection. The Polygon Image Map Tool works like the Polygonal Lasso tool?click on each point of the irregularly shaped area and connect the end point with the beginning to close the area.

Next, pull forward the Image Map palette (at the bottom of the application window).

If you created an image map area with the Rectangle or Circle Image Map Tool, you?ll see Dimensions that you can adjust on the left side of the palette. Use the X and Y options to make small changes in the positioning of the image map area, and adjust W and H (for a rectangle) or R (for a circle) to alter the area?s size.

In the Name field, you can enter a name for the image map area (although this name is only used in the HTML and Javascript, it?s a good idea to create a name if you plan on creating rollovers later), the URL to which the user will be taken upon clicking on this area (use http:// at the beginning of the URL for an external link, or omit it if linking within your own site), and the Alt text label for the area (indicating where the user will be taken upon clicking).

If you like, you may also choose a Target attribute from the drop-down menu: _blank to open the URL in a new browser window, _self to open the URL in the same frame, _parent to display the linked file in its parent frame (use only if the current frame is a child), or _top to replace the entire browser window with the new content specified in the URL.

You may need to make adjustments to image map areas or to the options specified in the Image Map palette. To select an image map area to work with, you?ll need to choose the Image Map Select Tool from the toolbox (it shares a space with the other image map tools). Click on an image map area to select it; to resize an area, move your cursor over the handles that appear on the borders of the area until the arrow portion of your cursor turns white. You can then click and drag on the handles to resize the area.

ImageReady will automatically update the Dimensions of the area in the Image Map palette. To temporarily hide the borders of your image map areas, use the Toggle Image Maps Visibility (A) button in the toolbox. Conversely, if your borders are currently visible and you?re having difficulty seeing them, or if you want to adjust the overlay that ImageReady displays for image map areas, you can choose the Image Maps options from Preferences (located on the Edit menu) and adjust your settings.

To see your image map work in a browser, use the Preview in Browser (Ctrl-Alt-P) button or choose the Preview In command from the File menu.

(Tip: if your image map areas link to local files, try saving your optimized image with the accompanying HTML, then opening the saved HTML file in a browser.)

Layer-based image maps are very easy to make if your image already contains layers from which you want to create image map areas. Select a layer from the Layers palette, then choose the New Layer Based Image Map Area command from the Layer menu. (If this command is greyed out, turn on the command to Propagate Frame 1 Changes by selecting it from the Layer menu.) In the Image Map palette, select the shape of the area?circle, square, or polygon?then, if you?ve selected polygon, you can adjust the quality (the extent to which the image map border hugs the edges of the opaque pixels in the layer; a higher quality level will hug the pixels more closely). Enter the URL and Alt text just as you did above; you will see a finger icon appear in the Layers palette once you?re finished entering information, indicating that this layer is linked to a URL.

Should you need to make adjustments to an image map area after creating it, select it with the Image Map Select tool and make the appropriate changes in the Image Map palette. Just as with the tool-based map areas, any overlapping areas will be mapped to the ?top?; you can arrange the areas using the Image Map palette drop-down menu. Should you need to create layers in your image in order to use layer-based image map areas, first select the area you want to be mapped. (For help in making selections, review the [ http://help.unc.edu/?id=3718 ] Photoshop: Selection Techniques handout.) Then choose Layer via Cut from the New submenu of the Layer menu to separate the selected area from the rest of the image into its own layer.

The advantage of working with layer-based image map areas is that ImageReady will automatically update the borders of the map area when you edit the layer. To see this feature at work, select a mapped layer from the Layers palette and add an Outer Glow to the layer (from the Layer Style submenu of the Layer menu). In the Layer Options palette (which will pop forward upon selecting a new layer style), increase the Spread of the glow and watch the image map area border adjust to the new shape of the layer. If, however, you need to convert to tool-based image map areas (because, for example, you need to align, duplicate, or distribute image map areas), you can do so by selecting the map area with the Image Map Select tool and choosing the Promote Layer Based Image Map Area from the Image Map palette drop-down menu.

Before you go through the process of saving your image, you?ll want to look at ImageReady?s default settings for saving image maps by choosing the Output Settings submenu and the Image Maps option from the File menu. Here, you can choose to create a server-side map (one which requires that the server interprets all links, rather than allowing the user?s browser to do so) instead of the default client-side map, for example. When you?re finished, press OK to exit these settings.

To save your image map, use the Optimize palette to choose appropriate settings for your image, then choose Save Optimized As from the File menu. (Occasionally the Optimize palette will display only a message that no slices are selected. ImageReady automatically perceives your image as a slice, even if you haven?t used the Slice tool. To select the single slice that contains your image, choose the Slice Select tool (K) from the toolbox and click once on the image. The Optimize palette should now display options.)

In the Save as Type drop-down menu, HTML and Images is selected by default to save both the image file and the associated HTML. In the Settings drop-down menu, you can choose the way you want ImageReady to write your HTML code. To finish, press Save .

Should you need to update the HTML associated with your image map (for example, you typed a URL incorrectly), you can make any changes you need in the Image Map palette, then choose Update HTML from the File menu. ImageReady will decide whether it also needs to update the image file and will give you the option to replace the current file, if necessary. Once you?re finished working in ImageReady, you can either edit the HTML file in your favorite editor, or cut and paste the code into your current HTML file.

To create rollover states based on image map areas, pull forward the Rollover palette and select an image map area. Click the New icon or select New State from the palette drop-down menu to create an Over state. Now any changes that you make to your image will be recorded as part of the mouse-over state. Try adding an Outer Glow (available from the Layer Style submenu of the Layer menu) to the mapped layer so that it appears to ?light up? when the mouse hovers over it. When you?re ready to create the Down state, make another new state by clicking on the New icon again.

If your Over state was selected when you created the new state, your Down state will have the same attributes as the Over state. Now any changes that you make will appear when the user clicks on the mapped area; try adding a Color or Pattern Overlay. When you?re finished, choose the Rollover Preview (Y) button from the toolbox to preview your rollover using your cursor; alternatively, you can use the Preview in Browser button to see your work in action.Should you want to apply a change that you?ve made to one of your rollover states to all the states for that layer, you can use options available on the Layers palette.

The three buttons at the top of the palette unify the position, style(s), and visibility options that you set for one state of the layer and apply them to all the states. Of course, if you unify styles for a layer and have used the above specifications to create your rollover, your states will no longer look distinct.

Slices offer another option for dividing an image into parts that can then be associated with URLs or rollovers. Slices are also useful if some parts of an image need different optimization settings from others?for example, one portion is best saved as a JPEG but the rest of the image looks fine as a GIF. Obviously this feature can help minimize download time, since you only have to save a small area of the image in the relatively large JPEG format. In addition, saving a large image in slices also helps to keep download time to a minimum since loading several small slices is faster than loading one large file.

Each slice of an image is saved with its own color table and optimization, link, rollover, and animation settings. While slices are also available in Photoshop, ImageReady offers more options for working with slices. For more information on working with slices in Photoshop, consult the program?s Help feature (choose Contents from the Help menu).Unlike image map areas, though, slices always have to be rectangular?they can never be circular or polygonal?and all areas of a sliced image must be contained in rectangular slices.

In the image above, the user has created a rectangular slice in the center of the image (03). ImageReady then automatically slices the rest of the image into rectangular areas (01, 02, 04, and 05), numbering the slices starting from the upper left-hand corner. In this image, there are two types of slices: user-slices (03, created by the user with the Slice tool) and auto-slices (01, 02, 04 and 05). Only the user-slice can have its own individual optimization settings; the auto-slices are linked together and share optimization settings.

ImageReady supports three types of slices, each with its own set of characteristics: (1) user-slices, which are generally created with the Slice tool or via the Create Slices from Guides command on the Slices menu; (2) auto-slices, which are automatically regenerated each time a user-slice is created, edited, or deleted to make sure that all parts of the image are contained in slices; and (3) layer-based slices, which are created based on layers and tied to those layers (much like layer-based image map areas), a feature that facilitates rollover behaviors which might change the size of the slice. User-slices and layer-based slices have solid outlines and blue identifying numbers and symbols while auto-slices display dotted lines and have gray numbers and symbols.

The symbols indicate the type of slice:

layer-based slice,

linked slice,

image,

or no image

(covered below).

To change the way that slices display, you can set the Preferences in the Slices module (from the Edit menu). To hide slices temporarily or to make them visible again, use the Toggle Slices Visibility button (Q) in the toolbox.

Now that you?ve created slices in your image, you?ll want to use the Slice palette to make them functional. Select a user-slice from your image and pull forward the Slice palette (or press the Slice Palette button in the Slice Select tool?s Options bar). As with image map areas, you can name the slice (which will be useful if you add rollover effects to the slice), specify a URL association, and choose a target if you like. (Unlike image map areas, slices don?t require an associated URL. Remember, too, not to overlap slices with URL associations and image map areas!)

To the left of these options, you?ll see a thumbnail of the slice?s contents along with its slice number and the file format of the current optimization settings. You?ll also see some unfamiliar options in the Slice palette. You can set the slice Type as either Image (the default) or No Image . To save rollover data, for example, you?ll need to make sure that a slice is an Image slice. Saving a slice as No Image reduces the amount of pixel data that has to be saved with the slice and allows you to add HTML code to the slice, making it function like an alignment tool (a table or CSS). Choosing the No Image option will make a Text field available for you to enter HTML code, and you can choose alignment options from the bottom of the Slice palette.

Although ImageReady won?t display your text, previewing the image in a browser window will show the text and its relation to the image. Tip: Be sure to preview your image in both major browsers and in several operating systems to make sure that it displays as you intended. Both Image and No Image slices will offer BG and Dimension options. (If you can?t see the Dimension options, click on the double-arrow icon to the left of the word Slice on the Slice palette.) The BG drop-down menu adds a background color to transparent areas of Image slices and fills all areas of No Image slices. Again, ImageReady won?t display the updates, so you?ll need to preview the changes in a browser window.

The Dimension options facilitate resizing slices with numerical adjustment features, but you can also adjust the size of slices manually by clicking and dragging with the Slice Select tool on a slice?s borders. Press the <Shift> key as you drag to constrain movement vertically, horizontally, or at 45-degree angles. Note that you will not be able to resize layer-based slices in either of these ways, since the slice border is tied to the layer contents. Finally, for Image slices, you have the option to add a Message that will display in the browser?s status bar and/or an Alt tag that will display as a tool tip in most GUI browsers and as text in non-graphical browsers.

Using the options available in the Options bar for the Slice Select tool or commands from the Slice menu, you can align, distribute, and arrange user-slices. Either auto-slices or user-slices also may be duplicated (by choosing the Duplicate Slice command from the Slices menu or from the Slice palette drop-down menu); the resulting slice will be a user-slice. To combine two slices together into one larger user-slice, select the two slices (either user- or auto-slices but not layer-based) and choose Combine Slices from the Slices menu. The new slice will be the dimensions of the combined original slices; if the combined slices were not adjacent, then overlapping slices may be created.

Alternatively, you can divide a user-slice (but not an auto-slice or layer-based slice) into two or more slices by selecting the Divide Slice command. To delete a user-slice or layer-based slice, select it, then press the <Delete> or <Backspace> key, or choose the Delete Slice command from the Slices menu. You cannot delete auto-slices. (Note that deleting a layer-based slice will leave the layer intact, but if you delete a layer, you will also delete the associated layer-based slice.) To delete all layer-based and user-slices, choose the Delete All command from the Slices menu. You will be left with one auto-slice that includes the entire image.

You can choose optimization settings for individual layer-based and user-slices. Remember that auto-slices optimization settings from one slice to another, select the slice with the settings you want to copy, then click and drag on the Droplet icon from the Optimize palette onto the slice in the image that you want to adjust. You will then copy the optimization settings from the selected slice to the new slice.

If you want several slices to share the same optimization settings but don?t want to click and drag the Droplet onto each one, you can select all the slices you want to change and choose the Link Slices option from the Slices menu. Now adjusting the optimization settings for one linked slice will change them all. Conversely, if you need to unlink slices (including auto-slices), select the slice and choose the Unlink Slice command from either the Slices menu or the Slice palette drop-down menu.

When you select Save Optimized As from the File menu, you will have the option to save either All Slices or Selected Slices . You can also set the Output Settings for slices to include either table or CSS positioning for No Image slices.

Once you have tinkered with optimization settings to find the perfect balance of image quality and file size, you don?t want to repeat that process if you have several images that need to be optimized to the same settings. Although you can, just as in Photoshop?s Save for Web feature (covered in [ http://help.unc.edu/?id=3717 ] Photoshop: Web Graphics ), save a group of optimization settings (choose Save Settings from the Optimize palette drop-down menu), there?s an even faster way to optimize several files quickly. Click on the Droplet icon on the Optimize palette, and you?ll bring up a dialog box to Save optimized settings as a droplet . You can then save these settings as part of an executable file that you can save anywhere you like (the Desktop, for example).

By default, the droplet?s name will be a description of its optimization settings, but you can rename the file like you do any other. To use the droplet, simply drag an image file or a group of image files onto the droplet. The droplet will convert the optimization settings of all the images quickly and easily by batching the files (completing an automated action repeatedly, in the case of two or more images).

Droplets are actually based on actions; they are simply actions that can be saved as external, executable files that can live anywhere on your computer that you find it convenient to have them. Actions themselves are sets of commands that can be replayed in order to execute the commands repeatedly. If you?ve worked with macros in either Microsoft Word or Excel, you?ll find that actions work on a similar principle. While ImageReady contains a number of preloaded actions, you can download more at [ http://www.actionxchange.com ] www.actionxchange.com , which is a site run by Adobe. Once you register, your use of the site is free.

To access actions, pull forward the Actions palette. You?ll see a list of default actions that are loaded with ImageReady. Each action is listed with an arrow to its left; to see the individual steps that comprise the action, click on the arrow. The check marks in the far left column indicate whether each step is currently included in the action; unchecking a step will temporarily skip that step next time you perform the action. (Turning a step off will also change the action's check mark to red, indicating that the action has been modified from the original setting.) The column next to the check marks determines whether the step will display a dialog box to allow for more control over the step. For example, if a step labeled "Fill" does not have the dialog toggled on (the column is blank), you will have no control over the contents, opacity, or blending mode of the fill; turning on the dialog gives you full control.

The buttons at the bottom of the actions palette control stopping, recording, playing, creating a new set, creating a new action, and deleting an action, respectively. To record your own action, click on the New icon to create a new action or choose New Action from the palette drop-down menu. You can name the action (you'll want to make the name as descriptive as possible) and a keyboard shortcut to perform the action (if desired). Once you click OK , your action will be added to the palette and you can click on the Record button at the bottom of the palette to begin recording.

When you've finished recording the commands that should be included in your action, click on the Stop button. You may notice that not all of the commands you used were recorded as steps in the action you created. Changes you made with the painting tools, toning tools, tool options, view options, or preferences will not be reflected.

To add a "nonrecordable" command to your action after you've finished recording, first select the location for the step to be added. To make your insertion the last step in the action, select the action's name in the palette; to add a step between two steps, select the step after which you would like your command to appear. Then choose Insert Menu Item from the palette drop-down menu. You can either select a command from the menu bar or type in its name and click on the Find button to choose the command you want to add. When you're finished, click OK to apply the change. Alternatively, you can click and drag states from the History palette onto the Actions palette.

To play the action you've recorded, simply click on the Play button. Note that if you do not have a document window open, the action may not work. If there are other incompatibilities with the action as recorded and your current document (for example, the action was recorded in a different color mode than your current image), ImageReady will alert you as it progresses through the commands.