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:
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:
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!
Hi can you post a tutorial on how you got all those images together like that?
Hi Amanda! I used picmonkey to create the original collage.
awesome! at first i tot it’s not possible with CS5. Haha!
It’s totally possible! 🙂
Just what I was looking for. Thank you so much! You help me a lot.
You’re welcome! 🙂
Thanks to your awesome instructions, i was able to make my first image map in Elements – it worked a treat! 🙂
It’s on this post http://www.getsilvered.com/?p=541
That’s great Pam! I’m so glad that you liked the tutorial!
Thank you so much Amy! I really appreciate you doing this tutorial 🙂 I have been trying to figure it out for ages and I have had no luck! Rhondda
You’re welcome! You know I did it mostly for you lol 😉 If you have any issues let me know and I’ll be here for tech support 🙂
Thanks for this tutorial! It does work just like you described in Elements, so that’s great! However, I’m having a bit of trouble adding the image to my site (I have a self-hosted wordpress blog). I uploaded the image to my blog and added the code, but when I hover over the image it only shows the link to where the image is hosted on my blog, not the link to the image map image. Any ideas what I’m doing wrong?
Thanks again for the tutorial!
Hi Meghan! Thanks for letting me know that it works with Elements! Can you email me that snippet of code that you’re using? I just want to see if everything is coded correctly. [email protected]
wow!! I had no idea you could do this in PS! I will have to see if it works in elements!! pinned and stumbled!!
Please let me know if it does Emily! I would love to add that tidbit to my tutorial. I never purchased Elements. I went straight for the full CS6 🙂 Thanks for sharing!!