Ps、Ai和Sketch都可以用来绘制矢量icon并且能够导出为SVG，那么应该选择哪个工具呢？

1、引言

首先比较Adobe家的两个软件。Ps通常更多地被用在以位图为主的工作当中，同时拥有一定的矢量编辑功能，Ai则正好相反，它以矢量编辑为主，拥有少量编辑位图的功能。用Ai来绘制矢量icon当然没问题，但是Ps在最近几年发展很快，除了处理位图，现在也可以很好的编辑矢量图形。

尽管Ps和Ai是图形设计产业的主要工具，我还是要把Sketch加入到这次比较中，因为它越来越受欢迎而且经常被认为可以用来取代Adobe家的产品。

这次比较的目的是为了看看到底哪个软件最适合用来绘制矢量icon。我在这篇文章里用“矢量icon”指代任何只用形状和路径绘制的icon而不加入栅格化图形照片或滤镜。

Photoshop和SVG

Ps从2014年10月之后便可以导出SVG格式的文件。这意味着你不但可以用Ps来绘制可缩放的图形用于自己的设计项目或者web，同时还能导出为Ai和Sketch可读的格式！

然而，Ps还不能直接读取.svg格式的文件。所以如果你想继续编辑在这之前的文件，除了保存为.svg格式还得再保存一个.psd的文件。这样一来就会显得有些麻烦。

一个可行的解决方案是在Ai里建立一个简单的矢量icon后以矢量形状图层的方式复制到Ps里。这样的确可行，但是你需要同时拥有这两个软件。如果是多个图层的复杂icon就得每次复制一遍然后手动放到Ps里。

2、绘制形状

绝大多数icon都是在基础形状上绘制的，只用不同形态、不同大小的矩形和椭圆就能得到各种各样的结果。当然，所有设计软件都提供基本的形状工具，但是好不好用还得看他们的易用性和灵活性。

Photoshop

Ps在这方面有些劣势，毕竟它本身不是为了矢量图形而生，而且在Ps里绘制形状仍然让会让我感觉到是“图层导向”的。在画板内选择和移动形状感觉并不如Ai和Sketch那么直观。多边形和星形在绘制之后也不能动态进行调节参数，而且只有矩形才可以有圆角。

Illustrator

绘制椭圆、（圆角）矩形、线和多边形的时候，Ai让人感觉更加自然。动态圆角这个功能也非常有用，因为它基本上允许你平滑过渡所有的折角。然而，在实时调整多边形和星形这方面，Ai和Ps一样不尽如人意，一旦绘制出来就不好进行参数调整了。

Sketch

用Sketch绘制基本的形状同样比较方便，而且允许你绘制完成之后继续调整形状的参数，包括多边形和星形。Sketch也能圆滑过渡任意形状上的任意折角，这与Ai里的动态圆角功能类似。

3、路径查找操作

“路径查找”或者说“布尔工具”可以把矢量形状组合成更加复杂的形状和icon，包括4个基本的模式：加、减、交集和差集。

Photoshop

Ps里的路径查找操作不会破坏原始的形状，如果需要的话也可以直接合并。唯一的缺点是这个操作要求形状必须在同一个图层里，所以在查找路径之前必须得合并所需的形状图层。

Illustrator

Ai在路径查找功能方面的选项比Ps要更多，不过常用的也就那4个，当然有更多的选择也不是坏事。Ai里路径查找的缺点就是这个操作是破坏性的，它会永久改变你之前的形状。

Sketch

Sketch的路径查找不会破坏原始的形状，而且可以直接在不同图层内进行操作，这点非常方便！如果需要永久改变形状也能直接合并。路径查找这个功能在Sketch里我基本找不到任何缺点。

4、导出SVG

SVG是由W3C制定的一种基于XML，并且标准开放的矢量图形格式。因为基本上被支持于所有的浏览器、图片查看器和设计软件，所以svg非常适合用来制作或分享矢量图形。

Photoshop

在Ps里可以通过把图形放在不同的画板内或者给图层组和单个图层命名来同时导出多个svg文件。直接导出图层组和图层的能力让Ps显得更有优势，因为这样就不需要为了每个icon单独设置一个画板，这在当你需要制作一套100个或者更多数量的icon集的时候非常方便。

Illustrator

在这三个软件里Ai是唯一个允许你在导出svg文件时设置svg导出细节的软件，包括定义字体表现、图片插入、css属性等。你也可以利用多个画板来同时导出多个svg文件，当然每个Ai文件最多只允许建立100个画板。

Sketch

Sketch也允许通过切片的方式来同时导出多个svg文件，而且可以针对单个切片设置不同的文件类型和导出的尺寸比例。但是，同Ps和Ai比起来，Sketch导出的svg文件有时会出问题。举个例子，如果一个圆角矩形针对每个圆角设置了不同的圆角半径导出时就会出问题。我相信开发者会针对这个问题来改进，但是起码现在来讲这就是用Skech来制作svg icon的缺点。

5、导出SVG格式文件的体积

我做了个小测试，用这三个软件把玛丽莲梦露的矢量剪影导出成svg文件看看谁的导出结果更好。

Photoshop

默认设置

结果：39KB

Illustrator（冠军）

SVG 配置文件 SVG 1.1

CSS选项：Style Elements

结果：21KB

Sketch

默认设置

结果：56KB

6、其他表现

Photoshop

Ps是图形产业的标配软件，绝大多数设计师都对其工作流程非常熟悉，这可能使它成为我们更好的选择。然而如果你想要用Ps来制作矢量icon的话最好配合Ai一起使用。

Illustrator

大家都非常喜欢Ai里的实时描摹工具，Ps和Sketch都没有对应的功能。而且Ai相对于Sketch在设计行业也拥有更高的地位，相对来说更可靠一点。

Sketch

Sketch是一个专门为设计师打造的轻量的软件，很多人都觉得相比Adobe家“臃肿的”软件来说，Sketch更加高效一点，而且价格上Sketch比Ps和Ai都更加便宜，不过因为只有Mac版本，所以Windows用户就无法使用了。

7、结论

如果你还在想最后到底应该选谁……这还得看你更喜欢哪个软件……希望这个对比能帮助你做决定，不过有必要说一句，如果你想试试Sketch，那就别犹豫了！如果你觉得使用Ps更舒服的话，用它来制作矢量icon也是完全没有问题的。

如果你选择Ai，那么你就选择了我们今天的冠军，不过这只是我的看法而已！

我们在Medialoot（文章的来源网站）为会员和即将成立的Glyphs制作了大量的SVG icons，Glyph是一个专门提供高品质SVG资源的平台。我们在SVG方面学到了很多内容，并且希望分享给全世界所有人。查看Glyphs的网站，注册使用我们的beta版，试试我们的icon来体验SVG的强大。