Creating an imagemap using Photoshop layers

[tjn1130]

In the past, I used ImageReady to create an imagemap using Photoshop layers.  Is this functionality available in Fireworks?  Or is there something else?

My projects usually involve maps with unique boundaries.  I used to create the layers in Photoshop and then pull up ImageReady.  I could select the roughness and ImageReady would generate all the XY coordinates for each layer.  Then I cut-and-pasted those coordinates into a webpage that included the original image.

This was all lost with the "newer" versions of Photoshop.

[Herbert2001]

Yes, image maps can be easily drawn up in Fireworks.

http://www.dummies.com/how-to/content/how-to-create-and-link-image-maps-in-fireworks-cs5.html

Or use Gimp:

http://docs.gimp.org/en/plug-in-imagemap.html

Other free options:

http://www.carlosag.net/Tools/XMap/

http://code.google.com/p/imgmap/

Or online:

http://imagemap-generator.dariodomi.de/

[tjn1130]

Thank you for your response.

I understand that image maps can be created in Fireworks.  But can I open a Photoshop file and use its layers to create the image map?

[Herbert2001]

In Fireworks select all the layers (objects) you wish to convert to a hotspot, and right-mouse click one, then choose "create hotspot".

A dialog will pop up that asks you whether you want to convert to one or multiple hotspots. Take your pick, and click ok. Done!

Each hotspot can be selected and the properties bar control the settings. Visibility of the hotspots are controlled (and also selectable) via the layers panel: twirl down the web layer and you will see them.

Photoshop plugins and scripts:

http://iam.andyhawkes.co.uk/post/1319372215/easy-photoshop-imagemaps

[HealingRooms]

I used the Andy Hawkes method, and it worked. (andyhawkes/ps-paths-to-imagemap · GitHub).

Photoshop CC 2014 had its own method of trying to make the image map a bit more space efficient, and it used vectors as much as possible... just to save a few bytes!  The vectors from one segment of the image map occasionally overlapped with another image map.  I resolved this by manually creating a replacement portion of the image map by drawing a polygon and using the "Paths" tab (near the "Layers" and "Channels" tabs) and the circular icon with four dots (north/south/east/west) which is "Make path from selection."  This is similar to the instructions on the Andy Hawkes website, although his PathsToImageMap script for Photoshop is designed to make the outline automatically for you.  When recreating the polygon for the image map, I used as few points as possible, to discourage Photoshop from trying to save time by creating one vector to replace two or three dots in a curve.

So Andy's script was awesome and time-saving.  Photoshop CC 2014 seemed to be what caused the problem by attempting to be extra helpful.

[AdwIanMone]

Herbert2001 thank you so much for the links! The link to the fireworks how to was just what I needed! Thanks!

[Cousin-Jack]

Another thumbs up for Andy Hawks "paths to image" script.

andyhawkes/ps-paths-to-imagemap · GitHub