How to Map an Image Using Photoshop

I know that I don’t normally post tutorials but I had a special request for this one so I’m going to share it for everyone to see! I’ve had a few people ask me about how to map an image. If you’re wondering what that is, then I’ll show you:

See this image? If you click on each of the photos, it takes you to the individual listing for that item in my Etsy shop! This is image mapping. You can cut your image up into different sections and link to different sites from the same image! If you’re wondering how you to can make an image like this one, it’s super simple if you have Adobe Photoshop. I’m sure that there are other ways to do this but this is the only way that I know how 🙂 I’m using  Adobe Photoshop CS6 but I’m pretty sure you can use an older version. I’m not sure about Elements since I haven’t used it.

Ok so here we go.

1. Open the image that you would like to map in Photoshop (or open Photoshop and create the image you would like to use). Make sure that you create the image in the exact size that you need. It will make it easier than trying to figure out how to re-size a mapped image later.

2. Create a new layer by clicking on the little sticky note icon on the bottom right of your screen (or go to the top menu, click on Layer -> New ->Layer)

3. Now we are going to get the coordinates that we need to create the image map so that the links will only be clickable in the defined areas. For this example, I am going to show you how to map with squares/rectangles and circles. I used the Shape Tool to draw my shapes over my image. These shapes will represent the clickable area of your image. (I made mine slightly opaque so you can see the original image underneath.) This step is not exactly necessary to image map but I wanted to give you a good visual so that you can understand it  better.

4. You’re going to have to change just a couple of settings to get the coordinates for your images. First, double click on the ruler on the right side of your screen. This will bring up the preferences. It should open up to the preferences under “Units & Rulers.” Under “Units” you will see an option for “Rulers.” Change this from Inches (or whatever unit it’s on) to Pixels. Click “OK.”

5. Open your Info screen by either pressing the F8 key or going to the top menu, Window ->Info. You will see the info window pop up. We will now be able to see the coordinates for your shapes.

6. Now we are going to get the coordinates of our shapes. You will need to take down all of the coordinates and save them for later. For your square or rectangle shapes, you only need the coordinates for the upper left corner and the lower right corner of your shape. For the circles, you will need the center and radius coordinates.

7. Once you’ve gotten your coordinates down, delete the additional layers that you created with your shapes and upload your image to your online photo storage site (in my case it’s my blog but you can use your Photobucket or Flickr account.) Get the link for your image. 

8. It’s time to code! 

Here is the basic html code to map your image. You will have to change everything shown in red to customize it to your own map.

I like to code the rectangles first and then the circles but it’s totally up to you. It doesn’t really make a difference.

coords=”x,y,x,y” –  refers to the coordinates that you got before. For a rectangle, take the x and y coordinates from the top left and bottom right and insert them here. For example, my coordinates for the first rectangle shown above is: coords=”17,17,209,241″
coords=”x,y,x” – refers to the x and y coordinates for the center of your circle and the x coordinate for the radius. In this case, mine is: coords=”338,131,451″
shape=”” – only change this if you want to change the shape of what you are mapping. If you are creating a map with all rectangle or square shapes, you would change each of these to “rect” and if they are all circles, you would change them to “circle”

If you have more than 3 shapes, you would add another line of the “area” code. I think the rest are pretty self explanatory. When you’re finished, you will have a mapped image like the one I showed you above. Here’s the code sample for you to copy and paste so that you can edit it yourself:

<map name=”NameYourImageMapHere”><area title=”Image Title1″ coords=”x,y,x,y” shape=”rect” href=”Website URL”><area title=”Image Title2″ coords=”x,y,x,y” shape=”rect” href=” Website URL”><area title=”Image Title3″ coords=”x,y,x” shape=”circle” href=”Website URL”></map><p><center><img src=”Image URL” usemap=”#ImageMapName” width=”ImageWidth” height=”Image Height” border=”0″></center>
I hope that if you have been interested in image mapping, that you will give this tutorial a go. It’s not as difficult as it may seem and once you get the hang of it, you’ll be mapping everything! If you have any questions about this tutorial, please do not hesitate to contact me!