Adobe Community: Message List - Creating an imagemap using Photoshop layers

Re: Creating an imagemap using Photoshop layers

forums_noreply@adobe.com — Thu, 06 Nov 2014 20:53:57 GMT

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

andyhawkes/ps-paths-to-imagemap · GitHub

Re: Creating an imagemap using Photoshop layers

forums_noreply@adobe.com — Wed, 22 Oct 2014 16:24:58 GMT

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.

Re: Creating an imagemap using Photoshop layers

forums_noreply@adobe.com — Wed, 25 Jun 2014 14:51:14 GMT

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

Re: Creating an imagemap using Photoshop layers

forums_noreply@adobe.com — Tue, 17 Dec 2013 16:08:47 GMT

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

Re: Creating an imagemap using Photoshop layers

forums_noreply@adobe.com — Tue, 17 Dec 2013 12:19:22 GMT

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?

Re: Creating an imagemap using Photoshop layers

forums_noreply@adobe.com — Tue, 17 Dec 2013 01:52:35 GMT

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.h tml

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/

Creating an imagemap using Photoshop layers

forums_noreply@adobe.com — Mon, 16 Dec 2013 17:03:47 GMT

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.