设计图标的几个技巧

2021-04-06
4726
0

作为一个UI设计师,画图标是日常工作中的比较重要的一部分,本期小编就来聊聊关于图标设计那些技巧。

 

图标的基本认识

图标是具有指代意义的具有标识性质的图形,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。

 

图标的分类

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

工具类图标,具有明确的含义、可以提示用户的图标,是工作中比较常用的图标。

装饰类图标,可能没有具体的含义,会带有活动、节日的运营目的。

我这次主要讲一下工具类的图标。

 

图标的类型

1、线性图标(单色、多粗细、多色、断点、渐变、叠加)

图片

 

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

图片

 

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

图片

混合图标除了我示意的这些,还有其他的样式,我就不一一列举了。以上图标是我用同一个基本样式来变化出不同风格,这样可以更好的对比,但是美观性上会略有牺牲。

 

 

图标的性格

简单知道了图标不同的绘制手法之后,就要了解图标的属性性格。
影响图标风格的主要因素有:线条的粗细圆角的大小颜色的使用

线条越细越感觉精致,线条越粗越感觉踏实;圆角越小越感觉硬朗,圆角越大越感觉可爱;颜色的使用就是颜色本身的感觉。

 

图片

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

 

如何画一个图标

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

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

 

第一步:确认风格

如果是在已经有的一套图标中增加几个图标,那风格和之前的保持一致就行;

如果是要自己从零开始画一套新图标,那么可以依据产品的调性去确定图标的风格。

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

图片

 

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

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

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

 

第三步:查找参考

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

图片

 

第四步:选取合适的参考绘制
找到一些觉得满意的参考之后,可以按照关键词,截图放在一起,然后选择比较好的,或者依照现有风格比较好提炼去进行绘制。这一步不是“抄”,而是借鉴参考,因为你直接“抄”不加任何修改,很容易整体风格不统一。
看到上面的参考会发现比较贴切的是外卖骑手的车,但是图标样式过于复杂,其他的图标虽然相关,但是表示外卖会有点牵强。这个时候就要继续联想,外卖一般都是装在盒子里面的,可以用外卖盒表示,再加一双筷子,会更加贴切。
图片 

 

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

 

大小统一

 

这里的大小统一不是指的物理尺寸的统一,因为人的眼睛会有视觉偏差,所以一般的大小统一是指视觉上的大小统一,说人话就是用你眼睛看起来是大小统一的。

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

 

图片

 

圆角、描边粗细统一

 

圆角要使用的统一的圆角,描边的粗细也要统一

 

图片

 

复杂程度统一

 

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

 

图片

 

不同颜色占比统一

 

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

 

图片

在调整完这些小细节之后,一个图标就绘制完成了。
以上就是本期分享的内容,希望对各位小伙伴有所启发~
转载声明:本文来源于网络,不作任何商业用途
免责声明:本文内部分内容来自网络,所涉绘画作品及文字版权与著作权归原作者,若有侵权或异议请联系我们处理。
收藏

全部评论

您还没登录

暂无留言,赶紧抢占沙发
王氏教育是国内专业的CG数字艺术设计线上线下学习平台,在王氏教育,有原画、插画、漫画、影视、3D模型等培训课程,也有学习资源下载、行业社区交流。CG数字艺术学习,来王氏教育。
绘学霸iOS端二维码

IOS下载

绘学霸安卓端二维码

安卓下载

绘学霸微信小程序二维码

小程序

版权声明
本网站所有产品设计、功能及展示形式,均已受版权或产权保护,任何公司及个人不得以任何方式复制部分或全部,违者将依法追究责任,特此声明。
热线电话
18026259035
咨询时间:9:00~21:00
在线客服
联系网站客服
客服微信:18026259035
公司地址
中国·广州
广州市海珠区晓港中马路130号之19
绘学霸客户端(权限暂无,用于CG资源与教程交流分享)
王氏教育 王氏教育