五步教你画图标,看看我的“独家秘籍”

这不仅仅是一篇经验,而是前辈用日积月累得工作心得,用笔记用脑想,最重要得是要走心。还有我是占位符不是简介。

作为一个UI设计师,画图标是日常工作中的比较重要的一部分,那么图标的作用是什么?如何画图标?我来偷偷告诉你我的画图标“独家秘籍”。

五步教你画图标,看看我的“独家秘籍”

图标的基本p # r E V ~认识

图标是具有指代意义的具有标识性质的图形,它不仅是一种图形t 0 K V 2 \ . z,更是一种标识,它具有高度s C m . & b a浓缩并快捷传达信息、便于记忆的特性。

图标的分类

图标主要分为工具类装饰类

工具类? e ~ &图标,具有明确的含义、可以提示i C l k用户的图标,是工作中比较常用的图标。

装饰类图标,可能没有具体的含义,会带有活动、节2 z D n \ H 4 [日的运营目的。

我们这n N D P次主要讲一下工具类的图标。

图标的类型

1、线性图标P z 6 z 5 Z Q(单色、多粗细、多色、断点、渐变、描边叠加)

五步教你画图标,看看我的“独家秘籍”

2、面性图标(单色、多色、渐变、叠加)X % R

五步教你画图标,看看我的“独家秘籍”

3、混合图标(面线混合)

五步教你画图标,看看我的“独家秘籍”

混合图标除了我示意的这v 3 s 4些,还有其他的样式,我就不一一h % B S – P / a (列举了。

以上图标我是用同一个基本样式来变化出不同风格,这样可以更好的对比k M 4 E,但是美观性上会略有牺牲。

图标的性格

简单知道了图标不同的绘制手法之H f p r后,就要了解图标的属性性格。

影响图标风格的主要因素有:线条的粗细圆角的大小颜色的使用

线条越细越感觉精致,线条越粗越感觉踏实;圆角越小越感觉硬朗^ e Z 9 ] } X,圆角越大越感觉可爱;

颜色的使用就是颜色本身的感觉。

五步教你画图标,看看我的“独家秘籍”

绘制图标时选择哪种性格可以依据产品的定位来确定,比如二次元、儿童教育类的就适合活泼可爱的图标,奢侈品牌类的就适合高端精致的图标。

如何画一个图标

了解了那么多的基础知识之后,该如何画一个图标呢?

下面告诉大家我画图标的“独家秘籍”2 ~ . r W,以画一个「外卖」的图标为例。

第一步:确认风格

“如果是在已经有的一套图标中增加一个,那风格和之前的保持一致就行,] Q ! K f 1 w m (如果是要自己从零开始画一套新图标,那么可以依据产品的调X ! * ~性去确定图标的风格。”

那么我这次的例子是要在一套图标中增加一个图标,所以风格直接统一就行。

五步教你画图标,看看我的“独家秘籍”

第二步:罗列关键词、联想词

外卖联想词:吃饭、美食、米饭、面条、盒饭、碗、餐具、吃

这一步要发散思维,相关的词汇都可以列出来,不断的发散

第三步:查找参考

接下来就是按照上面几个关h e . u F键词去网上疯狂的找参考,我一般会X k h @ K去「Iconfont」「花瓣」看直接相关的图标参考,[ D F @ \有时候会用「度娘」看一些实物的参考,但是基础不够的话,看实物提炼会J V ;有点困难,还是直接看图形参考会更直观。

五步教你画图标,看看我的“独家秘籍”

第四步:选取合适的参考绘制

找到一些觉得满意的参考之后,可以按照关键词,截图放在一起,然后选择J _ ^ 1 _ E C \比较好的,或者依照现有风格比较好提炼去进行绘制。这一步不是“抄”,而是借鉴参考,因为你直接“抄”不加任何修改,很容易整体风格不统一。

看到上面的参考会发现比较贴切的是外卖骑手的车,但是图标样式过于复杂,其他的图标虽然相关,但是表示外卖会有点牵强j B g @ &。这个9 j q } s l 3时候就要继续联想,外卖一般都是装在盒子里面的,\ 8 3 * C M +可以用外卖盒表示,再加一双筷子,会更加贴切。

五步教你画图标,看看我的“独家秘籍”

第五步:调整细节

画出了大概的样子,最重\ / x ! 1 I X m ;要的一步就是调整细节,按照统一的风格去修改。比如大小统一、圆角统一、复杂程度统一、描边的粗细统一、不同颜色的视觉占比统一等等。

图标的统一性

大小统一

这里的大小统一不是@ | d U A 0 n u指的物理尺寸的统一,因为人的眼睛会有视觉偏差,所以一般的大小统一是指视觉上的u R S大小统一,说人话就是用/ 4 a { – t Z你眼睛看起来是大小统一的。

我一般会使用同一个尺寸的底板来控制图标的大小,例如都用一套图标都用48×48的底板,在绘制图标的时候不要整个填充,要留有一定的间隔,那么图标在绘制的时候可以依据视觉进行调整,从而达到视觉统一。(网上也C 1 ` W k有很多推荐使用图标栅格的,如果是想走技术流的可以c ^ Q –自行百度“图标栅格”)

五步教你画图标,看看我的“独家秘籍”

圆角、描边粗细统一

圆角要使用的统一的圆角,描边的D d \ $ +粗细也要统一

五步教你画图标,看看我的“独家秘籍”

复杂j ] V T D m 7 S !程度统一

复杂程度就是一个图标是简约的还是复杂的,基本的线条多少,或者色块的多少,要大致统一,这样看起来才是一套的图标。

五步教你画图标,看看我的“独家秘籍”

不同颜色占比统一

使用颜色要统一,每个颜色在图标中的占比要大致一样。

五步教你画图标,看看我的“独家秘籍”

在调整完这些小细节之后,一个] & I ) 2图标就绘制完成了。

) h f z .上就是我画图标的步骤,以及一些画图标时的注意点。

感谢观看~

下期预告:如果进行界面排版?格式塔原理了解一下?

Powered by Froala Edi{ _ { P K ] h 2tor

上一篇 2021年5月15日 下午10:06
下一篇 2021年5月15日 下午10:07