OOCSakana

六步画出好ICON

OOCSakana icon图标 5579浏览

很多新人朋友在画icon时都遇到了一些问题,不知道怎么评价自己画的图标。本文通过讲述图标的3个属性,结合实际例子,来分享画好图标的6个步骤。

一、前言

最近好几个朋友在画icon的时候遇到了问题,不知道从何入手,也不知道怎么评判自己画的icon。这里正好有一篇ICONFINDER的设计师写的文章,文章讲述了图标的三个属性,以及画好图标的六个步骤。

ICONFINDER和阿里推出的Iconfont图标库类似,可以搜索出各种图标,图标会分为“Free(下载免费)”“Premium(优质,下载需收费)”两类。

在本文的例子中,笔者会重新设计一个狗的图标(它的名字叫作Corgi)。这个图标对于“Premium”来说还不够好,笔者会提供一些简单的指南,稍作优化,这个图标已经达到了“Premium”的标准。

那么正文开始了。

 

二、图标设计的三个属性

好的图标通常会有三个重要的属性,而这三个属性在大多数设计中是共通的。在设计新的图标时,我会以迭代的方式考虑每一个属性。即使我只设计一个图标,这三个属性仍然是隐含的,能从单个图标中看出来。

1. 结构

“结构”是图标的基础形式。先不看图标的细节,在图标的主要形状周围画一条线,会构成正方形、圆形、水平或垂直矩形、三角形还是更有机的形状?最成功的图标设计往往有着简单的、可识别的图案或形式。主要的几何形状有:圆形、正方形、三角形。这些形状为图标设计创造了视觉上的稳定感。

2. 特征

图标的“特征”由单个图标和图标集共同的元素组成。这些元素包括圆角、直角、线宽、样式(平面型、直线型、纹理填充线型),色板,等等。

3. 辨识度

图标的“辨识度”指的是其本质或图标的独特之处。“辨识度”决定图标是否“有效”,即识别度和清晰度,也就是说用户能否轻松地识别图标所描绘的对象、想法或行为。“特征”和“辨识度”往往相辅相成,多个图标共同的辨识度元素形成了整个图标集的特征。

 

三、图标设计的六个步骤。

1. 始终从网格开始

不同大小的网格有各自的优势。在本文中,我们将使用32*32像素网格。我使用网格的时候,还会注意一些基本的规则,下图就是我设计每个图标时所遵循的基本规则。

网格的外部2个像素,我叫作“禁区”。除非绝对必要,否则我不会让图标的任何部分进入此空间。禁区的目的是在图标周围创造一些呼吸的空间。

圆形的图标从网格的中心开始。圆形的图标通常会触及内容区域的外面四条边,但是不会进入“禁区”。(图标的某些元素或小部件也可以超出该范围)

方形的图标也是从网格的中心开始的。但在大多数情况下,方形的图标不会一直延伸到内容区域的最外边缘。下图中有三个同心的正方形,分别为浅蓝色、橙色、浅绿色。我做的大多数图标会和中间的正方形对齐(下图中橙色的正方形)。而是否要对齐每一个像素方格由图标本身的视觉重量决定。

在32像素的正方形内,有两个20像素乘以28像素的矩形(见下图,一个垂直,一个水平)。我会大致遵循这两个矩形来设计图标,这样我的图标方向会相对一致。

也有通过对角线定向的图标(如下图)。请注意,图标“锯”最外面的点差不多和圆形的边缘对齐。这里你做的时候不需要非常精确,大概靠近就可以。

你不需要每一次都遵循上述网格和参考线。单个图标的优秀比整个图标的一致性更重要。网格可以帮助你保持图标的一致性,但如果设计超棒的图标需要打破规则,那就打破规则。谨慎一点就好。

 

2. 从简单的几何形状开始

设计图标的方法与画草图的方法相同:先用简单的圆形、矩形、三角形创建主要形状的大形。即使我的图标最终大部分是有机形状的,我也会从Adobe Illustrator中的形状工具开始。在制作图标时,特别是对于屏幕上较小的尺寸,手绘所带来的微小的边缘抖动会使图标看起来不精致。从基本几何形状开始有助于使边缘更精致(特别是曲线),也能快速调整设计中元素的相对比例,并确保图标遵循网格和形状。

 

3. 数据化:边缘、线条、圆角、曲线和角度

数字上不精确的圆角、曲线和角度为让你的设计看起来奇怪。所以,在涉及细节时,不要只用眼睛看或者手绘。这些细节的不一致性会降低图标的质量。

 

角度

