设计教程-使用AI设计一款铅笔图标(3)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:未知   作者:uimaker.com

关键词

6.深化细节,风格匹配。
在所有的基础部分完成以后,在视图菜单中切换到像素预览模式,检查一下有没有像素问题。
就快完工了。如你所见,笔尖看起来太尖了,给人很不踏实的感觉,所以我们应该把圆锥点变为一个平头椎体。同时,我们有必要给笔身部分加一些额外的路径来实现高光效果(通过使用路径偏移命令),因为这支铅笔的外层反光度很高。结果如下图:

UIsheji.com 以用户为中心的UI设计

 

图标旋转45度效果

UIsheji.com 以用户为中心的UI设计

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

(1)复制路径,然后缩放一小点,
(2)再复制一个然后使用渐变工具,让这个图标看起来更真实。
注意:在像素预览时确认“对齐像素”,“对齐点”已经被勾选上。
最终输出效果:

UIsheji.com 以用户为中心的UI设计

查看最终效果,虽然光的方向是从上至下的,但是笔身的较低部分的却比较高部分亮。没错,这是反光。
许多人觉得使用AI画图标很难,因为色光很难表现。如果你的色感很好,那你可以使用调色板来改变渐变色和色调。

UIsheji.com 以用户为中心的UI设计

不管怎样,你可以在PS下进行如下操作:

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

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

3.把你选择好的颜色拖拽到渐变条中,调出你自己喜欢的渐变色,然后在图标中使用。
我经常那样做,现在我已经有一个常用的渐变色库,我经常在我的图标设计中使用。

 

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

图标的高光和反光,一般是在原始路径上绘制一个新的路径,然后填充白色或者黑色,然后改变他的不透明度。这种办法会使物体的颜色变成银灰色,会没有以前清晰,尽管能够产生光泽。
使用华而不实的圆柱体作为铅笔的笔身,只使用一个渐变。绘制图标时应该表现物体最普遍最具代表性的特征。一只圆柱形的铅笔很难表现清晰的棱角和明显的高光。
绘制一个路径表现铅笔身,然后通过使用一个渐变让他看起来有棱柱的效果。这种方法确实很简单,但是很难编辑,而且渐变方向容易歪斜。
在ESP8格式下使用混合工具创造阴影效果,阴影会变成由白至黑。一旦放在有背景色的背景下,就会有白色的轮廓线出现。
设计比较
这是一些我们想要放在一起讨论一下优缺点的一些典型案例。
上述的最终效果说明铅笔是用一点透视法制做的。这是个完美的设计,它包含一切信息:光感,阴影,色彩和质感,特别是这个图标可以被拉伸至任何大小而不会出现锯齿问题

UIsheji.com 以用户为中心的UI设计

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

UIsheji.com 以用户为中心的UI设计

 

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

UIsheji.com 以用户为中心的UI设计

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

 

 收藏