Using layers to create image maps

In this procedure, you'll create an image map in an existing image. You define hotspots using layers or one of the image-map tools. Then you'll assign each hotspot to an URL, linking it to a site on either a local computer or the World Wide Web.

You'll use a version of the zoo-map image that places each colored region on its own layer. You'll convert each layer to an image-map hotspot. By using layers to define the hotspots, you easily gain control over the shapes of those areas.

1 In ImageReady, choose File > Open, and open the file 14Start4.psd from the Lessons/Lesson14 folder.

2 In the Settings menu on the Optimize palette, choose GIF 64 Dithered.

3 In the Layers palette, select the African Savannah layer.

4 Choose Layer > New Layer Based Image Map Area.

Lock: Q J 3 Unify: \ % %

9 ~

Himalayan Highlands —

9

\J

r

African Sa___ ^

9

r

j ffik j Tropical Rainforest

9

r

Exotic Asia

□ I -i H a

A ghosted rectangular area surrounded by a red line appears, enclosing the entire African Savannah portion of the image. This red line and ghosting define the hotspot area included in the image map.

5 In the Animation palette group, click the Image Map tab, and choose Polygon from the Shape pop-up menu. (You can also open the Image Map palette by choosing Window > Show Image Map.)

Now the red outline approximates the shape of the savannah area.

6 In the Quality option on the Image Map palette, drag the slider or type 90 to make the red line more closely conform to the savannah area shape.

Now that you've defined the hotspot area, you can link it to another file in your Web site or to a different location on the Web. For the purposes of this lesson, you'll link your hotspots to fictitious URLs for the zoo.

7 In the URL option in the Image Map palette, type the fictitious address of a Web site, http://www.adobe.com/african_savannah.htmI, in the URL text box.

In the Layers palette, a pointing-finger icon now appears on the African Savannah layer, indicating that the layer has a layer-based image map.

Note: If you prefer, you can use other URLs for this exercise, linking the hotspots to your own local intranet pages or to some of your favorite sites on the World Wide Web.

8 (Optional) For more practice with image maps, select the other four areas of the zoo map (Exotic Asia, Tropical Rainforest, Himalayan Highlands, and Northern Wilderness) and, one layer at a time, repeat steps 3 through 7 to create more layer-based image maps. Use the same settings, but change the "african_savannah" part of the URLs, replacing it with the name of the layer used to create the image map.

Don't worry now about any mistakes you might make when you type in your URLs. You'll learn how to edit image-map information later, in "Creating the HTML file and editing image-map information" on page 447.

9 Choose File > Save.

Learn Photoshop Now

Learn Photoshop Now

This first volume will guide you through the basics of Photoshop. Well start at the beginning and slowly be working our way through to the more advanced stuff but dont worry its all aimed at the total newbie.

Get My Free Ebook


Responses

Post a comment