Depiction- Webmaster Resources
Stock Image


Contributors: Advertise Here  |  Advertise Here  |  Advertise Here


Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

Tutorials > Photoshop > Image Maps with Drawing Tools Page 2

 

If the images on this page do not appear, please click here.

5. Next outline the next shape that resembles home plate with the Polygon Image Map tool. Then fill in the information for the current selection in the Image Map palette.

Shapes

Shapes

6. The final shape is much harder to outline than the previous two. With the Polygon Image Map tool still selected, outline the final shape as done with the past two shapes. To work around the curved points, zoom in to about 200%. Then fill in the information for the current selection in the Image Map palette.

Shapes

Shapes

7. To make the image load faster once it is exported, let's optimize the image. In the document window, click on the Optimized tab, which is next to the Original tab. Then go to Window > Optimize if the optimize palette isn't already visible. In this palette change the file format to GIF, since the image has very few colors. If the image was a photograph with lots of color, the original JPG file format setting would be left as is. Next change the maximum number of colors in the image to 64 or any of the possible selections in the dropdown menu that maintains image quality.

Shapes

8. Finally, save and export the map by going to File > Save Optimized As. Create a name for the new file and change the Save as Type field to HTML and Images. Navigate to your desktop or the folder you would like to save to and create a new folder. Rename the folder image_map. Back in Image Ready, navigate to the new folder that was just created and click the Save button. Open the image_map folder that was just created. Then open up the HTML file in the folder in your browser. You should be able to click on each shape in the image.


Click here to see the final result.


Go back to page 1.


 
 

Affiliates

Tutorial Guide Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources