经验分享:10个超赞的图标设计技巧

标签: 界面& 图标设计 经验分享 Icon设计 图标设计 PS 教程 & 设计文章 | 发表时间:2013-04-24 01:15 | 作者:aricworks
出处:http://www.uisdc.com

@AricWorks 将某一事物的特征概括出来成为图标是一件非常有意义的事,一眼就能识别事物的特征是不容易的,特别是设计需要48X48像素时,如何让它跟256X256像素一样清楚。一个令人难忘并且具备隐喻的图标是漂亮的、标志性的,富有意义和功能性。

关于如何创造卓越图标的十个建议:

捕捉对象的特征

对于icon design 最重要的一点是当你设计出一个图标,用户能不能立即辨认.无论是青蛙还是铅笔,它所表达意义的识别性,必须一目了然.必须具备经典的隐喻特征。

在一本杂志的图标教程里,图标大师Vu(scrape.sk)和Min Tran(frexy.com)讨论了他们关于铅笔图形的背后进程:

“图标需要突出对象的最典型特征,表现它所表达的概念和细节。
正如你所知:铅笔一般有三种选择:

1、棱柱形的笔身、光泽釉涂层

2、棱柱形的笔身、尾部橡皮擦、白色金属环

3、圆柱状笔身,没有橡皮擦

我们选择第二种,应为它具备所有的必要元素,用户更容易识别。有时候,一些对象会更为复杂,或者更加简单,你必须列出它们的特点,画出具体的形象。橡皮擦、白色金属环,这是铅笔的特征,使它们成为表现铅笔形象的“经典”。

让图标简单、通用 . 从而让它适应一系列项目 .

对于图标设计师DryIcons(dryicons.com)来说,设计图标的关键在于让图标尽量简单.瞄准一个风格和目标.这有助于让软件开发者更加灵活的使用图标,增加图标的可用性.

如果你的图标设定范围更广,可以使用在首页或其他地方,那它的潜在市场会更大.

“关于趋势,我们觉得保持图标的简单和基本特征是非常重要的,我们遵循这个趋势”——DryIcons

使用一致的光源

一个特别有用的技巧:当你在设计一系列图标时,不紧紧要在风格上一致,像“光源”这些细节也需要注意.虽然这是次要的,但这会影响图标的整体质量。在 Windows Vista 里面,图标会在操作系统间有不同的光源,但每一个单元的图标是一致的。

