Icons are essential in any graphical user interface. They are effective visual cues for performing tasks or navigating to a certain location. There are many resources online that can help and inspire you in your own icon designs and - in this collection - we share some of the best tutorials on the topic.

       In this article, you’ll find a wide selection of tutorials and resources to help you learn about designing icons.

General Tutorials

1. The Making of an Icon

转载：http://uiclub.blogbus.com/

在网上看过很多设计师的图标制作过程,基本都是偏向技法的介绍.其实在图标设计过程中除了技法之外最重要的就是图标创意了,但这方面的系统介绍网上倒是很少.借这次实际的界面设计项目,来分享下我自己对界面图标制作创意阶段的方法的理解.并以丰富的图例来阐释自己的想法!以次作为图形界面设计师交流的引子!欢迎大家进来交流!

这个过程比较长,自己只能分阶段的准备好,发上来!快毕业了事情很多,多多谅解!
今天把部分草图放上来!创意说明后续准备.

第一部分：图标创意阶段

其实这个阶段之前还有个重要的步骤,就是创意准备.

根据项目需求,确定图标的风格,这在界面设计过程中,有风格评测的方法来确定项目是走什么风格路线.这也是项目前期用户研究的内容,有潜力的公司会制定"用户角色",用来指导界面视觉风格方向、界面内容建构和交互设计等！（这个内容以及超出这个话题.）

当我们接到设计任务后，我们怎么开始设计图标呢？首先我们要看懂界面需求，对每个功能图标的定义要非常清楚，否则我们设计的结果将导致用户难以理解，这个也是图标设计所关心的可用性问题！这在我博课里引用了Jakob Nielsen's Website里面的文章“Icon Usability”，大家可以去看看。差的图标设计最终导致用户界面的操作失败的体验。但视觉审美和可用性有时候存在矛盾的方面，我们不能走极端，只顾及可用性但忽视设计美观的一面，也不能追求设计上的美的需求而忘了这是功能性很强的界面图标，最好是能在两者之间取得平衡！

理解功能需求后，我们要收集很多关于“词语——图形”之间能转化的元素，用生活中的物或其他视觉产品来代替所要表达的功能信息、或操作提示。例如音乐：我们会想到，音符、光盘、音乐播放机、耳机等等。但到底选择什么来表达呢？原则上是越贴近用户的心理模型最好，用大家常见的视觉元素无来表达所要传达的信息。隐喻是在图标设计中是必要的思维方法！找出物与所指之间的内在含义，这就要求设计师对生活的细微观察，丰富的联想能力。当然这也就是设计的困难点，做好一个图标设计不亚于好的产品创意设计，包括最终的图标制作也是体现设计师能力之处，特别是现在高分辨率的显示设备大量应用，好的界面要得到用户的认可，高质量的图标设计比不可少！（难啊！现在对GUI设计的理解还只限于平面美工，管理者的意识往往关系到一个行业是否正常发展。我们的工作要得到认可，需要大家的共同努力！）

平面设计构成的三要素：点、线、面

色彩印刷构成的三要素：色相、明度、饱和度

点：点最主要的作用就是吸引视线，多点可以创造生动感。

1.点的视觉特性：

单一的点具有集中凝固视线的效用，容易形成视觉中心。多点会创造生动感，大小各异就更加突出了。连续的点会产生节奏、韵律，点的大小不一的排列也容易形成空间感。

<一>.色相对比的基本类型

两种以上色彩组合后，由于色相差别而形成的色彩对比效果称为色相对比。它是色彩对比的一个根本方面，其对比强弱程度取决于色相之间在色相环上的距离（角度），距离（角度）越小对比越弱，反之则对比越强。

1.零度对比

（1）无彩色对比 无彩色对比虽然无色相，但它们的组合在实用方同很有价值。如黑与白 、黑与灰、中灰与浅灰，或黑与白与灰、黑与深灰与浅灰等。对比效果感觉大方、庄重、高雅而富有现代感，但也易产生过于素净的单调感。
（2）无彩色与有彩色对比 如黑与红、灰与紫，或黑与白与黄、白与灰与蓝等。对比效果感觉既大方 又活泼，无彩色面积大时，偏于高雅、庄重，有彩色面积大时活泼感加强。
（3）同种色相对比 一种色相的不同明度或不同纯度变化的对比，俗称姐妹色组合。如蓝与浅蓝（蓝+白）色对比，橙与咖啡（橙+灰）或绿与粉绿（绿+白）与墨绿（绿+黑）色等对比。对比效果感觉统一、文静、雅致、含蓄、稳重，但也易产生单调、呆板的弊病。
（4）无彩色与同种色相比 如白与深蓝与浅蓝、黑与桔与咖啡色等对比，其效果综合了（2）和（3）类型的优点。感觉既有一定层次，又显大方、活泼、稳定。

1.光与色

光色并存，有光才有色。色彩感觉离不开光。

（1）光与可见光谱。光在物理学上是一种电磁波。从0.39微米到0.77微米波长之间的电磁波，才能引起人们的色彩视觉感觉受。此范围称为可见光谱 。波长大于0.77微米称红外线，波长小于0.39称紫外线。

（2）光的传播。光是以波动的形式进行直线传播的，具有波长和振幅两个因素。不同的波长长短产生色相差别。不同的振幅强弱大小产生同一色相的明暗差别。光在传播时有直射、反射、透射、漫射、折射等多种形式。光直射时直接传入人眼，视觉感受到的是光源色。当光源照射物体时，光从物体表面反射出来，人眼感受到的是物体表面色彩。当光照射时，如遇玻璃之类的透明物体，人眼看到是透过物体的穿透色。光在传播过程中，受到物体的干涉时，则产生漫射，对物体的表面色有一定影响。如通过不同物体时产生方向变化，称为折射，反映至人眼的色光与物体色相同。

一、色彩秩序配色法

组织一个比较完整、和谐的色彩秩序，如同乐团指挥调动整个乐队一样，若想使每一种乐器在乐曲中都能充分发挥自己的特长，那就必须首先有一个总的曲调，也就是乐曲的主旋律，根据主旋律来安排穿插配器与和声。如果指挥不利，有的乐器没能起到烘托主旋律的作用，或是需要的音响不能按主旋律的要求进行，没能将乐曲的主旋律充分地表达出来，那么，再好的音乐也很难有效地发挥其作用。色彩也是一样，没有孤立存在的颜色。若要使色彩完美，就必须依据色彩的主旋律，精心选择色彩要素，并通过烘托对比，及周围环境的对比映衬等方法，有效地合理地发挥色彩各要素的特点及作用，这样才能突出色彩主旋律，建立色彩美的特征。好像乐曲中的对比，有高有低，有强有弱，有平有缓。或是运用由弱到强递增的主旋律反复变化、以高音和弦等手法，将乐曲推向高潮；或是采取高潮过后，是一个非常平静悦耳的单音色等方式，将主旋律通过衬托对比表现出来，起到了感染人的作用，这就创造出了既有较强的对比效果又不失内涵的艺术魅力。

秩序训练法更偏重于用色彩来组织层次丰富、色调统一美的秩序。