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

Question

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

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

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

哪种工具和工作流程适合这种情况？

Answer 1

有不同的方法，因为有几种不同的商业矢量图形包。我使用的是Adobe Illustrator，Adobe Fireworks，Adobe Photoshop。不可否认，Fireworks和Photoshop是具有矢量支持的位图图形包。

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

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

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

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

这是微软如何为Vista和XP设计图标的优秀style guide。它专注于使用Photoshop完成大部分工作。

Answer 2

查看Cairo及其各种绑定。事实上，甚至有recipe可用于将SVG转换为开罗命令。

Answer 3

如果您需要一个可靠的免费工具来创建SVG，然后在确定所需的大小后将其转储到位图图像，Inkscape将是一个不错的选择。用户界面看起来没有Illustrator那么精致，但在Windows，Mac和Linux上运行良好。缺点是颜色管理的功能远不如Illustrator，如果你不在Linux机器上，对压力感应图形平板电脑的支持则不太好。