简易措施,更好地图标设计

网站建设 2016 07月20日 发布

像Iconfinder图标矢量交易市场(我工作的地方)正在精心设计的矢量图标为网络和印刷设计师廉价的且容易获得的资源。高品质的优质图标集千数百伟大的自由集可用。

提交Iconfinder每个图标集是审查和评估潜在的呼吁我们的网站用户和潜在的商业价值溢价的图标。在审查提交给该网站图标集,我们有责任对我们的设计师和我们的客户,以确保在网站上所有优质偶像是最高质量的。为了实现这一目标,我们不断地意识到之间的差别“不够好”和“高品质”的差别往往是非常小的,通常需要最小的变化,但对图标的设计和价值有很大的影响组。不像许多其他市场,我们很少拒绝集,不太符合我们的质量要求顾左右而言他。相反,我们将共同为设计师如何能提高的图标非常具体的,可操作的建议。


本文讨论了一系列的六个步骤设计指南。步骤遵循声音图标设计的基础知识,包括一致性,可读性和清晰度。有效的图标设计的原则已经在长度希克斯设计的图标设计师约翰·希克斯在他的著作中的图标手册由谷歌在系统图标的材料设计准则问题,以及。本文中讨论的六个步骤应该被看作是一个指导,而不是规则的教条式的列表。成为一个伟大的设计师的部分是学会何时打破规则,当跟随他们,我们将在这里展示。

在下面本文中的示例图像,所讨论的六个步骤将被应用到最近被评为克姆Bardly的Iconfinder用户提交的狗(一柯基犬,是精确的)的图标的返工。图标有潜力,但不是很够抛光,被认为是“高品质”。我们提供的Kem一些简单的提示跟随,并用少许改造,他的图标准备批准作为溢价图标集。下图显示了之前和之后的版本克姆的图标。在下面的章节中,我们将介绍如何从有条不紊之前去了。

之前和之后的柯基犬图标改造

上述左侧的图像显示原始图标。右边的图片显示了重新设计的图标,这点在本文实现的原则。  

注意,虽然本文中讨论的准则是面向网络图标,它们一般适用于打印图标为好。印刷材料的典型300点每英寸(DPI)使得像素完美基本上无意义。如果你是一个打印设计看这篇文章,所有涉及的原则是适用的,但你可以在很大程度上忽略像素的完美作品。

三个属性有效的图标设计链接

那些精心设计的图标呈现出有条不紊的和深思熟虑的方式三大属性构成任何图标设计:形式,审美统一和认可。当设计一个新的图标集,考虑每一个这些属性的一种迭代的方法,从一般(表格),并移至特定的(可识别)。即使你创建一个图标,这三个属性仍然暗示,可以从一个单一的设计外推。

毫无疑问,以上三个属性构成有效的图标设计,但三个下文详述是一个良好的开端。对于相对简便起见,我们把重点放在我们认为是三个主要属性。

FORM LINK

形式是一个图标的底层结构,或它的制作过程。如果你忽略了一个图标的细节和借鉴各地主要形状的线,做他们形成了一个正方形,圆形,水平或垂直长方形,三角形或以上的有机造型?主要的几何形状 - 圆形,方形和三角形 - 创建图标设计在视觉上稳定的基础。在我们通过克姆Bardly柯基犬例如,狗的头部是由两个三角形和两个椭圆。作为沟通的概念是必要的,但只有尽可能多的细节 - 就像人会开始通过绘制最大的,最简单的形状,然后走向更大和更详细的改进图纸,人们将开始从最简单的形状的图标,然后添加更多详细信息被代表,是一个对象,想法或行动。

柯基犬图标形式背后

此图像中的关键行显示定义设计的形式基本基本形状。  

美学UNITY LINK

被一个图标内和跨图标组共享的元素是我们所说的审美统一。这些元件之类的东西圆形或方角,角部的具体尺寸(2个像素,4像素等),有限的和一致的线宽(2个像素,4像素等)中,式(平,线,填充线或字形),颜色调色板等。一组的审美统一,是您在整个一组重复直观地绑在一起作为一个整体的设计元素和/或选择的集合。在下面的例子中,注意从每个克姆的一套共同的要素,诸如2像素圆角,狗的脸部周围2像素厚中风和心脏形的鼻子三条狗的。

三狗图标显示的审美统一



这三个狗图标有着共同的设计理念和风格元素,创造审美的统一。  

可识别LINK

可识别性是一个图标的本质或什么使一个图标的独特的产品。无论是图标的工作最终还是要看观众如何轻松地领会它描绘对象,想法或行动。可识别包括表示该观众通常与该主意相关联的属性,但它也可以包括作为唯一的或意外的元素,如心脏的哥基的鼻子。请记住,可识别性不仅指被描绘的对象,想法或行动的理解,同时也认同你独特的图标集。在这方面,审美统一和认同就可以了,经常做,重叠。在下图中,我们认识到每两只狗为柯基犬和哈士奇,分别,因为其独特的颜色,头形和耳朵,同时还承认他们是同一组,因为共享的设计和风格元素的一部分。

orgi和哈士奇图标

每只犬的独特气质使他们的个人可识别的,而普通的设计和风格元素让它们识别为一组。  

到目前为止,我们已经看过了我们认为是有效的图标设计的三个主要属性。在下一节中,我们将深入探讨在六个步骤妥善解决关切的这三个方面。

六个步骤链接

具一格LINK始终启动

各种栅格尺寸的好处将最好的一个单独的项目来处理。对于我们而言,我们将有一个32×32像素网格工作。我们的电网还包含了一些基本的指南,以帮助我们创建的每个图标设计的基本形式。

