(翻译) HoudahSpot 图标设计

日期:2007 年 11 月 5 日理论 & 教程
图片载入中...早先在UIRSS上发表的一篇翻译稿,原文Maxdison找来的,特此感谢shy

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吧!



博文评论
微博 知乎 Twitter Dribbble Behance Instagram LinkedIn Unsplash