使用AI设计一款铅笔图标(4)

如果偏移值为负数，则副本将会出现在上层。

调整金属环路径的渐变，敲击G，然后在路径中拖拽渐变效果，直到产生下图所示效果：

好了，金属环看起来舒服多了，现在我们来弄弄笔尖。

对笔头路径使用比例缩放工具，让它和笔身邻接匹配。

就像草图一样，笔头路径的中间需要有一个高光来表现它的形状。在做这一步之前，你要记住，这个图标是存储为EPS8格式，所以不能使用效果，也不能出现混合模式或者不透明度，只能使用路径和复合形状。为了更简单一点，使用钢笔工具在笔头路径上勾出一个路径。

调整渐变的方向和边缘，和形状匹配。

使用钢笔工具绘制笔尖。

使用钢笔工具绘制橡皮擦部分的高光，使用渐变工具调整，使其与橡皮擦形状匹配

对橡皮擦路径使用路径偏移命令得到一个副本，调整橡皮擦路径的渐变，让它的边缘看起来更明显。

5.2上色

在这一步，我们先把各个元素编到各自的组(笔身，橡皮擦和笔尖部分)。

选择笔身路径(包括三个路径)。点击编辑>颜色配置，勾选预览和转换选项，然后切换到RGB模式。(这个地方注意，我使用的是windows操作系统下的cs2版本，要弹出这个对话框要点击滤镜>illustrator 滤镜>调整颜色....)

拖拽滑块调整红/绿/蓝的值(随你调成什么样)。

选择橡皮擦重做第二部。

选择笔尖也做相同的操作。

现在铅笔看起来没有之前有立体感。这是因为在颜色调整过后，渐变色会丢失掉黑色信息。我们接下来要做的是回到铅笔的三个部分，然后在他们的渐变色中添加黑色，让各个元素的形状表现得更清晰。

把渐变色中主色的滑块向白色这边拖动。在色板中把颜色拖拽到渐变条中，选择刚才拖拽的颜色(通过点击颜色滑块实现)设定其值为0-0-0(要确定颜色模式为RGB)。你可以使用色板调整渐变色。

6.深化细节，风格匹配。

在所有的基础部分完成以后，在视图菜单中切换到像素预览模式，检查一下有没有像素问题。

就快完工了。如你所见，笔尖看起来太尖了，给人很不踏实的感觉，所以我们应该把圆锥点变为一个平头椎体。同时，我们有必要给笔身部分加一些额外的路径来实现高光效果(通过使用路径偏移命令)，因为这支铅笔的外层反光度很高。结果如下图：

图标旋转45度效果

现在还有一个问题，这支铅笔看起来有点太暗了，没有达到我们想要的效果。所以我们需要调整一下颜色。只要通过下列方法调整一下金属圈路径即可：

(1)复制路径，然后缩放一小点，

(2)再复制一个然后使用渐变工具，让这个图标看起来更真实。

注意：在像素预览时确认“对齐像素”，“对齐点”已经被勾选上。

最终输出效果：

查看最终效果，虽然光的方向是从上至下的，但是笔身的较低部分的却比较高部分亮。没错，这是反光。

许多人觉得使用AI画图标很难，因为色光很难表现。如果你的色感很好，那你可以使用调色板来改变渐变色和色调。

不管怎样，你可以在PS下进行如下操作：

1.把你的矢量图输出为PNG格式，然后使用PS打开。通过使用曲线命令或者色彩平衡命令或者自动色阶(都在图像>调整选项下)，或者使用你在PS知道的任何方法，编辑完后保存文件。

2.把编辑过后的图像拖到AI中，然后使用滴管工具吸取色彩的三个重要部分——明部，中间部和暗部，每次洗去过后，把颜色拖到调色板中保存。

3.把你选择好的颜色拖拽到渐变条中，调出你自己喜欢的渐变色，然后在图标中使用。

我经常那样做，现在我已经有一个常用的渐变色库，我经常在我的图标设计中使用。

7.源文件

你可以在这里下载这个图标的EPS文件或者AI文件。

(但是在我们这要收饭团，如果你也像我一样无所事事的话，打开金山词霸和google，随便找一篇英文的教程来翻译，然后贴上来，你就会得到饭团，如果你翻译的是一篇阿塞拜疆语的教程，那你会成为iconfans论坛终生免费享用饭团会员。)

一般错误

让我们用上面的例子来讨论一下在图标设计的时候常会犯的错误。

图标的高光和反光，一般是在原始路径上绘制一个新的路径，然后填充白色或者黑色，然后改变他的不透明度。这种办法会使物体的颜色变成银灰色，会没有以前清晰，尽管能够产生光泽。

使用华而不实的圆柱体作为铅笔的笔身，只使用一个渐变。绘制图标时应该表现物体最普遍最具代表性的特征。一只圆柱形的铅笔很难表现清晰的棱角和明显的高光。

绘制一个路径表现铅笔身，然后通过使用一个渐变让他看起来有棱柱的效果。这种方法确实很简单，但是很难编辑，而且渐变方向容易歪斜。

在ESP8格式下使用混合工具创造阴影效果，阴影会变成由白至黑。一旦放在有背景色的背景下，就会有白色的轮廓线出现。

设计比较

这是一些我们想要放在一起讨论一下优缺点的一些典型案例。

上述的最终效果说明铅笔是用一点透视法制做的。这是个完美的设计，它包含一切信息：光感，阴影，色彩和质感，特别是这个图标可以被拉伸至任何大小而不会出现锯齿问题

图一中的铅笔图标使用的是两点透视法。这个图标的光感不错，阴影效果可以接受，颜色比较棒，也没有锯齿问题。看起来真的挺牛逼的。但是这个铅笔的形状和质感对于观者来说可识别性不是太高，这一点犯了我们设计图标的大忌!

图一

图二中的文件夹也是用两点透视法。这个图标概念不错，质感也很到位。他准确的刻画了由上至下的光线，阴影也体现得很让人满意，文件夹的反光更是恰到好处，然而，由于文件夹的上边缘存在锯齿问题，所以在24x24像素下连形状都看不清了。

图二

结论

有许多方法做图标设计，有些人用3d软件，有些人用fw，有些人用ps，但是不管用什么，设计图标的目的都是一样的。我们必须保持一套图标风格一致，简单易懂。就像我在文章开头说的那样，要做一个精致漂亮的图标步骤就那么几步，原则就那么几条。