photoshop - 如何获取与图像映射一起使用的形状的路径坐标？

Question

我正在使用ImageMapster from here创建图像映射。

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

现在，我需要获取每个对象的路径坐标，并且我不想将鼠标悬停在每个角上并手动写下每个坐标。

有没有自动的方法来获得这条路？

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

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

Answer 1

啊!搜寻image-map之后，非常感谢Sven提出的想法（他为我+1），我找到了this thread here on Stack Overflow。

这就是我的过程。


在Photoshop中准备图像，将每个对象放置在具有透明背景的单独图层上（这使您在进行跟踪时更加容易）。
保存您的photoshop文件。
使用“文件...打开”在Illustrator中打开Photoshop文件（在CS4和CS5中有效），并确保允许该选项将Photoshop的图层作为单独的对象导入。打开文件后，请确保不要移动任何对象-您需要将它们放置在与photoshop文件中完全相同的位置，以便在渲染到图像贴图时它们可以相互叠加。
将Live Trace用于自定义设置。使用黑白模式，将阈值全部调高（255）。这将产生形状的黑色轮廓。 （您也可以使用“忽略白色”）。按下Trace按钮。如果您有很多图层，则可以将此新的跟踪模式另存为预设-我称我的剪影为Silhouette。现在，我只需单击一个图层，然后从跟踪按钮的下拉菜单中选择“轮廓”。
展开形状，并确保它仅包含一个平面形状：


您可以在illustrator中使用Blob笔刷使所有不需要的白色区域变黑
没有团体
没有复合形状（否则将不起作用）-这意味着您无法创建切口。
您可以在单击形状时告诉它们形状正确-您应该能够看到路径本身而没有涉及“其他”形状（也许是斑点画笔的添加）-仅是一条路径。一个简单的方法是这样的：


select形状
ungroup如有必要
release compound path
unite（形状模式将所有形状合并为一个）

不要crop图片-您希望形状在图片区域中与原始Photoshop图片相同。
也不要将所有形状都连接在一起。
这些形状应均为单独的整体形状，均位于其原始位置，每个形状都位于单独的图层上。

现在，打开Illustrator的Attributes panel，并确保“显示选项”。
选择形状，然后在“属性”面板中，将“图像映射”组合框从None切换到Polygon。确保添加一个url（输入的内容无关紧要；以后可以更改它-我只输入“＃”和形状名称，以便可以在图像映射代码中分辨出它属于哪个）
对每个对象执行此操作。
现在，在File菜单中，转到“为Web和设备保存”。跳过此处的所有设置，然后按“保存”。
在“另存为”（窗口的标题为“优化另存为”）对话框中，使用“另存为类型：”，如果只想要代码，则选择HTML Only(*.html)；如果想要sillouhuette，则选择HTML and Images。 ，（它们也会出现在名为“ images”的文件夹中）-并记下您的保存位置。
现在，在记事本中打开该html文件！
瞧！所有形状都将作为预制的image-map呈现给您-点路径甚至html代码。这是在记事本中打开刚创建的html文件时的样子：对于此演示，我选择了一张特别复杂的图像-您永远不会想要手动估计它，也不必做两次！


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

短短几分钟，我就可以用这种方式为我的photoshop图片创建图像映射。一次完成后，下一次会变得更容易。