UIRSS.com UI聚合,聚合你我 - UI设计专业媒体和信息交流平台 - 人机交互 - HCI - 界面设计 - UI Design - 图标设计 - Icon Design - 交互设计 - HCI Design - 软件界面 - 人机界面 - 以用户为中心的设计 - 可用性 - 教程 - UI设计教程 - UI 设计 教程 - UI Design Tutorial - UCD -
 
首页
Home
设计鉴赏
Design Gallery
新闻中心
News Center
学习教程
Tutorials
网友作品
Submittions
下载专区
Downloads
 
  学习教程 - 图形设计 -
  ID: Password:   注册   找回密码 Search:
如果您有好的新闻线索请发上来和大家共享!
要是发现好看的设计,别忘了也发上来哦!
新闻及意见联系邮箱: AdminCenter[at]UIRSS.com
官方QQ群:1081792限量开放 (请先将个人作品发送到AdminCenter[at]UIRSS.com提出申请)
热门教程  Tutorials
  [理论] 一些非常不错的国外UI网址集锦
  [图形] PS“新视觉”风格的Logo
  [图形] Impossible GUI ...
  [图形] Vista包装风格的光束制作
  [图形] 三条设计准则
  [理论] 网页设计者值得一去的地方
  [图形] 如何产出高质量的图标 Wind...
  [图形] 质感高光-技巧设计教程
  [图形] Office2007新用户界面...
  [理论] UI设计师和视觉设计师的区别

HoudahSpot图标制作
From: UIRSS     Author: JJ.Ying(译)     Posted by: maxdison     Editor: maxdison     Time: 2007-1-17 11:58:29    
Designing the HoudahSpot Icon
Mac OS X软件开发者Pierre Bernard在二月份的时候联系我说他的搜索软件HoudahSpot需要一枚图标。这款软件是以Spotligh为引擎开发的搜索工具,前台加入了不少新功能比如在线咨询和搜索结果中的文件处理等,同时也引入了相对易用的用户界面。
概念阶段
对于图标的初步创意,Pierre已经有了自己的想法,那就是他标志性的纸和望远镜的组合。我的任务就是想出一些其他方案,并对其进行和细化,在设计上作一些指导以及做出最后的图标成品。在和Pierre初步讨论之后,我像往常一样在素描簿上画了一些铅笔稿。
第一轮草稿



我觉得是时候把纸张、望远镜和大象组合进图标了。于是我照着脑中的形象画出了一些草图,把Houdah标志性的大象放到厚厚的书上作封面,望远镜则斜躺在书上。而书里面随意地夹一些纸张,以不同角度伸出书本,代表用户的电脑经常处于混乱的文件组织状态。另外,我也试着加上了一个指南针。
第二轮草稿


Pierre和我自己都对这个初步的创意比较满意,所以就打算在此基础上进行细化。之后我进行了第二轮草稿,主要针对一个方案进行深入,同时为了保证计划的顺利,也着重选择了一个备选方案。
这一轮里,我把望远镜往右下角做了点位移,以使大象这个主要角色能更明显,而不必要的指南针则被我去掉了。随后我对书本的皮质封面做了圆角处理,把纸张稍微整理了一下使它们显得不那么乱。这一轮的草稿主要对内容进行斟酌,看起来还不错。
第三轮草稿


Pierre 有了一个新想法,那就是把望远镜从书本上移开,放到右侧,将完整的大象表现出来。我顺着这个思路马上画了草图,但很快就发现这样行不通,因为图标的平衡随之完全打破。原先望远镜以一定角度搁在书上显然是个更明智的选择。
着色


接下来的工作就是在电脑上用Fireworks做出图标的最终成品。首先我制作了完整的书本,因为我觉得这是整个图标的基础。封面的质感用到了一张皮革的照片,经过Photoshop和Fireworks处理后成为了材质基础,然后加入了高光和阴影,还有边缘的缝合线。同时,我也开始了书里夹着的纸张的制作。在图标2中,依据莱卡望远镜为原型我为图标加入了最后的元素。而在图标3中,我给纸张加入了更多细节,加宽了书本,并且修正了望远镜的倾斜角度。
图标成品
 


然后,我把工具从Firewors转换到了Photoshop,进行最终调整并且输出了.icns格式的文件让Pierre可以将其放置进程序当中。在Pierre的建议下,我把书脊上的高光去掉了,最后调整之后完成了整枚图标。
在文档图标中,我用到了主图标里的望远镜,并在顶部加入了皮革材质以使这两枚图标保持一致性。
 
结论
对于最后的程序以及文档图标,Pierre 和我都很满意。他们看上去比较友好,挺有亲和力的,于Houdahspot的主题比较契合。一位德国设计师Yoram Blember非常喜欢这个图标:
 
谢谢Yoram!
 
特别感谢Pierre Bernard和MakaluMedia选择和我合作制作这个图标。我们之间的合作始终非常愉快!
 
希望对于这次图标制作的描述对大家来说还有点帮助,尤其是对于那些有兴趣开发程序和文档图标的程序员们。
 
最后,如果您拥有Mac电脑又希望尝试一种更好的搜索方式,试试HoudahSpot吧!
版权声明   
Print   Back  
专家点评  VIP Comments
暂时没有专家点评!
网友评论  User Comments
mm jj,你是我的偶像。。。。。。翻译文章辛苦了,HOHO~~ 2007-1-19 9:43:24  
123 翻译文章辛苦了 2008-1-23 16:19:29  
星座网 我刚开始学用户体验。这个网站很不错。 2008-1-23 16:20:18  
发表评论  Add Comments
ID: *
Password: # 游客不需要填写. If you are a guest,keep it blank.
Website:
Security Code:
Content:
     
     
     
     
     
     

声明:网友评论仅代表个人观点,与本站立场无关,如果在评论中发现有任何反动,色情,暴力,诽谤,广告等信息,请即时与我们联系,我们将立即予以删除.
Pronouncement:All comments express the views of the author but not UIRSS.com.If you find any comments which are deemed as abusive,obscene,vulgar,hateful, slanderous,threatening,or which are otherwise in volation of any laws,please contact us.We will remove them as soon as we confirm them.
合作伙伴 visionunion MOP视觉 极限风筝论坛 图标海 CGFINAL 富图摄影 视觉联盟 RGBCN 设计之家