边画边体验：用SVG-Edit绘制应用图标

在互联网的上古时代，是没有SVG这种格式的（虽然2001年就存在了，但2008年才进入W3C标准）。在它之前想在网络上用矢量图，只能依靠Flash这种独行特立的东西。

所以你可能无法理解一个老UI设计师对于SVG这种格式有多么喜爱，用精简优雅的贝塞尔曲线就能完成图形设计，还不存在像素放大后模糊的情况，对于图标绘制实在是太完美了。

然而不知道是技术开发的难度还是交互体难的难度，或者是市场原因，除了Adobe\Corel\Serif这些专业公司的很大部头桌面设计软件，你很难在移动端（尤其安卓端）找到一个得心应手好用的矢量编辑软件。

感谢懒猫之神的跨终端技能，让一些本来只有桌面或网页端才能使用的工具变成应用。

下面的内容我将使用SVG-Edit这个软件绘制一个应用图标。

它有一个早古的和有点另类的界面风格，但该有的功能基本都有了，虽然有的地方略显简陋，有些功能需要熟悉一下才能适应，但在应急的情况下还是完全可以用的，而且各种机制非常适应SVG的格式。

首先让我们调整一下画布的尺寸，由于是矢量格式，所以小一点完全没关系，我设置了480x480，一个正方形的画布就有了。

让我们从经典的矩形开始，绘制好后可以在上面工具条中设置具体的宽高，然后用对齐工具将它放在画面的中心。下方的调色板可以为选中的形状设置颜色。

工具条最后一个工具是圆角，设置成30，然后按住Alt键拖动，就创建了一个副本，（或在顶部工具条选印章图标生成副本）

将副本缩小后变成白色，放在黑色中央，通常内部形状的圆角要小一些，设置为15。

用钢笔工具开始绘制特殊的形状的顶点，贝塞尔曲线的工具通常体验都很一致，点击即是“尖角”顶点，拖动则会产生“手柄”以控制曲线的曲度。让我们画一个猫耳的形状。

形状如果不太合意，随时可以双击图形，让它进入编辑模式，然后拖动顶点的位置或手柄，以达到你想要的形状。

同时选中外框和耳朵，用对齐工具使它们左对齐。
然后绘制另一只耳朵，这个应用唯一缺憾的内容是没有镜象，不过不必太在意是否完全一致，因为图标在缩小后没人会注意到这一点细节。而且不对称有时也是一种美。

画一个水平式的眼睛，双击进入节点编辑模式，你会发现每选中一个点，它“之前”的线端也会被选中。这应该是SVG格式的特点，所以说应用的开发者还是对格式比较在意的。

点击添加节点，两个线端的中间就会出现两个新的顶点，将这两个点一起上移，就会发现它变成了^_^ 微笑眼。

不过我自我否决了这个形状，还是用眯眯眼代替。同时选定两个文件后，可以一起缩放它们的高度，让眼睛更细一些。

复制一下卡片主体，成组，旋转。双击后可以进入组的编辑状态，让我们将后面的卡做一点微调。

加一个圆形的鼻子，

一只淡定的狐狸就画好了……

等等？我不是想要狐狸！

重新画两个圆，一黑一白叠成环形，选中一个节点（及线段）将它删除，另一个点双击即可变成尖顶点，一个半圆就画好了。

调整一下细节，把嘴加粗，眼睛进一步变细。

一只可爱的柴犬就画好了。

等等？我要的也不是柴犬！

重新调整，把白色框变矮（圆角会自动调整，这就是矢量比位图好的地方！），把眼睛变成白色……嗯？
这次像我要的猫了，可是为什么看着有点奸诈？继续修改，先把鼻子换成猫的三角形，眼睛也换成圆形。

用钢笔工具画一个潦草的尾巴形状，不用担心，矢量的特点就是你永远有机会调整形状。

画面少一点颜色，所以干脆改成黑猫特有的黄色眼睛，鼻子的形状过于尖锐，打开编辑模式，选中三个顶点并把它们改成曲线，换上粉色，再细心调整位置，一只可爱的黑猫就画成了。

这次，是我要的。

下面的工作是加入文字，这个应用的名称叫Milka。先找一个合适的字体，然后将它放大放在底端。最后再将i顶端的小点替换成一个大一些的圆点，增加设计的趣味性。

SVG-Edit的窗口左侧有一个图层栏，生成一个新的图层，然后选中文字，把它们加到第二层去。这样元件分类更明确，你可以只编辑你想要编辑的内容。

现在复制文字元件，加上3个单位粗的圆角边框，再把无边框的文字改成白色，效果就好多了。i的顶端可以设计成猫眼的形状，但是只限独立存在的情况，加在有猫的时候就会比较怪异了，好像猫王爷有三只眼一样。

把所有元素放大到画布边缘以内，这样它既可以充满空间，双可以更清晰一些。

SVG-Edit有保存为SVG或PNG为主的几种不同位图格式，让我们保存成PNG，然后备份SVG。

赶紧安装到应用的测试包中，嘿，好像有点意思。

这就是一个简单图标的手工绘制过程，还有一些细节可以再调整，但不妨留到其他应用去测试。

希望你可以 交 学 费 废 会！