Home    >    Tutorials > Effects V7 >  > 
Presidents Day Image Map
Download this tutorialDownload (??kb)
E-mail this tutorial to a friendEmail to Friend

Presidents Day Image Map
Created by: Leftie

Presidents Day is on Feb 18th. In this tutorial we will compose a graphic that shows the first 6 Presidents of the United States and then link the images to an outside website that gives you information about them. We'll use the Image Mapper in PSP to do this. We will also be working with quite a lot of layers, so it is important to name them so that you don't get lost *G*

Open all 7 images from the download file. There will be 6 pictures of the Presidents, and a image of the large United States flag.

First we'll work with the Flag image. This is a large image so let's resize it first.

  • Select All
  • Use Window || Duplicate to preserve the original
  • Close the original
  • Select the duplicated file to work with now
  • Image || Resize

Now set the resize settings to the following:

  • Pixel size = 600
  • Resize all layers = Checked
  • Maintain aspect ratio = Checked
  • Resize type = Smart size
  • Click OK

The Flag image is in the BMP format. We will need to increase the color depth so that we can use some of the other features of PSP.

  • Flag image should still be selected
  • Use: Colors || Increase Color Depth || 16 Million Colors.

Once you have increased the color depth, make sure that you can see the whole flag image in the workspace; you can zoom out to do this. It should be taking up about 1/4 of the workspace.

Click on the title bar of the George Washington picture to activate it ( or use Window || wash.png ) and then make sure that the Layer Palette is displayed. (If not, press L on the keyboard). Hold the left mouse button down on the Background layer (in the layers palette) and drag it to the Flag image window.

Click on the usflag title bar to select it and you will notice that we now have 2 layers displayed in the Layers palette. Right click on Layer1 and select Rename from the menu. Type Washington to rename the layer.

After dragging a layer into another image the Mover tool is automatically selected. Click on the G Washington picture in our main image to drag it into position.

You need to align the image on the right of the stars and so that the "George" text is in the center of the first red stripe of the flag. We can align the images more precisely once we have all our Presidents in place. Close the original "wash" image to save memory and to save workspace.

Using the above technique, place John Adams (jadams.png) next to Washington in our image remembering to rename the layer J Adams. Visually align the 2 images equally between the stars and the map edge.

Our next President to be enlisted is Thomas Jefferson (jeff.png). Place him on the bottom left.

Then bring in, in this order,

  • James Madison (mad.png)
  • James Monroe (monroe.png)
  • John Quincy Adams (jqadams.png)
remembering to name their layers.

At this point your Layers Palette should look like this.

Now you can move the images around to align them properly. It's interesting to note that, with the Mover tool selected, if you click on one of the President images the respective layer becomes the active layer in the Layer Palette. You can move around the layers in this way, or click the layer in the Layers Palette.

When done select Layers || Merge || Merge all (Flatten)

Now that our main image is complete we can export it into the Image Mapper. If your Web Toolbar is displayed you can click on this icon, if not select File || Export || Image Mapper

Our image is too large for the preview window in the Image Mapper so click on the Zoom Out icon so that we can view the whole thing.

The Image Mapper allows us to define "hot spots" in our graphics so that when they are displayed in a browser window the mouse pointer will change to the hand image when placed over the "hot" area and we can click on it to go somewhere else on the web.

At the top left of the Image Mapper window are the tools that we use to select an area on the image. At present it doesn't include an elipse tool so we will be using the Circle tool to select as much of the image as possible.

Zoom in to the George Washington part of the image and drag out a circle as shown. The selection can be adjusted using the 2 handles shown as green dots. When the outline of the selection is green, this is the current selection. Other selections are shown in red.

If at any time you make a mistake, you can select the Eraser tool and click on the selection to remove it completely.

Now we can set the object properties for this selection.

  • In the URL box type the following:
    • http://members.aol.com/Icecold966/wash.html
    • This is the site that we will go to when we click on this area.
  • In the Alt Text box enter George Washington
    • This will show up when the mouse is hovered over the image.
  • Leave the Target box blank.

Go ahead and use the same techniques to set the rest of the selections. Remember to add the name of the particular President in the ALT box. Here are the URL's for each of the Presidents:

  • John Adams : http://members.aol.com/icecold966/Adams.html
  • Thomas Jefferson : http://members.aol.com/icecold966/jeff.html
  • James Madison : http://members.aol.com/icecold966/madison.html
  • James Monroe : http://members.aol.com/icecold966/monroe.html
  • John Quincy Adams : http://members.aol.com/icecold966/JQA.html

Now we need to set the Save options for the image.
In the Format Menu make sure that GIF is displayed and then click on the Optimize image button. The standard GIF Optimizer window will be displayed.

  • Under the Transparency tab, None = Selected
  • In the Colors Tab, the number of colors = 150
  • dithering = 100%
  • Optimized Octree = Selected
  • Under the Format Tab Non-Interlaced = Selected.
  • Then click on OK

Now would be a good time to save all of our settings. Click the Save Settings button and navigate to where you unzipped the tutorial images from the download.

Type a name in the box and the Image Mapper will save the data as a ".jsd" file. You can always come back to this point by clicking the Load Settings button.

The next step is to save our Image Map.

The first operation is to save the HTML file that the Image Mapper creates. This holds all the co-ordinates information for our map to work. Don't Panic! You don't have to do anything with this file other than save it and then load it up later into a browser *G*

The second part of the Save process is to save the graphic information. We will be putting both files in the folder where you unzipped the images for this tutorial.

Step 1:

  • Click on the Save As button.
  • Navigate to the folder where you unzipped the images for this tutorial.
  • In the name box type "Presidents.html"
  • Click Save
Step 2:
  • In the Image Map Save As window that appears navigate to your tutorial folder again
  • Name the file "Presidents"
  • Click Save

Now, you can just close the Window in your PSP program as you are ready to explore your work.

The last part of this tutorial is to load up the "Presidents.html" file into your web browser. These instructions are for IE 5.5, but should be much the same for any other browser. In your browser window select File || Open.

In the Open window that appears click on Browse and navigate to where you saved the "Presidents.html" file and select it.

Click Open and, all being well you will have your Presidents Day Image Map.

Click here to see how it should look!

Many thanks to the Web Master of the IceCold966 site for allowing me to use his images and links.