Creating an HTML Image Map with Photoshop

September 9th, 2009

I recall in a past life (or at least a past version of Photoshop) stumbling across a feature that allowed you to create something akin to an old-fashioned HTML image map right in Photoshop.  I never actually used it, but I thought to myself, “That could be useful some day.”

Fast forward several years to yesterday.  I needed to replace the social media links at thefatherlife.com.  I was adding a new one, which would require resizing all of the existing ones.  The current set up uses several individual images, each called up separately in HTML typed into an empty widget in WordPress.  It works, but the images don’t display quite how I want them to.  I’m not enough of an HTML expert to know how to do it right and too lazy to learn.  Then it hit me: if I want to have complete control over how it all looks, I should create an image map!  I can make the image exactly how I want it and the results will be as I design them!  Now if I can just remember where that image map feature was in Photoshop.  I wonder if it’s still supported?

This being my first image map, I had no idea what I was doing.  I set about to create the image I wanted.  Then… I was stumped.  So I pulled up the trusty Google and typed in “image map photoshop.”  Lo and behold, the very first result had the answer:

http://www.createblog.com/photoshop-tutorials/736-photoshop-image-maps/

Thank you to createblog.com and the author, smarmosaur, for an easy to follow process.  Everything turned out exactly as I wanted it to!

Hello world!

September 9th, 2009

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!