PhotoShop Image Maps

1
PhotoShop Image Maps

• Midwestern States Info Pages

2
The Original .gif File

• A crude outline of the Midwestern States

3
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.

4
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.

5
Creating the Layers, II

• Create a layer for each state.
• Save the image LayeredMid.psd
• Switch to ImageReady to create the ImageMap.

6
Creating the Image Areas

• Selected the desired layer from the layer menu.
• Use the magic wand to select the area.
• Select Layergt New Layer Based Image Map.
• Default shape is a rectangle (Upper Peninsula)

7
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).

8
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.

9
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.

10
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.

11
Selecting an Image

• Click an image map area.
• Information on the state is displayed in the
  right frame.