1. 主页
  2. 设计
  3. 让天下没有难做的图标

让天下没有难做的图标

当我回顾提交Iconfinder图标,我有责任对我们的设计师和我们的客户,以确保网站上的所有优质偶像是尽可能高的质量。但之间“不是很够好”和“优质”的差别往往是非常小的,通常需要最小的变化。在这篇文章中我已经蒸我的设计指导方针到六个简单的步骤,以更好的图标设计。步骤遵循声音图标设计的基本知识,并应被视为一个指导,而不是教条的规则手册。精明的设计师都知道,当他或她可以打破的最大的好处的规则。

在下面这篇文章中的示例图像,我会返工狗(一柯基犬是精确的),这是最近由名为克姆Bardly的Iconfinder用户提交的图标。所以我用一些简单的指针,按照提供的Kem和一点点返工,图标准备批准作为一个高级图标图标是不是高级相当受用。

图标设计的三个属性

那些精心设计的图标应遵循有条不紊的和深思熟虑的方式三大属性构成任何设计。当设计一个新的图标集,我认为每个属性的迭代方法。即使我只创建一个图标,这三个属性仍然暗示,可以从一个单一的设计外推。

  1. 结构-结构是底层形式的图标。如果你忽略了一个图标的细节和借鉴各地主要形状的线,他们是否形成方形,圆形,水平或垂直的矩形,三角形,或更有机的形状?最成功的图标设计遵循简单的,可识别的图案或形式。主几何形状-圆形,正方形和三角形-创建图标设计视觉上稳定的基础。

2.字符 – 的图标的字符由是在单个图标内和跨一个图标组共享的元素组成。这些元素之类的东西的圆形或方角,线宽,样式(平,线,填充线,或字形),调色板,等等。

3.身份 – 一个图标的“身份”是其本质还是什么使一个图标是唯一的。身份决定了它是否“作品”。的图标有多好作品的基础是承认或净度:观众是多么容易识别目标,思路,或行动其描述。性格和身份经常重叠。通过几个图标共享身份的元素成为一个集的字符的一部分。

这六个步骤

不同的网格大小的好处在自己的岗位是最好的处理-总是用网格开始。

对于这篇文章的目的,我们将使用32×32像素的网格。我也使用该网格包含一些基本的指南,以创建一个基本形式,我遵循对每一图标设计。

我的网外2个像素是我所说的“无禁区”。我避免有图标的任何部分进入这个空间,除非绝对必要的。无禁区的目的是创建一个围绕图标一些喘息的空间。

图标的结构的一部分是一般形状和方位。如果画一条线围绕的图标的外边缘 – 边界框,如果你将 – 的形状通常为方形,圆形,三角形,横长方形,垂直矩形或斜角定向矩形。

圆形图标都集中在网格中。圆形图标通常会触动所有四个内容区域的最边缘,但没有进入“无禁区”(但是这是打破这一规则的一种常见的情形,如果图标的一些口音或次要元素超出圈)。

方形图标也集中在电网,但不这样做,在大多数情况下,一路延伸到内容区域的最边缘。看看下面的广场布局图像。有淡蓝色,橙色,浅绿色表示三个同心的正方形。我的大多数图标将调整到中间的广场(橙色一个如下图所示)。当对齐到每平方米由图标本身的视觉重量确定,它只是需要实践来获得有关何时使用何种尺寸的感觉。

32像素正方形内,你会发现由28像素的垂直和水平的矩形的20像素。我松散遵循这些矩形对于那些水平或垂直方向,并尝试让这样面向任何图标的尺寸,这些矩形的28像素大小为20像素的匹配图标。

如下面的图所示斜角定向的图标对齐到圆形内容区域的边缘。请注意,锯的最外点大致对准圆的边缘。这是你并不需要确切的区域,接近是不够好。

请记住,你不需要每次都按照网格和参考准确。作为Hemmo德容格,更好地称为荷兰的图标,说,“远远超过一套凝聚力的重要性,每个单独的图标的本质”。电网是有帮助你让你的图标一致,但如果选择的是做一个图标伟大和遵守规则之间,打破规则-只是这样做谨慎。

用简单的,几何形状开始

设计图标绘制草图以同样的方式:通过创建简单的圆形,长方形和三角形第一大形状的毛坯形状。即使我的图标要结束了在本质上主要是有机的,我开始在Adobe Illustrator形状工具。当谈到做图标,尤其是对于屏幕尺寸较小,在被手绘导致边缘的细微变化让图标看起来不那么精致。基本的几何形状开始有助于使边缘更精确(特别是沿曲线),帮助我迅速调整设计中的元素的相对规模,确保了我下面我的网格和形式。

3的数字:边,线,角,曲线和角度

