如何获取用于图像映射的形状的路径坐标？

Question

我正在使用ImageMapster 这里创建一个图像映射.

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

现在,我需要获取每个对象的路径坐标,我不想将鼠标悬停在每个角落上并手动记下每个坐标.

是否有自动获取此路径的方法？

也许有一些应用程序或Web服务,我可以发送我的图像并获得回报的路径？

我已经尝试分别导出每个图层,然后将它们导入到插图画家并矢量化形状(它将形状保持在原始位置),但我无法弄清楚如何将坐标路径作为文本.我可以将它导出到svg,但这不是css图像映射所需的简单代码.

Answer 1

啊! 谷歌搜索后image-map,非常感谢Sven的想法(他得到了我的+1),我在Stack Overflow上找到了这个帖子.

所以这是我的过程.

1. 在Photoshop中准备图像,将每个对象放在具有透明背景的单独图层上(这样可以在您进行跟踪时轻松​​实现).
2. 保存您的photoshop文件.
3. 使用File ... Open(在CS4和CS5中工作)在Illustrator中打开Photoshop文件,并确保允许该选项将Photoshop的图层导入为单独的对象.打开文件后,请确保不要移动任何对象 - 您需要它们与photoshop文件中的位置完全相同,以便在渲染到imagemap时它们可以相互叠加.
4. 使用Live Trace自定义设置.使用黑白模式,阈值全部向上(255).这将产生形状的黑色轮廓.(您也可以使用"忽略白色").按下Trace按钮.如果你有很多图层,你可以将这个新的跟踪模式保存为预设 - 我称之为我的,剪影.现在,我只需单击一个图层,然后从跟踪按钮的下拉菜单中选择" 轮廓 ".
5. 展开形状并确保它只包含一个扁平形状:
   • 您可以使用插图画家中的blob画笔来遮挡任何不需要的白色区域
   • 没有团体
   • 没有复合形状(或它不起作用) - 这意味着你不能创建剪切.
   • 当你点击它们时,你可以看出形状是正确的 - 你应该能够看到路径本身没有涉及"其他"形状(可能是blob画笔添加) - 只是一条路径.一个简单的方法是:
     • select 形状
     • ungroup 如有必要
     • release compound path
     • unite (形状模式将所有形状合并为一个)
   • 不要crop你的图像 - 你希望你的形状与原始的photoshop图像在图像区域中的相同位置.
   • 不要将所有形状连接在一起.
   • 形状应该都是单独的整体形状,都在它们的原始位置,每个都在一个单独的层上.
6. 现在,打开Illustrator Attributes panel,并确保"显示选项".
7. 选择您的形状,然后在"属性"面板中,将"图像映射"组合框从中None切换为Polygon.确保添加一个url(你输入的内容无关紧要;你可以稍后更改它 - 我只需要输入"#"和形状的名称,这样我就可以在图像映射代码中告诉它属于哪一个)
8. 为每个对象执行此操作.
9. 现在,在File菜单中,转到"Save for Web and Devices".在此处跳过所有设置,然后按"保存".
10. 在"另存为"(窗口标题为"保存优化为")对话框中,使用"另存为类型:"并选择HTML Only(*.html)是否只需要代码,或者HTML and Images如果您还想要sillouhuette(它们将出现)在名为"images"的文件夹中) - 并记下您的保存位置.
11. 现在在记事本中打开那个html文件!
12. 瞧!所有形状都将作为预制image-map点路径甚至HTML代码呈现给您.这是你在记事本中打开刚创建的html文件时的样子: 对于这个演示,我选择了一个特别复杂的图像 - 一个你永远不想手工估计的图像,也不必做两次!

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

我能够在短短几分钟内以这种方式为我的photoshop图片创建图像映射.完成一次后,下次会更容易.

Answer 2

这已被窃听了我这么久,我没有Illustrator中能够使用的BGM提出的解决方案,我创建了自己的Photoshop插件.

你可以在这里得到它:https://creative.adobe.com/addons/products/2389

它将所有路径的"点"坐标写入文本文件.应该适用于CS6及以上版本.

我使用它的方式是我创建一个选框,右键单击 - > make work path,重命名我的路径,[repeat],然后通过我的插件导出coords.

如果有人对它背后的脚本感兴趣,你可以看看这里:http://pastebin.com/8ugcAV3j

如果您进行了任何改进,请在此处发布,以便其他人也可以使用它们.

希望这有助于某人.

编辑:添加了源脚本的链接(仅在之前的评论中)