如何创建矢量图形，然后从中生成图标？

Question

对于我正在开发的网站，我需要创建一些图形。我还没有锁定尺寸，所以我不想直接生成图像文件（PNG、GIF、JPG），以防我在进一步了解布局和 UI 以了解哪些有效、哪些无效后改变主意。

这让我想到：也许我应该将它们生成为矢量图形（例如 SVG），然后生成一组图像文件以在我的网站上使用。我以前从未玩过矢量图形，所以我想要的是：

• 一些工具可以以某种可接受的格式创建（最好以图形方式）一些矢量图形；
• 创建矢量图形的编程方式。例如，假设我有一个网格，我不一定想用手绘制它。“对齐网格”和类似功能将涵盖这种情况，但不包括其他情况；和
• 我可以通过某种方式以编程方式（例如作为构建任务）获取一组矢量图形并生成一组图像，并且最好对命名约定、输出格式、大小等进行一些控制（例如从命令行）。我不想进入程序并单独对 100 多个文件执行“另存为...”来生成我的图标。

什么样的工具和工作流程适合这种情况？

Answer 1

由于有几种不同的商业矢量图形包，因此有不同的方法。我使用的有 Adob​​e Illustrator、Adobe Fireworks、Adobe Photoshop。诚然，Fireworks 和 Photoshop 都是支持矢量的位图图形软件包。

我发现 Fireworks 处理矢量更容易，因为它们是“一流”对象，而在 Photoshop 中它们实际上是矢量蒙版和颜色填充的组合。使用矢量在位图包中进行设计的好处是，通过放大文档可以更轻松地预览光栅化结果，这样您就可以看到各个像素。Illustrator 还添加了“像素预览”模式来实现此目的。

所有三个软件包都具有脚本功能，允许您自动执行重复任务，例如多重导出、命名等。然而，Photoshop 也有动作；简化的宏系统，可让您记录和回放简单的批处理活动。

我倾向于构建图标包的方式是在单个文档中设计所有图标。我使用“组”（在 Illustrator 中）或“文件夹”（Fireworks 或 Photoshop）将每个图标彼此隔离，但让我保持构成图标的所有单独图层不展平。

当我进行导出时，我运行一个脚本来迭代顶级组/文件夹，一次隐藏除一个之外的所有组/文件夹，并将结果导出到所有主要分辨率的位图；16x16、24x24、32x32、48x48、128x128 和 256x256。

这里有一个优秀的 时尚指南 Microsoft 有关如何为 Vista 和 XP 设计图标的信息。它侧重于使用 Photoshop 来完成大部分工作。

Answer 2

看一眼 开罗 及其各种绑定。事实上，甚至还有一个 食谱 可用于将 SVG 转换为 Cairo 命令。

Answer 3

如果您需要一个可靠的免费工具来创建 SVG，然后在决定所需的大小后将其转储为位图图像， 墨景 将是一个不错的选择。UI 看起来比 Illustrator 稍差一些，但它在 Windows、Mac 和 Linux 上运行良好。局限性在于色彩管理不如 Illustrator 强大，而且如果您使用的不是 Linux 机器，对压力敏感图形输入板的支持也不太好。