Photoshop 如何获取图形的路径坐标以用于图像贴图？

我正在使用

ImageMapster

创建图像地图

我已经创建了一个photoshop图像，其中有几个图像是我从原始照片中剪下来的。每个图像都位于单独的层上

现在，我需要得到每个对象的路径坐标，我不想悬停在每个角落，然后手动写下每个坐标

有没有一种自动化的方法来获取这条路径

也许有一些应用程序或web服务，我可以从中发送我的图像并获得相应的路径

---

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

啊！在谷歌搜索了图像地图后，非常感谢斯文的想法（他得到了我的+1），我发现

这就是我的过程

在Photoshop中准备图像，每个对象位于具有透明背景的单独图层上（这将使您在进行跟踪时更加容易）

保存你的photoshop文件

使用file…Open（适用于CS4和CS5）在Illustrator中打开Photoshop文件，并确保允许选项将Photoshop的层作为单独的对象导入。打开文件后，请确保不要四处移动任何对象-您需要它们与photoshop文件中的对象处于完全相同的位置，以便它们在渲染到imagemap时可以相互叠加

使用带有自定义设置的

实时跟踪

。使用黑白模式，阈值全部向上（255）。这将产生该形状的黑色轮廓。（也可以使用“忽略白色”）。按下

跟踪

按钮。如果你有很多层，你可以保存这个新的跟踪模式作为预设-我称之为我的，剪影。现在，我只需点击一个图层，然后从追踪按钮的下拉菜单中选择剪影

展开形状并确保其仅由单个平面形状组成：

• 您可以使用illustrator中的斑点笔刷在任何不需要的白色区域上涂黑
• 没有组
• 没有复合形状（否则它将不起作用）-这意味着您无法创建剪切
• 当你点击这些形状时，你可以判断它们是正确的——你应该能够看到路径本身，而不涉及“其他”形状（可能是添加的斑点笔刷）——只有一条路径。一个简单的方法是：

  • 选择形状

  • 如有必要，取消分组

  • 释放复合路径

  • unite

    （形状模式将所有形状合并为一个）
• 不要

  裁剪

  你的图像-你希望你的形状在图像区域中与原始photoshop图像相同的位置
• 也不要将所有形状连接在一起
• 这些形状都应该是单独的整体形状，都在其原始位置，每个单独的层上

现在，打开Illustrator的

属性面板

，确保“显示选项”

选择您的形状，并在“属性”面板中，将“图像贴图”组合框从

None

切换到

Polygon

。确保添加一个url（不管你放什么，你可以稍后更改它-我只放“#”和形状的名称，这样我就可以在图像映射代码中知道它属于哪一个）

对每个对象执行此操作

现在，在

文件

菜单中，转到“为Web和设备保存”。跳过此处的所有设置，只需按“保存”

在“另存为”（窗口标题为“保存优化为”）对话框中，使用“另存为类型：”并选择

HTML Only（*.HTML）

如果您只需要代码，或者

HTML和图像

如果您也需要sillouhuette（它们将显示在名为“图像”的文件夹中），并记下您的保存位置

现在在记事本中打开html文件

瞧所有形状都将作为预先制作的

图像映射

-点路径甚至html代码呈现给您。下面是在记事本中打开刚刚创建的html文件时的样子：对于这个演示，我选择了一个特别复杂的图像-一个你永远不想手动估计的图像，也不需要做两次 不要忘记将实际的图像文件放在站点的“图像”文件夹中的某个位置。您可以保存psd文件以备以后使用，如果需要，可以添加更多“内容”，并重复此过程

---

我能够用这种方式在短短几分钟内为我的photoshop图片创建图像地图。做一次之后，下一次就容易多了。

创建图像贴图非常简单。 首先我们需要看一下代码的语法 让我们创建一个div。如果我们想把它放在页面的右侧，我们可以从写开始

<div align="right">

之后，我们导入要映射的图像

<img src="" alt="" width="" height="" usemap="#nameofmap" />

现在我们必须定义地图结构。首先，假设您希望图像的矩形部分像超链接一样

<map name="nameofmap">
<area href="wherever I wanna take that.com" alt="" title="" 
shape=rect coords="A,B,C,D"></map>

浏览您的图像文件，单击“开始映射您的图像”，然后继续，然后在下一页上，单击右侧的“导入旧映射代码”。然后您将获得坐标

之后，您可以使用FIREBUG根据您的规范更改坐标，因为图像映射只会超链接整个图像，所以使用FIREBUG更改坐标并根据您的要求进行调整

玩得开心。
我用它来找到形状轮廓的坐标，从而在dreamweaver中为链接创建图像热点。如果你有别的想法，那么你必须忽略其中的一些。这只在一个图层上工作，所以你可能想先制作一个“展平副本”，但我不明白为什么它不工作
</div>