欢迎来到福编程网,本站提供各种互联网专业知识!

使用AI设计一款铅笔图标

发布时间:2012-06-29 作者:sou6 来源:互联网
时至今日,图标已经随处可见,从游戏界面到网站页面。图标变得越来越流行,并充当了越来越重要的角色,特别是在用户界面领域。然而,由于图标设计的资源少之又少,所以在我们开始制作图标的时候,一个好的开始是相当困难的。由于这方面的比较深入的教程或者书

时至今日,图标已经随处可见,从游戏界面到网站页面。图标变得越来越流行,并充当了越来越重要的角色,特别是在用户界面领域。然而,由于图标设计的资源少之又少,所以在我们开始制作图标的时候,一个好的开始是相当困难的。

由于这方面的比较深入的教程或者书籍很少,所以我们都喜欢分享一些(希望是有用的)制作一些简单图标的小窍门。我们的这个教程并不会告诉你制作图标的方方面面,但是我们希望你看了以后会让你有所收益,特别是如果你是刚开始学习图标制作,或者想要学习到更多关于图标设计的知识。

使用AI设计一款铅笔图标 全福编程网教程

几周之前,我们发布了这一套阳光系图标(见上图所示),你可以从我们的网站上免费下载。这篇教程阐述了这套图表中的铅笔图标的制作过程。这篇教程很深入,很细致,我们想你应该可以毫无障碍的一步一步跟着做下去。

虽然我们认为这篇教程中的示例很基础,使用到的概念,理念,技术在一般的图标设计中也很适用,我们使用的工具也很简单,也很好操作,但是,你也必须对AI软件相当的熟悉。

以下就是我们这篇教程的最终成果,你可以从这下载源文件。

我们怎么开始呢?通常在开始之前,我们先会去网上收集一些铅笔的图片,观察它们的细节和特征,然后把他们溶合成一种风格,创造一些全新的铅笔图标。我们一般从手绘开始。

1.铅笔图标的特征。

绘制一个图标意味着描绘一个物体的最具代表性的特点,这样它就可以说明这个图标的功能,或者阐述这个图标的概念。

你应该知道,一般说来,有以下三种铅笔:

1. 多边形柱体,表面涂有一层反光漆;

2. 多边形柱体,笔身上还用一个白色的金属圈固定着一个橡皮头;

3. 圆柱形笔身,没有橡皮擦。

我们选择第二类作为图标设计的原型,因为所有必要的元素他都具备,这样对于观者来说,具有很高的可识别性。在试着按照第二种类型手绘一些草图以后,已经有和我们脑海中的风格设定相匹配的草图了。

我们一般喜欢用10%,30%,50%灰度的Copic马克笔和圆珠笔来绘制草图。关于图标设计,还有以下几条是相当重要的:

当你在绘制一个大图标时,你需要特别注意那些细节,特别要提醒的是你必须用两点透视。但是在这篇教程中,因为这套图标是在小尺寸(64×64像素和48×48像素下文中像素用px代替)下输出的,所以应该尽量简化,而且用一点透视即可。

这套图标中的光线必须一致。

整套图标透视必须一致,这样所有的图标看起来才像一个系列。

风格是比较阳刚的。

主色调是绿色。

由于这套图标存储为EPS8文件,所以只能使用渐变,而且所有的路径必须是闭合的(没有开放路径)。同时要注意,没有透明效果和栅格化图像。

好了,现在要正式开始了。

2.草图

在我们的图标设计中草图总是第一步

然后我们会把这些草图扫描置入到AI中。

3.基本轮廓线

3.1笔身

1.新建一个64 x 64px文档。将草图拖拽到新文档的画板中。在透明调板中把图像的不透明度设置为50.锁定图层,存储文档。新建一个图层开始绘制轮廓线。

2.使用圆角矩形工具新建一个圆角矩形,然后点击画板,设置圆角半径为10px,点击确定。

_ueditor_page_break_tag_

使用选择工具(快捷键V,下文中中直接使用双括号与英文字母表示),点击圆角矩形的边缘,然后把他拉伸与草图对齐,如下图所示。