之前和之后的柯基犬图标改造

在这里,我们看到了一个32×32像素的网格,具有2个像素的边框(或“无禁区”)的喘息空间。

网格的外部2的像素就是我们所说的“无禁区”。不要把图标的任何部分,在这个空间里,除非绝对必要的。无禁区的目的是创建一个围绕图标一些喘息的空间。

图标的形式的一部分是一般形状和取向。如果你周围画一个图标外缘线 - 边界框,如果你将 - 形状一般是正方形,圆形,三角形,呈横长方形,竖长方形或对角线的矩形。

圆形图标居中在网格和通常触摸内容区域的最外边缘的所有四个,无需进入无禁区。请注意,对于打破无禁区规则的一个常见原因是,如果某个口音或次要元件需要以保持设计完整性超出圆延伸,如下证实。

与显示网格和关键线路调整圆形图标

与电网圆形图标和关键线路的对齐 

方形图标也集中在网格但不这样做,在大多数情况下,一直延伸到内容区域的最外边缘。为了保持与圆形和三角形的图标一致的视觉重量,最长方形和正方形图标将对准在中间的关键线路(以下图像中的橙色区域)。当对齐到由图标本身的视觉重量确定各重点线;为获得时所使用的大小只需要练习的感觉。看看下面的广场布局图像。上面提到的三个同心正方形显示在淡蓝色,橙色和浅绿色。

圆形和方形图标的网格

圆形和方形图标的相对网格对齐和调整大小 

32像素的正方形里面,你会发现20×28像素的纵向和横向的长方形。我们遵循松散这些矩形对于那些水平或垂直方向,并尝试做出这样面向任何图标尺寸的图标,来匹配这些矩形的20×28像素的尺寸。

在网格纵横图标

的垂直和水平定向的图标相对于栅格对准和上浆 

对角线定向的图标对齐的圆形内容区域的边缘,如下图所示。请注意,该锯的最外点被大致对准的圆的边缘。在这里,你不需要是精确的区域;接近是不够好。

面向斜网格上的图标

对角线定向图标相对于到网格对齐和调整大小 

请记住,你并不需要按照网格和每一次准确地指导。网格是有帮助你做出的图标一致,但如果你有做一个图标伟大和遵守规则之间进行选择,打破规则 - 只是这样做谨慎。由于Hemmo德容格,由他的绰号荷兰图标更广为人知,说:

胜过一套凝聚力的重要性,每个单独的图标的本质。

入手简单几何形状LINK

通过粗略概述简单圆形,长方形和三角形的形状主要开始你的图标设计。即使一个图标最终将会在本质上主要是有机的,开始在Adobe Illustrator形状工具。当谈到制作图标,特别适用于较小屏幕尺寸,在边缘,从手绘图产生的细微变化将使得图标看起来不那么精致。基本的几何形状开始将会使边缘更精确(尤其是沿着曲线),并允许你在设计中调整元素的相对规模的迅速,以及确保您遵循电网和形式。

柯基犬的图标的基本几何形状

以下是一些基本几何形状,两个三角形和两个椭圆,构成柯基犬图标。

由数字:边缘时,发现线条,边角,曲线和角度LINK

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

在大多数情况下,粘到45度的角度,或它们的倍数。在一个45度角抗锯齿均匀地踩(有效像素对齐端对端),所以结果是脆,和完善的对角线这个角度是一个很容易识别的模式,这对人的眼睛很喜欢。这种识别的模式建立一个图标内横跨图标集和统一的一致性。如果您的设计决定了你必须打破这个规则,尝试在半这样做(22.5度,11.25等)或在15度的倍数。每一种情况是不同的,因此通过的情况下决定的情况下。使用45度半的好处是,在抗混叠的踩踏仍然会相当均匀。

45度角抗锯齿的特写

45度角正规抗混叠特写

曲线

一种能降解的图标的质量并且能够意味着专业人员和业余的前瞻性之间的差的最显着的领域之一是低于完美曲线。而人眼能够检测精度非常轻微的变型中,手眼协调不能总是达到的精度高的水平。依靠形状工具和数量来创建曲线尽可能多的,而不是通过手绘他们。当你需要手动绘制曲线,使用Adobe Illustrator中的(或矢量软件)约束修饰符键(Shift键),或者甚至更好,甚至超过贝塞尔曲线更细化的控制使用VectorScribe和InkScribe通过机敏的图形。

手绘图角落产生较差的结果

手绘图角落产生较差的结果。  

正如我们在看到上面的图片“以前”,手画线形成了一个从设计质量减损不规则的曲线。

数学精确的曲线

这些非常精确的曲线用,而不是被手绘插画的贝塞尔工具创建的。

一个常见的圆角(或半径)值是2像素。在一个32×32像素的图标,2-像素半径大到足以清楚地看到如圆形,但不软化的角那么多,以改变设计的个性(赋予该“泡”的样子)。您选择将取决于个性的价值,你想给的设计。无论您使用圆角将被做考虑集的整体美观审美决定。

正是圆角

正是圆角

已经开始与几何形状,我们现在已经增加了2像素的轮廓,演示了如何形状工具,在细节的一致性沿如圆角,正在改进设计。

柯基犬图标,迄今取得的进展

迄今取得的进展我们重新设计的柯基犬图标

这大大改善版本显示了新设计的要点,以均匀地圆角,平滑曲线和耳朵周围的线路的权重的基础。


如没特殊注明,文章均为善微网络原创,转载请注明来自https://www.sanways.com/news/184.html