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

我正在使用 ImageMapster from here创建一个图像映射.

我已经创建了一个Photoshop图像,我从原始照片中删除了几个图像.每个图像都在一个单独的图层上.

现在,我需要得到每个对象的路径坐标,我不想将鼠标悬停在每一个角落,并手动写下每个坐标.

有自动的方式来获得这个路径吗?

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

我已经尝试单独导出每个图层,然后将它们导入到插图和矢量化的形状(它保持形状在其原始位置),但我不知道如何获得坐标路径作为文本.我可以将其导出到svg,但这不是css图像映射所需的简单代码.

啊!在谷歌图像映射之后,非常感谢Sven的想法(他得到了我的1),我发现了 this thread here on Stack Overflow.

所以这是我的过程.

>将Photoshop中的图像准备在具有透明背景的单独图层上的每个对象(这将使您在进行跟踪时变得容易).
>保存您的photoshop文件.
>使用文件…打开(使用CS4和CS5)在Illustrator中打开Photoshop文件,并确保允许该选项将Photoshop的图层导入为单独的对象.打开文件后,确保不要移动任何对象 – 您需要它们与Photoshop文件中的完全相同的位置,以便在渲染到图像映射时可以叠加在一起.
>使用自定义设置的实时跟踪.使用黑色&白色模式与阈值全部上升(255).这将产生形状的黑色轮廓. (你也可以使用“忽略白”).按跟踪按钮.如果你有很多层,你可以将这个新的跟踪模式保存为预设 – 我称之为我的剪影.现在,我只需点击一个图层,然后从跟踪按钮的下拉菜单中选择剪影.
>展开形状,确保它只包含一个平面形状:

>您可以使用插图画笔中的斑点笔刷将任何不需要的白色区域变黑
>没有团体
>没有复合形状(或它不工作) – 这意味着您不能创建切口.
>您可以点击它们时,可以看出形状是正确的 – 您应该可以看到路径本身没有涉及到“其他”形状(也许是blob画笔添加) – 只是一条路径.这是一个简单的方法:

>选择形状
>如果需要,取消分组
>释放复合路径
>团结(形状模式将所有形状合并为一体)

>不要裁剪您的图像 – 您希望您的形状与图像区域中的原始Photoshop图像中的相同位置.
>不要一起加入所有的形状.
>形状应该是单独的整体形状,全部在其原始位置,每个都在单独的图层上.

>现在,打开Illustrator的“属性”面板,并确保“显示选项”.
>选择您的形状,然后在“属性”面板中,将“图像映射”组合框从“无”设置为“多边形”.确保添加一个url(这并不重要,你可以稍后更改它 – 我只是把“#”和形状的名称,所以我可以告诉它在哪个属于图像映射代码)
>为每个对象执行此操作.
>现在,在文件菜单中,转到“为Web和设备保存”.跳过所有设置,然后按“保存”.
>在“另存为”(窗口的标题为“保存优化为”)对话框中,使用“另存为”类型,然后选择仅HTML(* .html),如果您只想要的代码,或HTML和图像如果你想要sillouhuette(他们将出现在一个名为“图像”的文件夹) – 并记下您的保存位置.
>现在在记事本中打开html文件!
> Voila!所有形状将为您呈现为预制图像映射点路径甚至HTML代码.当您在记事本中打开您刚刚创建的html文件时,这是什么样的:对于此演示,我选择了一个特别复杂的图像 – 一个您永远不需要手动估算,也不必做两次!

不要忘记将实际的图像文件放在您网站的图像文件夹中的某个位置.您可以保存psd文件供以后使用,如果需要,可以添加更多“stuff”,并重复此过程.

我可以在短短的几分钟内为我的photoshop图片创建这个图像映射.在你做了一次之后,下次会变得更容易.

相关文章
相关标签/搜索