创建矢量格式的图标( Argument 1

图标通常在一个尺寸范围内使用,因此创建一个视觉效果很棒的可缩放矢量图形,可以有多种用途.(ps:在缩放到需要尺寸后,像素会磨损,所以需要对路径进行调整,精确到每一像素)

当你需要不同尺寸时,矢量绘图可以让你不需要重绘.(ps:矢量绘图软件有photoshop、Illustrator、Fireworks、CorelDraw、Xara Xtreme等)

不创建矢量格式的图标( Argument 2

相反:矢量绘图并不是图标设计师们的最佳方法(ps:我一般结合着用)由于许多icon需要非常小的尺寸,矢量往往不能很好的呈现,所以必须在指定尺寸内重绘(我的理解是:图层复杂、绘制时用到像素、多细节的图标改变尺寸时,必须重新绘制)

Wui设计师Firewheel对此的看法:位图vs矢量

“当你把一个原本24X24px的矢量图形缩小到16X16px,有办法可以把24个像素均匀的分布到16个像素呢?答案是否定的,所以图像模糊.同样也没法将24px均匀扩大到32px.

所以当你把24×24像素的图形扩大到48×48,你将不再会有一个清晰的像素线,他们都是模糊透明的两个像素线.”(关于小标:腾讯QQ、人人主页、jodanfc、r.sky、blacksnail等国内设计师的作品都很不错)

注意文化差异

Turbomilk(turbomilk.com)的经典例子,不同的国家有不同的邮箱

“图标的另一个重要方面就是图标拥有民族特色.不同国家的文化传统,环境和手势等都会有所不同.”—Turbomilk

要特别注意:这一规则在设计预警图标和交通标志时,每个国家的根据都有所不同。

使用别样的色彩组合

如果icon的颜色很平淡普通,那它就会被忽视.图标脱颖而出的方法就是:使用很棒色彩搭配和有趣的形状.记住,图标很伤在单一的背景下显示,所以他们需要站出来.除此之外同时还可以使用更多的光泽和适当的阴影来使它尽量动人.(ps:jjying和kidaubis的作品尤为突出)

Jasper Hauser( Camino icon designer )(www.jasperhauser.nl )接受采访时说到:什么是一个好的图标设计.

“好的图标需要两个良好的基础:1,形状 2,颜色的使用 (ps:我认为必须在画出一个完美的图形(形状有趣,不能有锯齿等等)的基础上,再去添加它的颜色,绘制它的质感)

如appzapper(www.appzapper.com)图标所示,你看到它有一个基本的形状,使用了多种颜色搭配,如果你做一个蓝色的圆圈则不会脱颖而出。

设计 icon ,从大尺寸图标到小尺寸,图标要一样清楚.

艺术家Brian Brasher在Firewheel Design接受的采访:

FD:如何让图标变大,但在不同的分辨率下都显示清楚?(ps:依次画出各种尺寸,标准尺寸1024,512,256,128,56,48,32,16,按需制作,不必框死,jodanfc的作品尤为突出.我的经验是:在绘制不同尺寸时,可将最基本的形状进行缩放,然后对齐像素,微调后,再重新上色绘制质感和细节)

BB:大图标意味着很多细节,具有丰富图形用户界面的设计师会将各种尺寸一一画出,如果抛除尺寸的限制,那意味着很多大小的图标看起来会很模糊,最恐怖的就是图标在低于32px时.

(ps:绘制小标时要省略不必要细节,在16或12等px时可以使用正视,只要能看出隐喻即可,不必跟大标一模一样)

仔细规划出你的设计过程

从想法到想法跃然纸上(建立纸面原型)使其符合隐喻和项目需要,然后仔到软件绘制,确定它的尺寸大小等这些过程规划是很重要的.

Michael Matas( Mac OS X platform icon designer)分享了他自己的工作方法:

“开始我总是在白板上画.我试着画出良好的图标和明确的隐喻.我勾勒出不同的想法

各种idea总会覆盖整个白板.当我想出一个很好的比喻后,我就去开始画出图标的布局和构图,我会想用什么角度(透视)去表现它.我在谷歌图片里搜索一切可以利用的照片,再对着照片根据自己的想法将它画出来,直到理想为止.然后我在ps中绘制路径.搜索图片,可以帮助我获得纹理和形状的想法.如果我可以,我总是试图通过实物获得灵感.

(ps:我也是,当有实物照片时,你就能更好的掌握图标的细节,质感、纹理等.生活中要注意观察,我每到一个地方都会仔细观察,看有没有好玩的物体,结构,纹理等可以为我的设计服务,然后拍照)

创造一个有趣的富有隐喻的图标 .

图标是富有含义的图形符号,因此隐喻是影响用户行为的关键点。
下面是一个团队关于一个图标集的隐喻讨论,感兴趣的大家可以去看,在此就不翻译了。
一个人的idea有限,所以对于一些较难表现的图标、重要项目的图标,有必要进行脑暴并且跟客户交流沟通,而不是直接让一个icon designer埋头做。

补充:

如果你是一个初学者,你必须勤奋,要多画,多看好作品,少交流,有一定基础后,遇到各种瓶颈,可以去请教他人.好的designer人品都很nice,只要你问,他们都会耐心的去帮助你。
或者你也可以去iconfans,跟大家交流,那里有各种教程.你也可以加入iconfans特工队跟大家一起做练习。
除此之外,较好的美术功底(敏感的光影和色彩搭配技巧,良好的手绘技巧等)也是画好icon所必须的。

最后一点:要以一个专业图标设计师的要求来要求自己。
我相信只要你记住这些,然后用“心”去画,坚持下去,你就可以成为一个“awesome icon designer”!

================ 关于优设网================
“优设网uisdc.com”是一个分享网页设计、无线端设计以及PS教程的干货网站。

特色推荐:
设计讲座:定期邀请国内互联网公司的设计前辈及行业总监在群内及YY语音(YY频道: 15335158)分享实战经验。
设计微博:我们拥有粉丝量26万的人气微博 @优秀网页设计 ,欢迎大家关注及时获取设计资源。
设计导航:史上最赞最全面的设计师必备网址导航: http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以扫描下方二维码快速添加:

youshege

 

优设哥向您推荐:

PS教程:快速制作木质图标外框

推荐!UC浏览器新Logo设计经验分享

网页设计中图片格式的选择技巧

百度MUX:引人入胜的引导页设计

经验分享:一些photoshop的基础知识
无觅

相关 [经验 分享 图标设计] 推荐:

经验分享:10个超赞的图标设计技巧

- - 优设(UISDC)
@AricWorks 将某一事物的特征概括出来成为图标是一件非常有意义的事,一眼就能识别事物的特征是不容易的,特别是设计需要48X48像素时,如何让它跟256X256像素一样清楚. 一个令人难忘并且具备隐喻的图标是漂亮的、标志性的,富有意义和功能性. 关于如何创造卓越图标的十个建议:. 对于icon design 最重要的一点是当你设计出一个图标,用户能不能立即辨认.无论是青蛙还是铅笔,它所表达意义的识别性,必须一目了然.必须具备经典的隐喻特征.

分享20个很棒的 Photoshop 图标设计教程

- 刘潇 - 博客园-首页原创精华区
  图标是网页设计中的重要元素. 适当的使用图标能帮助你实现一个在你的客户看来非常专业的网站. 图标的大多数都很小,需要注意很多的细节,因此设计出高质量的图标是一项很具有挑战性的. 今天,本文向大家推荐20个很棒的 Photoshop 图标设计教程. (编译来源:梦想天空  原文来自:20 Fresh Icon Design Photoshop Tutorials).

留英经验分享

- 木頭 - ss1271的奋斗
据说今年申请英国留学的人数再创新高,我来英国也快一年了,最近看到街头很多眼神中充满期待的新生,分享些经验:. 本经验分两大类:行前准备和到英国之后的衣食住行介绍. 全部例子以本人所处的Newcastle upon Tyne为准. 在签证拿到前购买机票还是在签证拿到之后购买各有利弊. 签证拿到前购买,最后可能导致机票改签,请斟酌.

iOS升级经验分享

- - 技术改变世界 创新驱动中国 - 《程序员》官网
作者认为,及时关注、快速反应、覆盖测试是面对iOS系统升级时最重要的三大原则,文中还详细分析了iCloud Storage和Automatic Reference Counting这两大iOS 5新特性. 2011年10月初,iOS 5正式发布,带来了大量新特性. 随之而来的是大量应用需要针对iOS 5系统进行升级适配.

2010 图标设计趋势

- armgod - IconMoon
天冷,人懒,事多,我就不全文翻译了. 只列几个标题,很多内容完全按照我自己的理解写了一下. 想读原汁原味的请移步:Icon design trends 2010 作者是  Denis Kortunov. 和现代女人的罩杯一样,图标也越来越大了. 原因很简单,不管是桌面设备还是手持设备,dpi逐渐变高,高像素的图标变得必不可少了.

我的2011年考研经验分享

- zealken - 褪墨
我去年考的研,一路走来,各种意外事件不断,最后好歹把整个流程走了下来. 虽然最后没过初试线,但这一年的历程还是给了我不少难以从别处得到的经验. 成功的经验固然好,我这失败的经验更能给人启发. 我报考的北大ccer,因为我对经济理论比较感兴趣,既然研究生又要上三年,不如选个好点的学校考考. 这里我要说的是,很多事情,如果不去尝试,很可能自己把自己吓着.

经验分享:如何写好文案

- - 优设(UISDC)
哈密:不知道大家有没有看过这样一个视频:. 视频最后说“change your words,change your world”,由此可以看出文案的魅力. 好的文案可以吸引用户,并带来转化率的大幅提升. 那么我们就来讨论一下,如何写出好的文案. 假如你生产了一款最新的手机,有800万像素摄像头,1080p分辨率的显示屏,可以进行超高清拍摄,还能编辑和分享.

Mac软件和学习经验分享

- - Starming星光社最新更新
Office 2011(word, ppt, excel) - 不用在虚拟机里面折腾了. Keynote - 这才是 PPT 神器. PreziDesktop - Prezi,ppt神器二号. Adobe Acrobat - 编辑pdf. TimeLine 3D - 基于时间轴的展示. Skim - 浏览pdf,虽然可以编辑,但是并不是保存到 pdf 文件本身.

【seo经验分享】seo的思维

- - 人人都是产品经理
思维决定着出路,seo的思维决定着我们优化的最终成败. 用户体验度以及搜索引擎蜘蛛体验,才是我们思维中应放在第一位的内容. 面对着搜索引擎的不断变化,中文搜索引擎优化工作越来越难作. 百度,一个善变的搜索引擎平台,让许多作中文搜索引擎优化的个人或是公司吃尽了苦头. 2012年一年,百度让更多的作搜索引擎营销的人们不再相信seo,认为作seo不稳定,不能很好的给他们带来流量.