Photoshop Image maps

This tutorial is written for those who hate opening another program to map an image or using an online mapping website. In this tutorial, you will learn how to make an image map with just Photoshop. The only other programs you'll have to open is some sort of notepad to copy your HTML.

1. Open your image in Photoshop. (You don't need Imageready for this) I'm using this for an example: (Feel free to save this to follow along)

2. Select the slice tool on the tools table.

3. Using the slice tool, select the area that you want your image to be (just click and drag). My first would be the "home" link. It should look like this: (Don't worry-the lines and stuff WILL NOT show up on the finished product.)

4. Once you do that, right click in the box and choose "Edit Slice Options". A box like this will show up. In the URL box, type in the link if you want that section to be linked to. You can rename it, like I did. Don't change the slice type, but you can change anything else. For the basics and unless you know what you're doing, just add the URL and change the name if you want, but don't change anything else.


Continue to do this with each section you want sliced and/or linked. When you're done, you'll have a series of lines and boxes on top of your image.

To save, File >> Save For Web. Choose your "mode" (Original, Optimized, 2-up, 4-up). If you don't know what this is for, just click Optimized. :]

Next, pick which file type and such under Presets (below the Save, Cancel, and Done buttons). Click save, navigate to the folder you want to save it in, type in the name, and choose as option under "Save as type". That point is pretty self explanatory. You can pick to save the HTML and images, just images, or just HTML. Your best bet would be to save the HTML and images. Click Save.

Now, whatever folder you saved it in, there should be a "Images" folder, and an HTML file with the name you chose (if you saved the HTML).

If you're going to upload this to a website, you're going to upload ALL of the images, and put the HTML where ever you want it. You can open the HTML file with notepad, word, or any other program that will open/read HTML files. Note that Photoshop does not, so you won't even be able to see the HTML file if you try to open it through Photoshop.

Make sure all the image links are correct. If you uploaded your images to say...your "Images" folder, make sure the image link in the HTML says something like "Images/filename.jpg" (note that web hosts are case sensitive). If you uploaded it to another folder, just change the name to point to where the image is.

BUT. If you're planning to use this on Xanga, Myspace, etc...upload the images online via Photobucket or the image host of your choice. If you don't have an online photo album, you'll need one. There are tons of popular ones, and really, It doesn't matter which one you use. I also suggest making a new album just for image maps.

When you're done, copy the HTML (at mentioned before, with any program that opens HTML files-Photoshop does NOT do this!) to where ever you're using it, and change the "filename.jpg" to the URL of the image you uploaded. For example, say the image name is "Home.jpg", change something like "Images/Home.jpg" to "http://www.whatever.com/Home.jpg". Your image host will provide a link for you.

You're all set! See how easy that was? You didn't even have to open anything but Photoshop and Notepad (or Word, or whatever you used to copy your HTML) Contact me for help/problems.
My final product....unfortunately wont show up. :[

When I open the HTML file in Text Edit all I see is an image, no code.... When I take the Photoshop native file and use Save for Web and Devices I can't save the banner as a whole -- I am only getting small slices. I need a .jpg to use in my Wordpress blog header. I am doing this to have the 4 social media icons on my WP Header.

Sheryl
Fashion Development Group

NJArtiste {at} optonline.net

Thank u so much for this..... Would u be able to help me with this.. I wanna make something like this for my web page & tried way too much, but in vain... I wanna make a pad on which the pictures are arranged the same way & when clicked should lead to their web page..... How can I do this..... Here is the link to what I want it like.... The second big picture..... http://embellishmagazine.com/b log/2011/04/decorative-trim-co lor-trends-challenge-whats-hot /

Ash....
(http://hastkala -oceanichope.blogspot.com/)

Hi -- your headline is a little deceiving because you're NOT actually creating image maps, you're creating image slices. In other words, each link is a tiny image and all the images are tossed into an HTML table (hence the comment above about everything looking like a jigsaw puzzle).

Adobe Fireworks will do proper image maps, in other words it will keep your image intact but allow you to create several links within the image -- without your image ever getting sliced up into tiny parts.

It still requires copying the HTML, however, since the HTML contains the definitions for the image map.

I just want to create a link in my image, send it by mail but do not show as an attachment but in the message box, so people just click on a part of it and go to my page.

wow how rude, the guy below me. i had no clue, all this time i've done my DIVs in photoshop & i do my image mapping on some website, whch is pretty had for me to figure out the coords. wow thanx, im so stupid.

WOW is there a need to call people names... It would be nice to see the finish picture.

this is awesome thnx!!

Awesome!
ii Love The Tutorials!
But When ii post the html code on my page,
ii get nothing.
just a bunch of words pop up.
can you help me please?

Also what would you call the html file if you wanted to use it for a webpage? :/

I did everything you said but when it appeared on my myspace it was horrible looking. Like a puzzle kind of. Why is that?

View all »

Author	Smarmosaur
Submitted on	Aug 7, 2007
Page views	130,251
Favorites	97
Comments	36
Reviewer	themarkster
Approved on	Aug 7, 2007

photoshop, images, image maps