* 选择圆角矩形,把填色设为无。

* 由于橡皮擦看起来要比笔身小,所以需要变动一下。有很多方法重新绘制橡皮擦,比如说用钢笔工具,但是,按照我的经验,这样的结果并不尽如人意。

选择圆角矩形路径。双击比例缩放工具,在对话框中选择等比缩放。把比例缩放值设置为96%。按照下图执行复制黏贴(我觉得应该事先复制以前的圆角矩形然后再执行比例缩放)

使用矩形工具在橡皮差的位置绘制一个新的矩形,在圆角矩形路径上层。

选择添加锚点工具(+)然后在矩形路径的中点位置添加锚点(在第五步中绘制),然后,选择删除锚点工具删除那两个顶点锚点。

选择椭圆工具绘制下图所示椭圆。

选择较大的圆角矩形路径和椭圆路径。点击路径查找器中的分割图标。图层面板中出现了一个新的组。分割后的路径属于这个组别。

在图层面板中选择这个新组下的两个路径,敲击Command/Ctrl + G对它们进行编组组中并锁定这个组。这样做是为了能更方便的删掉没用的路径。

选择分割路径的那个组,在右键菜单中选择取消编组。

删掉没用的路径,得到下图所示效果。

3.2金属环

就像做橡皮擦那样,这个路径我们将会用到一个比较大的椭圆路径,然后分割笔身路径,把金属环路径从笔身上分离出来。

现在铅笔的大致形状已经出来了,我想从这一步开始我们要调整细节了,我们要做的就是细化这只铅笔。

4.细节

使用圆角矩形工具和路径查找器面板绘制有笔尖的铅笔外轮廓线,我们这样处理路径是为了让笔身呈现为棱柱,看起来有棱有角。

使用圆角矩形工具绘制一个圆角半径为4pt的圆角矩形。(像步骤2b那样)

_ueditor_page_break_tag_

使用“贴在前面”命令(Command/Ctrl + F)复制一个圆角矩形,把路径副本移动到右侧。

选择这两个圆角矩形路径和笔身路径,然后点击路径查找器中的分割命令。

选择分割后的组,取消编组,删掉没用的路径,得到下图所示效果。

继续使用圆角矩形工具绘制一个新的圆角矩形,然后在笔身的中间位置使用分割命令,这样就得到了一个清晰地棱柱。

现在解锁图层2中的所有路径,然后给他们命名,如下图:

5.树立风格

现在我们要让这个图标变得更加的迷人,步骤如下:

5.1添加渐变

选择所有的路径然后使用渐变工具,然后去色板中选择一个从黑到灰到白的径向渐变。

选择每一个路径,使用渐变工具(G)在其中拖动,直至达到下图所示效果.

把所有的路径的描边都设为无,这样做是为了预览铅笔的大致效果。

呃...笔身的光影效果还不错,但是笔尖和金属环似乎还需要调整一下。

如下图所示,把这个路径的渐变设置为线性渐变。希望你能调出和我一样的效果,如果不行,你可以下载附上的源文件。

金属环路径应该紧紧地套在橡皮擦上,为了达到这种效果,使用添加锚点工具在金属环路径的两个顶点处再添加4个锚点,然后删掉两个顶点锚点,效果如下图所示:

金属环路径应该还有一点厚度,最简单的方法就是使用路径偏移命令,点击对象>路径>偏移路径。在偏移路径面板中,把偏移值设定为-1或者更校你可以勾选预览查看效果,然后点击确定。

注意:

路径偏移命令会在金属环路径上层复制出一个副本,然后你需要改变(位于副本下层的)金属环图层的渐变,以产生厚度感。

不管偏移的路径有没有用,默认名都是“路径”。_ueditor_page_break_tag_

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

调整金属环路径的渐变,敲击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,但是不管用什么,设计图标的目的都是一样的。我们必须保持一套图标风格一致,简单易懂。就像我在文章开头说的那样,要做一个精致漂亮的图标步骤就那么几步,原则就那么几条。

相关推荐