How to Create an Image Map Using Adobe Photoshop CS5

How to Create an Image Map Using Adobe Photoshop CS5

These instructions will guide you through the process of creating an image map in Adobe Photoshop CS5. There will be three parts to the instructional guide. The first part explains how to find an image and save it to your desktop. The second set will explain how to change your saved image into an image slice. The final set will guide you into taking the sliced image and shape it into an image map. Key Words: Image Map- An image map is a graphic image defined so that a user can click on different areas of the image and be linked to different destinations. Image Slice- An image slice is done by taking a larger image and slicing it up into smaller images.

Step #1: How to Copy an Image from the Internet 1.

Double-click the large lowercase e on your desktop to open Internet Explorer.

2.

Browse to the web page that contains the image you want to use. If you are using this as a tutorial type: http://www.usaharvestcenter.org

Image Map 1

3.

Scroll down until you find the CSULB logo on the web page.

4.

Right-click the image. A menu will appear.

5.

Select Save image as.

6.

Select a directory from the Save in: box. If you are using this as a tutorial select your Desktop.

7.

Enter a file name for the image in the File name: field. The File name is arbitrary. If you are using this as a tutorial type csulb_logo as the File name for your image.

Image Map 2

8.

Click Save.

9.

Click X in the upper right hand corner of the current window. This will close Internet Explorer.

10.

Now that you have successfully found and saved your image, you can create an Image Slice.

Step #2: How to Create an Image Slice

1.

Click on Start in the bottom left hand corner.

2.

Move your pointer to Programs, then Adobe, then Photoshop, and click Adobe Photoshop CS5.

3.

Click File in the menu of the application (upper left corner of the screen). A drop down menu will appear.

4.

Select Open.

5.

Search for the image you previously saved from the internet in your Desktop.

Image Map 3

6.

Choose the image by clicking on it once.

7.

Select Open.

8.

Select Image from the upper menu of the window. A drop down menu will appear.

9.

Select Mode from the drop down menu. Another drop down menu will appear.

10.

Make sure RGB Color is selected. There will be a check mark next to it if it is selected.

Image Map 4

11.

Choose the shape you would like to use to create your image slice. Note: Try to choose one similar to the shape of your image.

12.

Click and hold the Slice tool in the toolbox. Select the Slice Tool.

13.

Click the top left corner of the section of the image you want to slice and drag your pointer down to the bottom right corner of it.

Image Map 5

14.

Release the mouse. Note: You may repeat process with as many image slice as desired

15.

You have now created your image slice.

Step #3: How to Create a Hyperlink using the Image

1.

Drag your mouse to select a section for the first link.

2.

Right-click the highlighted section. A drop down menu will appear.

Image Map 6

3.

Select Edit Slice Options. A Slice Options window should appear.

4.

Left-click the URL box.

5.

Type the website address of your choice. If you are using this as a tutorial type: http://www.csulb.edu

6.

Click OK. Note: You may repeat process with as many links as desired.

7.

Select File.

8.

Select Save for Web & Devices.

Image Map 7

9.

Select Save.

10.

A window Save Optimized As should appear.

11.

Enter a file name for the image in the File name: field. If you are using this as a tutorial type csulb as the File name for your image map.

12.

Select Desktop from the drop down menu titled Save in.

13.

Choose HTML and Images in the Format menu.

14.

Click Save.

Image Map 8

15.

Exit Adobe Photoshop CS5.

16.

Locate the image map saved on desktop titled csulb.

17.

Double-click on the image to start using the image map.

18.

Click on the slice you created and you will be redirected to csulb homepage.

Image Map 9