如何获取与图像映射一起使用的形状的路径坐标? [英] How to get the path coordinates of a shape for use with image-maps?

问题描述

我正在从此处使用ImageMapster 创建图像地图.

I am creating an image map using ImageMapster from here.

我创建了一个photoshop图像，其中包含我从原始照片中切出的几个图像.每个图像都在单独的图层上.

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.

是否存在自动获取此路径的方法?

Is there an automated way to get this path?

也许有一些应用程序或Web服务可以发送图像并获取路径作为回报?

Maybe there is some application or web service whence I can send my image and get the path in return?

我尝试分别导出每个图层，然后将它们导入到illustrator中并对其进行矢量化处理(它将形状保持在其原始位置)，但是我不知道如何获取坐标路径作为文本.我可以将其导出到svg，但这与css图像映射所需的简单代码不同.

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.

推荐答案

啊！搜寻image-map之后，非常感谢Sven提出的想法(他让我+1)，我发现

Ah! After googling image-map, much thanks to Sven for the idea (he got my +1), I found this thread here on Stack Overflow.

这是我的过程.

1. 在Photoshop中准备图像，将每个对象放置在具有透明背景的单独图层上(这将使您在进行跟踪时更加容易).
2. 保存您的photoshop文件.
3. 使用 File ... Open (在CS4和CS5中可用)在Illustrator中打开Photoshop文件，并确保允许选择将Photoshop的图层作为单独的对象导入.打开文件后，请确保不要移动任何对象-您需要将它们放在与photoshop文件中的完全相同的位置中，以便在渲染到图像图.
4. 将Live Trace与自定义设置一起使用.使用黑色&白色模式，阈值全部向上(255).这将产生形状的黑色轮廓. (您也可以使用忽略白色").按下Trace按钮.如果您有很多层，则可以将此新的跟踪模式另存为预设-我叫我的 Silhouette .现在，我只需单击一个图层，然后从跟踪按钮的下拉菜单中选择 Silhouette .
5. 展开形状，并确保它仅包含一个平面形状:
   • 您可以在illustrator中使用斑点画笔在不需要的白色区域上涂黑
   • 无组
   • 没有复合形状(否则将无法使用)-这意味着您无法创建切口.
   • 您可以在单击形状时确定它们是正确的-您应该能够看到路径本身，而没有涉及其他"形状(也许是斑点画笔的添加)-仅是一条路径.一个简单的方法是这样的:
     • select形状
     • ungroup如有必要
     • release compound path
     • unite(形状模式将所有形状合并为一个)

1. Prepare the image in Photoshop with each object on a separate layer with a transparent background (this will make it easy for you when you do the tracing).
2. Save your photoshop file.
3. Open the Photoshop file in Illustrator using File...Open (works in CS4 and CS5) and make sure to allow the option to import Photoshop's layers as separate objects. After you open the file, make sure NOT to move any of the objects around - you need them to be in the exact same place as they were in the photoshop file so they can superimpose each other when rendered to the imagemap.
4. Use the Live Trace with custom settings. Use the black & white mode with the threshold all the up (255). This will produce a black silhouette of the shape. (You can also use "ignore white"). Push the Trace button. If you have many layers, you can save this new tracing pattern as a preset - I called mine, Silhouette. Now, I just click on a layer and choose Silhouette from the tracing buttons' dropdown menu.
5. Expand the shape and make sure it consists of only a single flat shape:
   • you can use the blob brush in illustrator to blacken over any unwanted white areas
   • no groups
   • no compound shapes (or it won't work) - which means you can't create cutouts.
   • You can tell the shapes are right when you click on them - you should be able to see the path itself with no "other" shapes involved (perhaps the blob brush additions) - just a single path. An easy method is this:
     • select the shape
     • ungroup if necessary
     • release compound path
     • unite (shape mode merges all shapes into one)

请不要忘记将实际的图像文件放置在站点的图像文件夹中的某个位置.您可以保存psd文件供以后使用，并根据需要添加更多的内容"，然后重复该过程.

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.

我能够在短短的几分钟内为我的photoshop图片创建图像地图.完成一次后，下一次会变得更容易.

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.

这篇关于如何获取与图像映射一起使用的形状的路径坐标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！