尽可能不使你的设计看起来过于机械而乏味,边角,曲线和角度应该是数学上的精确。换句话说,按照数量和不要试图眼球或当谈到这些细节写意它。不一致这些元素会降低图标的质量。

在大多数情况下,我坚持45度的角度,或它们的倍数。在45度角的抗混叠是均匀台阶(有源像素排列的端至端),这样的结果是脆和该角度的完美对角线性质是容易识别的图案,其中将人眼喜欢非常许多。此识别的模式建立一个单一的图标内跨越图标集和统一的一致性。如果我必须打破这个规则,我尽量在半(22.5,11.25等)或在15度的倍数这样做。每个案件是不同的,所以我做这在对案件逐案基础上使用的决定。使用45度半的好处是,在抗锯齿的步进仍然是相当均匀。

曲线

一,我觉得会降低图标的质量,使高级版/专业和业余的前瞻性之间的差异最显着的地区是曲线。虽然人眼可以精确检测非常轻微的变化,人的手眼协调能力总是无法达到较高的精度水平。我靠形状工具和数字来创建曲线尽可能多的,而不是试图用手工绘制它们。当我需要手动创建曲线,我使用的Adobe Illustrator的约束修饰符键(Shift键),或者甚至更好,VectorScribeInkScribe通过精明的图形即使在我的贝塞尔曲线更精确的控制。

角落

我并不总是使用圆角,但是当我做,我通常使用2像素的半径。但是,您选择的值取决于你希望你的设计有个性。我用2像素半径角落,因为角落都清晰圆润,但没有这么多,它使图标更“泡沫”的样子。无论你是否使用圆角被制作成一套整体性格的一部分的审美决定。

像素完美

像素完美的图标和用户界面设计这几天流行的术语,但它是非常重要的,特别是对设计小尺寸的时候。上的图标的边缘抗锯齿小尺寸可以使图标出现模糊。线之间的空间不对齐到像素网格将反锯齿和变得模糊。对准图标像素网格,使边缘完全脆直线上,并在精确的角度和曲线更脆。正如我在前面段落中所提到的,45度角是第二最佳直线,因为用于限定角度的像素被堆叠,或阶梯式的,端 – 端完美对角。相同的是角部和曲线的真:越数学上精确,更脆的抗混叠会。应当指出,然而,像素完美是一个不太重要的问题,至少对抗锯齿的,对于较大规模和更高分辨率的显示器一样的视网膜。

线宽

当谈到线宽,我发现,2点线的权重是理想的,但3有时是必要的。超过3个和一组会失去它的凝聚力。我更喜欢2个像素和4pixel线宽。理想情况下我尽量保持每一次测量中的图标2的倍数偶尔的图标的个别细节可能需要打破这条规则,但我会坚持下去,尽可能。在大多数情况下,非常薄的线是要避免的,特别是字形和平坦的图标。除非你刻意营造线条样式的图标,你不应该依赖于行,以定义形状。你应该靠光影来定义形状。

使用统一的设计元素和跨口音图标

荷兰图标的Hemmo德容格了精彩的谈话,在图标沙龙2015年,他在长度谈到图标设计的这个元素。在荷兰政府他2年和计数图标系统项目,Hemmo和他的设计合作伙伴纳入每个图标的“缺口”。不是每个图标有缺口,但大多数人。这种口音的,跨图标集保守,但坚持使用可以真正帮助扳平集在一起。

使用细节及装饰难溶

图标应迅速传达对象,想法或行动。太多的小细节带来复杂性,它可以使图标更不容易辨认,尤其是在较小的尺寸。细节的你在单个图标或一组图标包括水平也可以是图标/图标集的字符和身份的一个重要方面。用于确定一个图标/图标集细节的适当水平一个很好的规则经验法则是只包括使意思明确所需细节的最低限度。

使其独特

看来,创造非常有才华的设计师图标的数量,实在是高品质的图标集,其中很多是免费的,每天都在增加。不幸的是,很多那些设计师都是依靠太倚重以下现有趋势或复制的风格最流行的设计师。作为创意专业人士,我们应该寻找的图标设计行业以外的架构,排版,工业设计,心理学,性质和其他任何领域,我们可以找到的灵感。因为这么多图标集长得很像这些天,这是更重要的是让你的设计是独一无二的。唯一还有助于使图标更容易识别,这是一个图标的身份的一个重要方面。

这些简单的步骤应该被看作是一个起点,而不是作为一个明确的指导。有设计图标也有多种途径。我对这篇文章有我自己的办法的基础设计,但其他设计师肯定有自己的见解和技术概述。要成为一名优秀的设计师,最好的方法是看尽可能多的东西,你可以读很多东西,经常写生(我带着速写本处处与我),和练习,练习,再练习。

更新于 2018年12月4日

帮到你了吗?

相关文章