photoshop – How to get the path coordinates of a shape for use with image-maps? – Stack Overflow

I have created a photoshop image with several images that I have cut out from the original photographs. Each image is on a separate layer. Now, I need to get the path coordinates of each object, and I don't want to hover over every corner and manually write down each coordinate. Maybe there is some application or web service whence I can send my image and get the path in return? I have tried exporting each layer separately and then importing them into illustrator and vectorizing the shape (it keeps the shape in its original position), but I can't figure out how to get the coordinate path as text. I can export it to svg, but that isn't the same simple code needed for the css image map. Ah! After googling image-map, much thanks to Sven for the idea (he got my +1), I found this thread here on Stack Overflow. Don't forget to place the actual image file somewhere in your site's images folder. You can save the psd file for later and add more 'stuff' if you want, and repeat the process. I was able to create the image map this way for my photoshop picture in just a brief couple of minutes. After you do it once, it gets easier for next time. This has been bugging me for so long and I don't have Illustrator to be able to use the solution proposed by BGM, that I created my own Photoshop addon. The way I use it is I create a marquee, right click ->, make work path, rename my path, [repeat], then just export coords via my addon. If anyone's interested in the scripts behind it, you can have a look here: http://pastebin.com/8ugcAV3j I used this to find the co-ordinates of the outline of a shape to make image hotspots for links in dreamweaver. If you have something else in mind, then you'll have to ignore some of it. This works on a single layer so you may want to make a 'flattened copy first', but I don't see why it wouldn't work on a multi layered image. Use wand to highlight area you want. This will be different for different images. Right click and hit Make Work Path. Use a suitable tollerance which is found by trial and error. I just use the most sensitive. Do this for all areas in all of your images creating separate paths for each. Click edit then export paths to illustrator and save file in sensible place. Open the saved file in word. Ignore the bumf the the top and use replace to remove ALL LETTERS. Don’t worry about the paragraph characters. Note that all of the work paths are exported in the same file separated by a blank line so must copied and pasted separately to be used for each hotspot. After inserting your image. Start making a map in dreamweaver with a couple of co-ordinates then simply replace these in the with information from the illustrator file for each of the map areas to be produced. creating an image map is really simple. First we need to look at the syntax of the code Let's create a div.If we want to position it at the right side of our page,we can just begin by writing Now we have to define the map structure.First lets assume that you want a rectangular portion of an image to act like a hyperlink. Now comes the big part:How to find the image map coords. Very simple.Go to http://www.image-maps.com Browse your image file,click 'Start Mapping your image',then you proceed, and then on the next page,click 'Import Old mapping Code' on the right.then you get the coords. After that, you can use FIREBUG to change the coords according to your specifications,because image-maps only hyperlinks the whole image,so use firebug to change the coords and adjust according to your requirements. Source.


Яндекс.Метрика Рейтинг@Mail.ru Free Web Counter
page counter
Last Modified: April 23, 2016 @ 7:02 pm