Creating image maps in ImageReady
Creating image maps is one of the few functions that you must do in Adobe ImageReady. You can use Photoshop to create slices, which share certain functionality with image maps, but you cannot create image maps with Photoshop.In this section, you'll create an image map within the same image that you've been working on in this lesson, the Organic Food home page. Your task is to create links to different Web pages that match the shapes of the pictured produce itemssomething that would be difficult to do with slices, because slices are always rectangular.Using layers to create image maps
You'll define image-map areas based on some of the layers in the home page design. Using layers is an efficient way to define the hotspots, letting you easily gain control over the shapes of those areas.
| 1. | In the Layers palette, select the Asparagus layer.Notice that a layer style, the Drop Shadow effect, has already been applied to this layer. | | 2. | Choose Layer > New Layer Based Image Map Area.A ghosted rectangular area surrounded by a red line appears in the image window, enclosing the asparagus. The line and ghosting define the hotspot in the image map. In the Layers palette, a pointing-finger icon indicates that the layer now has a layer-based image map.  | | 3. | In the Image Map palette, click the arrow to view the Layer Based Settings option (if necessary), and choose Polygon from the Shape pop-up menu.Now the red outline in the image window approximates the shape of the asparagus bunch, including the drop shadow layer style.  | | 4. | Set the Quality option to 90 to make the red line more closely conform to the asparagus shape. | | 5. | Still in the Image Map palette, type Asparagus in Name, type pages/asparagu220 for URL, and choose _blank from the Target pop-up menu. | | 6. | Click a blank area of the Layers palette to deselect the Asparagus layer, and then choose File > Save. |
Using the image-map tools
When the elements you want to use for image maps are conveniently located on separate layers, it's simple to define those image-map areas, as you saw in the previous procedure. This procedure and the next show you a couple of techniques for defining image maps within a single layer.The first method is similar to using the Pen tool in Photoshop. Before you begin working, you'll turn off the Snap To options, which will make it easier to position anchor points exactly where you want them.
| 1. | Choose View > Snap to deselect (uncheck) that command. | | 2. | In the toolbox, select the Polygon Image Map tool ( ), which is hidden behind the Rectangle Image Map tool ( ). | | 3. | Zoom in to the papaya in the image window if necessary (but keep it all in view onscreen), and then reselect the Polygon Image Map tool and click the edge of the papaya to set an anchor point. | | 4. | Move along the outside edge of the papaya and the Papaya label, clicking frequently to set more anchor points.  | Press Shift as you drag around the Papaya label to constrain your dragging motion to a straight horizontal or vertical line. |
| | 5. | When the anchor points are almost completely around the papaya, click the original anchor point to close the image-map shape. (The pointer icon changes when you're at the right spot, showing a little circle that indicates a click will close the shape.) The red image-map boundary appears around the papaya, with anchor points where you set them. | | 6. | Specify the following in the Image Map palette: type Papaya for Name, type pages/papay202 for URL, and choose _blank for Target. | | 7. | Choose Select > Deselect Image Maps, and then double-click the Zoom tool ( ) to change the view to 100%. | | 8. | Choose File > Save. |
Using selections to create image maps
You can also convert selections to image maps. You'll try that now with the fennel herb, selecting it with the Magic Wand tool.
| 1. | Zoom in on the fennel herb until you have a good close-up view (about 300%), making sure you can see it all onscreen. | | 2. | In the Layers palette, select the Background layer. | | 3. | Select the Magic Wand tool ( ), which is hidden behind the Marquee tool ( ). Then, on the tool options bar, type 42 in the Tolerance option and make sure that the Contiguous check box is selected, or select it now.  | | 4. | Click the fennel branch where the Herbs label crosses it. | | 5. | Hold down Shift so that the Magic Wand tool pointer has a plus sign, and carefully click an unselected area of the fennel branch. Repeat a few more times until most of the fennel is selectedthe selection doesn't need to be perfect. NoteIf the selection marquee seems to disappear after a click, you may have accidentally clicked the wood grain, so the marquee includes a very large area. In that case, choose Edit > Undo and try again. | | 6. | Choose Select > Create Image Map from Selection. The Create Image Map dialog box opens. Select the Polygon with Quality 80 option, and click OK. In the image window, the fennel image appears ghosted. A red line indicating the shape of the image map surrounds the fennel. | | 7. | Choose Select > Deselect to remove the selection marquee. | | 8. | In the Image Map palette, type Herbs for Name, type pages/herb220 for URL, and choose _blank for Target. | | 9. | Choose File > Save. |
NoteIf you want to see your image without the light blue image-map lines and ghosting, click the Toggle Image Maps Visibility button ( ) in the toolbox, or press A. Click the button or press A again to see the image-map indicators.So far in this lesson you have created five slice links and three image-map links on your Web page image. You can go ahead and create additional image maps for the avocado and grapes if you want to practice on your own, or you can proceed to the next topic. (We have included thes206 pages on the CD for you if you decide to practice.)NoteThe previous procedures did not attempt to create image-map shapes that were perfect matches for the items pictured. You can improve the shapes by using the Image Map Select tool and dragging the anchor points to better positions until you're satisfied with the shape of the image map. To add anchor points, press Shift-click; to delete anchor points, Alt-click (Windows) or Option-click (Mac OS). |
لطفا منتظر باشید ...
