Topic: Complex shape image maps

Time was you could select what you wanted with the magic wand tool and export the coordinates from Photoshop (or was it ImageReady) - but that is no more, as far as I can tell.

How do people do these anymore?

Create an HTML imagemap. The AREA's shape should be "poly"; its coords should be of the format:

x1,y1,x2,y2,..,xn,yn

Where (x1,y1) is the first point on the polygonal shape, (x2,y2) is the next, and so on. If the last coordinate pair isn't identical to the first, the browser will connect the first and last, closing the polygon for you. So just draw the polygon over the image in an image editor (don't save it!), and find the coordinates of that polygon's shape.

----------------------

I know what you mean, reisio. I used to have a program for something like this, but I can't find it! I'll ponder on this further..

*Ponders*

I ended up just using an old ImageReady copy I had at home.



This simply isn't worth doing by hand (DavidJCobb), particularly when ImageReady can do it... it just bothers me this functionality appears to be completely gone in newer versions of Adobe software.



A demonstration:



Get a good image.



Open in ImageReady (in this case version 3 which came with Photoshop 6).



Using the right settings (tolerance, anti-aliasing, etc.), use the magic wand tool to select the precise area you want in often a single click:




Copy & paste (CTRL+C, CTRL+V) for a new layer with just this selection.

Layer > New Layer Based Image Map Area:


Now you've got the sad rectangular area "modern" software tends to create.
Hit the Image Map tab at bottom left:


Shape to Polygon:


Quality to 100:


See that outline tighten up ? yeah!

File > Save Optimized As...:




Save as type: HTML Only (*.html) ? we only want the coordinates, everything else Adobe does for outputting HTML including image processing is terrible.


The terrible (yet easily cleaned) coordinates code we wanted: