How to Create an Image Map in Photoshop

Written by daniel ketchum
  • Share
  • Tweet
  • Share
  • Email

If you want to create a website, then you might want to consider using Photoshop to help you create your web page design and layout. It has a wide array of tools and functions to help you make your site look professional. One other thing Photoshop can help you with is creating image maps. Images maps are images for your site that have the hyperlinks added to them. All you need are Photoshop and its companion program ImageReady. This only works for Photoshop CS2 and the previous versions.

Skill level:
Moderately Easy

Things you need

  • Computer
  • Photoshop

Show MoreHide


    Making the Image Map

  1. 1

    Start Photoshop if your image is not already a Photoshop document. Select "File," click "Open" and browse to the image you want to turn into an image map. Then click the "Send to ImageReady" button at the bottom of the toolbar.

  2. 2

    Start ImageReady. Select "File," click "Open" and browse to the PSD document you saved. If you want to make any changes to the size of the image so it better fits your web page, use the "Image Scale" and "Canvas Size" to make the changes.

  3. 3

    Select the "Image Map" tool from the toolbar. The initial shape is elliptical, but right-clicking on the tool gives you other shape options, such as rectangular. Hold down the mouse button and drag the shape over the spot where you would like to place the first hyperlink on the image map. Then go to the bottom right on the screen and type in the name for the image and the hyperlink address you want it to go to when clicked.

  4. 4

    Repeat step 3 for each section you want to add a hyperlink to. Click "File" and then "Save as Optimized." In the dialogue that opens, name the file and save it in the "HTML and Images" format. And you are done.

Don't Miss


  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.