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

Question

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

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

一些工具以某种可接受的格式创建(最好以图形方式)一些矢量图形；

一种创建矢量图形的编程方式。例如，假设我有一个网格，我不一定要手工绘制它。 “对齐网格”和类似功能将涵盖这种情况，但不会涵盖其他情况；和

我可以通过某种方式以编程方式(例如作为构建任务)获取一组矢量图形并生成一组图像，并且最好对命名约定、输出格式、大小等内容进行一些控制(例如从命令行)。我不想进入程序并单独对 100 多个文件执行“另存为...”以生成我的图标。

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

Answer 1

因为有几种不同的商业矢量图形包，所以有不同的方法。我使用的是 Adob​​e Illustrator、Adobe Fireworks、Adobe Photoshop。诚然，Fireworks 和 Photoshop 是具有矢量支持的位图图形包。

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

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

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

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

这是一个很棒的 style guide微软有关于如何为 Vista 和 XP 设计图标。它侧重于使用 Photoshop 来完成大部分工作。