How to Make an Image Map Using Photoshop
When you click part of a website image and your browser jumps to a different Web page, an image map is probably responsible for that action. Site designers can write HTML code that creates clickable hot spots on any picture. Constructing image maps by hand is time consuming because you must identify the exact coordinates of each hot spot. With the Slice tool in Photoshop, you draw hot spots on an image to generate the HTML code you need automatically.
Create Image Map
Launch Photoshop and open an image you want to convert into an image map. Click and hold the "Crop" tool to display a menu containing other tools. Click the "Slice" tool to select it.
Click a point inside the image and drag the Slice tool to draw a bounding box around the part of the image you want to make clickable. Photoshop draws additional “auto slices” around other parts of the image. These auto slices ensure that all parts of an image are included in a slice.
Right-click inside the slice you created and select "Edit Slice Options" to open the Slice Options window. Type the URL you want to associate with the slice. You can also replace the default name that Photoshop gave the slice by typing a new one in the “Name” text box.
Click “OK” to close the Slice Options window and return to the image. Click another point inside the image and drag the Slice tool to create additional slices as needed.
Adjust Image Map Slices
Select the "Slice Select Tool" from the toolbar and click inside a slice you want to move.
Hold down the left mouse button and drag the slice to a new location.
Hold the mouse cursor over one of the slice’s edges and a line with arrows on each end appears. Click that line, hold down the left mouse button and drag the mouse if you need to make the slice bigger or smaller.
Save Image Map
Click “File” followed by “Save for Web” to open the Save for Web window.
Click “Preset” and select one of the file type options that appear. Choices include GIF 128 Dithered, JPEG High and PNG-24.
Click “Save” to open a window that displays your hard drive’s files and folders. Browse to the folder where you want to save the image map files and type a name for the image map in the File Name text box.
Click the “Format” drop-down menu and select “HTML and Images.” Click “Save” to save all files to the folder you specified.
Tips & Warnings
- Photoshop saves each slice as a separate image in an images folder. The program also saves an HTML document that has the same name as the name you typed in the “File Name” text box. If you find that HTML file in File Explorer and double-click the file, your browser opens and displays your image map. Click different parts of the image map to navigate to the URLs you assigned to the slices. For instance, if you divided a U.S. Map into states by creating a slice for each state, you can click a state to go to the URL assigned to that state’s slice.
- Give slices meaningful names and you will find it easier to identify them if you ever want to tweak the HTML code that Photoshop generated. For instance, if you created a slice that surrounded the state of Iowa, you could name the slice Iowa.
- You’ll probably want to save your image map images in the same format as the original image. For instance, if it’s a JPEG, choose one of the JPEG options from the Preset drop-down menu in the Save for Web window. Choose “JPEG Low,” for example, and Photoshop generates low-quality JPEG images. The lower an image’s quality, the faster it loads in a Web browser.
- This article is applicable to Adobe Photoshop CC, 2014 version. Some information may vary in other versions of the software.