大多数情况下,我会使用45°角或它的倍数。45°角的“消除锯齿”(Photoshop中使用选区工具时能看到这个勾选项)分布比较均匀(见下图)。45°角的完美对称性使其成为一种易于识别的特征,人眼看起来很舒服。45°角可以在图标集中构建一致性。如果情况不允许用45°角,我会将其一分为二(22.5°,11.25°),或者使用15°的倍数。每个图标案例不尽相同,所以要根据具体情况做出决定。使用45°角的一半的好处在于,这些角度的“消除锯齿”仍保持得不错。

 

曲线

曲线是最引人关注的地方之一。“高级/专业”和“业余”之前的差别往往在于曲线。虽然人眼可以看出精确度的微小变化,但人的手眼协调却不能总是达到高精度(下图紫色背景的图标为手绘的曲线,很不精致)。我会通过形状工具和数字来构建曲线,而不是通过手绘。当一定要手绘时,我会用Adobe Illustrator的约束修改键(Shift),或者使用Astute Graphics的VectorScribe和InkScribe来更精确地控制我的贝塞尔曲线,这样更好。

 

圆角

我通常使用2像素的半径。但是,你用的圆角半径值取决于你想表现什么样的个性。2像素的圆角,不是太大,但是给图标带来了更“泡沫”的外观。是否使用圆角是整个图标集特征的一部分。

 

像素级完美

“像素级完美”是现在图标和用户界面设计中的流行语。在设计小尺寸图标的时候,“像素级完美”很重要。小尺寸图标边缘上的“消除锯齿”会使图标显得模糊。没有与像素网格对齐的线之间的空间也变得模糊。图标边缘与像素网格对齐才能显得清晰完美,而通过精确的角度和曲线能更加清晰完美。不过,像素级完美并不是最重要的问题(至少对于消除锯齿、大尺寸和更高分辨率的显示屏,如Retina屏,来说)。

 

线宽

关于线宽,我认为2像素最理想,但有时也需要3像素。我通常选择2像素和4像素线宽。理想情况下,我尝试将图标中的每个值都保持为2的倍数。有时,单个图标的细节可能不满足这个规则,但我会尽可能遵守。尽量避免使用非常细的线条,尤其是字形和平面图标。除非你故意要创建线条形式的图标,否则不要依赖线条来定义形状。你应该使用光线和阴影来定义形状。

 

 

4.在图标间保持一致性和相同的调性

Dutch Icon的Hemmo de Jonge在2015年的Icon Salon上发表了精彩的演讲,并详细讲述了他的图标设计元素(见下图)。在他为荷兰政府开展的为期两年的图标系统项目中,Hemmo和他的设计合作伙伴在每个图标中都加入了“缺口”这一元素。不是每个图标都有缺口,但大多数都有。在图标集中统一地使用这种调性,可以使图标间产生更多的关联。

 

 

5.谨慎地使用细节和装饰

图标应该快速地表达物体、想法或行为。太多的小细节会引入复杂性,这会使图标不易识别,特别是在小尺寸的时候。单个图标(图标集)中的细节的详细程度是其特征和辨识度的重要组成部分。那么,什么才是图标(图标集)正正好好的细节程度呢?经验表明—只包含能使意义清晰的最少细节就是正好。

 

 

6.让你的图标独一无二

现在很多设计师过于依赖流行趋势,或者重复一些受欢迎的设计师风格。这会扼杀创意。作为创意专业人士,我们应该在图标设计以外寻找灵感,例如,建筑、排版、工业设计、心理学、大自然以及我们可以找到灵感的任何其他领域。现在很多图标集看起来都相似,所以,让你的设计独一就很重要。独特性还有助于使图标更易于识别。(注意下图狗狗鼻子的形状)

 

四、总结

这简单的6个步骤是大家设计图标的一个起点,并不是什么权威指南。笔者在本文中概括了自己的设计方法和知识,其他设计师当然也有他们自己的观点和技术。成为一个更好的设计师的最佳办法是尽可能地多看,多阅读,定期素描(可以随身带着素描本),还有就是,练习,练习,练习

(左边是原来的icon,右边是优化后的icon)

 

 

原文地址:紫说(公众号)

作者: 紫大文

zishuo qrcode

转载请注明:学UI网 » 六步画出好ICON

登录收藏
 
你可能喜欢的:
如何绘制图标如何绘制图标
从0到1——一组图标的诞生从0到1——一组图标的诞生
如何在Affinity Designer中创建一组扁平图标如何在Affinity Designer中创建一组扁平图标
如何系统的学习功能图标?续集如何系统的学习功能图标?续集
图标设计五维自检查法图标设计五维自检查法
如何设计风格统一的图标如何设计风格统一的图标
UI设计中扁平图标绘制的终极指南UI设计中扁平图标绘制的终极指南
图标设计总结(上) - 使用场景图标设计总结(上) – 使用场景
关于ICON,你知道多少关于ICON,你知道多少
渐变质感技法(四):教你用PS打造炫美风景精致图标渐变质感技法(四):教你用PS打造炫美风景精致图标