PhotoShop Image Maps

Midwestern States Info Pages

The Original .gif File

A crude outline of the Midwestern States

The Colorized GIF File

Open Photoshop with the image.

Use the Magic wand to select a state.

Select a color. Use the Paint Bucket to

place color in state.

PhotoShop Layers

Create a new file the same size as the GIF file.

Use Magic Wand to select a state.

Copy the State. Past the state into the new

file. A new layer appears.

Name it after the state.

Creating the Layers, II

Create a layer for each state.

Save the image: LayeredMid.psd

Switch to ImageReady to create the ImageMap.

Creating the Image Areas

Selected the desired layer from the layer menu.

Use the magic wand to select the area.

Select Layer> New Layer Based Image Map.

Default shape is a rectangle (Upper Peninsula)

Creating the Layer Image

Select Shape: Polygon.

Name: Name of image map (MidStates).

URL: Name of page to load when this area is clicked (Michigan.html).

Target: Frame where page is loaded (rightFrame).

Creating the Image Map Layers

Continue to select states, creating a new layer for each.

As each image layer is created a hand is added to the Layers option.

Creating the FrameSet Page

Create the FrameSet Page. The image map is the left

frame. A Directions.html page is

initially loaded in the right frame.

The Image Map Directory

The FrameSet page is initially loaded.

The Image Map (Layered.html and its associated images are in the left frame.)

The Directions file or one of the state files is loaded in the right frame.

Selecting an Image

Click an image map area.

Information on the state is displayed in the right frame.