• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 15. Creating Links within an Image > Using layers to create image maps

Using layers to create image maps

You’ll define image-map areas based on some of the layers that make up the home page design. By using layers to define the hotspots, you easily gain control over the shapes of those areas. If the 15Start.psd file is not still open in ImageReady, open it now.

In the Layers palette, select the Asparagus layer.

Notice that a layer style, the Drop Shadow effect, has already been applied to this layer.

Choose Layer > New Layer Based Image Map Area.

A ghosted rectangular area surrounded by a red line appears, enclosing the asparagus area of the image. The red line and ghosting define the hotspot area included in the image map.

In the Slice palette group, click the Image Map tab to bring the Image Map palette forward.

Click the arrow to expand the Layer Based Settings options (if necessary), and choose Polygon from the Shape pop-up menu.

Now the red outline approximates the shape of the asparagus bunch, including the Drop Shadow on the lower right side.

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 asparagus area shape.

In the Image Map palette, type Asparagus in Name, type pages/veggies.html for URL, and select _blank from the Target pop-up menu.

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

Click a blank area of the Layers palette to deselect the Asparagus layer, and then choose File > Save.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint