Learn how to make Image Ready automatically create image maps using many drawing tools to select complex shapes.
1. Right-click on the image below and select Copy. Open Image Ready and create a new document. In the new document window, you will notice that the dimensions have already been set to acomadate the new image.
2. Since the image map tools are going to be used frequently throughout this tutorial, create a breakaway menu of all the image map tools. To do this, click and hold on the image map tool (It's below the lasso tool.) and select the small arrow. A new menu will be created. Drag the menu anywhere on your screen for easy access.
3. In the breakaway menu, click on the Circle Image Map tool. Create a selection slighly larger than the existing circle as shown in the image below.
Tip: Hold the Alt key to create a selection from the center out. To move a selection, hold the spacebar while moving the mouse.
4. Open the Image Map palette if it is not already open by going to Window > Image Map. In the palette, fill in the Name, Url, Target, and Alt fields for the portion of the image that is currently selected.
5. Next outline the next shape that resembles home plate with the Polygon Image Map tool. Then fill in the information for the current selection in the Image Map palette.
6. The final shape is much harder to outline than the previous two. With the Polygon Image Map tool still selected, outline the final shape as done with the past two shapes. To work around the curved points, zoom in to about 200%. Then fill in the information for the current selection in the Image Map palette.
7. To make the image load faster once it is exported, let's optimize the image. In the document window, click on the Optimized tab, which is next to the Original tab. Then go to Window > Optimize if the optimize palette isn't already visible. In this palette change the file format to GIF, since the image has very few colors. If the image was a photograph with lots of color, the original JPG file format setting would be left as is. Next change the maximum number of colors in the image to 64 or any of the possible selections in the dropdown menu that maintains image quality.
8. Finally, save and export the map by going to File > Save Optimized As. Create a name for the new file and change the Save as Type field to HTML and Images. Navigate to your desktop or the folder you would like to save to and create a new folder. Rename the folder image_map. Back in Image Ready, navigate to the new folder that was just created and click the Save button. Open the image_map folder that was just created. Then open up the HTML file in the folder in your browser. You should be able to click on each shape in the image.
