Topic: Complex shape image maps Pages that link to <a href="https://ozoneasylum.com/backlink?for=30986" title="Pages that link to Topic: Complex shape image maps" rel="nofollow" >Topic: Complex shape image maps\

 
Author Thread
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 05-04-2009 20:19 Edit Quote

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?

DavidJCobb
Nervous Wreck (II) Inmate

From: United States
Insane since: Mar 2009

IP logged posted posted 05-04-2009 22:46 Edit Quote

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.

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

Petskull
Maniac (V) Mad Scientist

From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000

IP logged posted posted 05-04-2009 23:37 Edit Quote

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*

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 05-05-2009 01:06 Edit Quote

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:



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu