19

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

我用从原始照片中剪下的几张图像创建了一个 Photoshop 图像。每个图像都在一个单独的层上。

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

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

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

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

4

6 回答 6

34

啊! 谷歌搜索后image-map，非常感谢 Sven 的想法（他得到了我的 +1），我在 Stack Overflow 上找到了这个线程。

所以这是我的过程。

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

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

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

于 2012-12-12T20:10:47.040 回答
7

这一直困扰着我很长时间，我没有 Illustrator 能够使用 BGM 提出的解决方案，我创建了自己的 Photoshop 插件。

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

它将所有路径点的坐标写入文本文件。应该适用于 CS6 及更高版本。

我使用它的方式是创建一个选框，右键单击 -> 制作工作路径，重命名我的路径，[重复]，然后通过我的插件导出坐标。

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

如果您有任何改进，请在此处发布，以便其他人也可以使用它们。

希望这可以帮助某人。

编辑：添加到源脚本的链接（之前只在评论中）

于 2014-06-09T11:54:45.563 回答
3

我用它来查找形状轮廓的坐标，以便为 Dreamweaver 中的链接制作图像热点。如果您有其他想法，那么您将不得不忽略其中的一些。这适用于单层，因此您可能希望先制作“平面副本”，但我不明白为什么它不适用于多层图像。

使用魔杖突出显示您想要的区域。这对于不同的图像会有所不同。右键单击并点击制作工作路径。使用通过反复试验找到的合适公差。我只用最敏感的。对所有图像中的所有区域执行此操作，为每个区域创建单独的路径。单击编辑，然后将路径导出到 Illustrator 并将文件保存在合理的位置。用word打开保存的文件。忽略顶部的凹凸并使用替换删除所有字母。不要担心段落字符。请注意，所有工作路径都导出在由空行分隔的同一文件中，因此必须分别复制和粘贴才能用于每个热点。

插入图像后。开始在dreamweaver 中制作带有几个坐标的地图，然后简单地将这些坐标替换为要生成的每个地图区域的Illustrator 文件中的信息。

于 2013-08-06T15:25:46.717 回答
2

我添加了我必须找到的更新答案，因为 adobe 在许多情况下都消除了 HTML 输出，我主要使用 Photoshop（CS4），这是一个完美的解决方案：

1）下载以下文件：https ://github.com/andyhawkes/ps-paths-to-imagemap

2) 在 Photoshop 中打开您的图像并使用魔杖选择表格

3）右键单击并选择“制作工作路径”（像素越小，越准确）

4) 转到File-> Scripts->Browse ...并选择第一步中的脚本

就是这样 ！！此脚本将使用坐标打开您的文本编辑器...

于 2017-04-18T05:32:33.357 回答
0

像这样的东西可能有用；

http://code.google.com/p/imagemap/

将图像复制到适当位置，然后进行绘图。

于 2017-08-25T09:18:02.520 回答
-2

创建图像映射非常简单。首先我们需要看一下代码的语法让我们创建一个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>

现在我们关闭 div。

</div>

如果形状是圆形，我们使用语法 shape=circle coords="x,y,radius"

如果形状是多边形，我们使用 **shape=poly coords="a,b,c,d,e,f,gh"

现在到了重要的部分：如何找到图像映射坐标。很简单。去 http://www.image-maps.com 浏览你的图像文件，点击“开始映射你的图像”，然后你继续，然后在下一页，点击右侧的“导入旧映射代码” .然后你得到坐标。

之后，您可以根据您的要求使用 FIREBUG 更改坐标，因为 image-maps 仅超链接整个图像，因此使用 firebug 更改坐标并根据您的要求进行调整。

玩得开心。

于 2013-07-29T14:35:58.117 回答