四季 RSS 图标创作记录

日期:2009 年 7 月 21 日理论 & 教程

图片载入中...


年初为 Helloicon 创作了一套图标,名为"Seasonal RSS Icons"。利用零碎的时间前前后后花了一个多月完成了这套以四季为主题的图标,数量不多共五枚(四个季节加上一个不带装饰的),主要作为网站推广用。目前已发布在国外教程网站 Tutorial 9 网站上提供免费下载。

之前的本年度博客调查中很多朋友提了不少宝贵意见,包括让我多写点平时设计时的感想,所以这里简单记录一下这套图标从创意到最后完成的一些过程


创作目标
这套图标围绕着 RSS 展开,主要是作为网页的装饰,希望能够让其用在各类 Web 2.0 的网站上。因此创作之初就决定不为小分辨率制作优化的版本。在图标还没成型前,我希望的风格是用各种写实的元素让图标看起来更吸引人,而在保证基底不变的前提下,想把代表四个季节的图标能通过造型和颜色尽量区别开。


设计灵感
把四季的概念融入到 RSS 图标中是我偶然间想起来的一个 idea,但是之后又在午餐闲聊时间中和同事们进行了多次交流,才慢慢定下了我想要在四个不同季节中需要用到的元素。都说画图标难,但更难的知道自己要画什么样子的图标,在这个阶段的准备工作对于图标质量绝对是很有影响的。

相信很多朋友都和我一样在设计图标前会找很多同类的作品来参考和分析,学习对手的同时,也寻找自己的突破点。但是某次和 Rokey 的合作让我了解他在灵感阶段和我的一贯做法有些许不同,那就是他不会把灵感来源局限于相关的或者同类的 GUI 作品,正式开工前他给我发了很多和项目看似无关的照片,有些可能只是颜色比较协调,有些可能是某个物件的质感比较特别。总之从完全不同的东西中寻找界面设计的灵感的确对我来说非常新鲜,也让我学习了不少。


图片载入中...
从网络上收集的和自己拍的一些素材



正式在Photoshop中展开工作之前我去 sxc.huGettyimages 等图片网站上找了一些素材和参考。个人觉得 Gettyimages 和 Flickr 上的图片质量更高,sxc.hu 虽然图片质量很一般,但基本都是免费的,所以后期要在作品中用上的话也会少掉很多版权的烦恼。


所使用的软件
最近工作中被迫大量地学习 AI 来做界面设计,对于AI比以前熟悉了不少。但是个人创作的时候我还是习惯 PS,在公司里也是出了名的“只会用 PS”。虽然这样的“偏科”不是好事,但我倒没有觉得丢人,在对源文件没有要求的情况下,使用的设计软件只要顺手就好。

图片载入中...



以往我一般在 PS 里以路径+图层效果为主,但这套图标在风格上需要更多的写实元素,所以实际上应用了一些图片素材,并且也很多地用绘图板手工描绘一些细部的明暗。上面这张图片就是把这套图标里的所有图层加了描边然后透明填充之后的样子,基本上可以看作是 AI 里的"Ctrl + Y" 呵呵。这里面边缘锐利的基本就是钢笔工具勾的路径,模模糊糊的基本就是用画笔直接画上去的部分。


创作过程
为了表现一更多的细节,所以用上了下面这样一种透视,变形不至于很夸张,但也能有点纵深,感觉更立体一点。另外考虑的一点是之后的那些元素的摆放,这套图标的重点在于表现季节,但 RSS 基底作为主要的表意部分也必须能把 RSS 的 logo 给比较完整地呈现出来。  颜色上作为 RSS 图标通用的橙色自然是首选,随后加上一点普通的高光和阴影就做成了下面这个基底。

图片载入中...



在确保图标元素不至于太杂,但又要丰满的情况下,我最终决定选取的组合大致是每个季节用一种植物 + 一种动物 + 标志性景色。

春天图标的制作主要难点在这块草地上,在尝试了一些手法后最后使用了一张草地的照片作为材质,然后用手工画出来轮廓作为草地的蒙版。最后用路径制作了一些单独的小草来点缀。

图片载入中...



夏天图标是这四枚中我反复得最多的一个,因为一直对水池的倒影和涟漪效果不满意,弱化处理么感觉不太像是一滩水,做得效果太强又感觉画面有点杂乱。最后折中了一下做成现在这个样子。荷花使用路径勾出来,然后不断复制做成的,而蜻蜓和荷叶都是以画为主。

图片载入中...



秋天里的这堆枫叶全都是从照片里抠图然后变形放置在图标底部的。倒是这只松鼠是路径做身体+手工加毛完成的。本来在图标背后藏了一枚果子是为了表现松鼠在秋天藏了不少食物以备冬天用,但可能是因为缺少细节的缘故,同事们纷纷表示看不出来那个是啥东西,呵呵。

图片载入中...



冬天里的这堆雪的质感推敲了几次,在加入雪人之前本来有很多积雪,但是雪人这个大物体已经遮挡了很大一部分背后的RSS logo,所以后来还是舍弃了很多。

图片载入中...




后记
因为自己也算是第一次尝试用绘图板来加强图标的细节,所以不是很纯熟。另外时间比较有限,很多地方也没有深入下去了,做完之后回过头来看看还有很多地方值得改进,比如雪人比例不是很好,透视有待改进,整体看起来不太活泼,蝴蝶的颜色也不够鲜艳,比较山寨,等等等等,也希望大家能帮我指正。虽然把文章放在了“教程”分类当中,但如名字“创作记录”所述,是希望起个抛砖引玉的作用,和大家交流一下思维过程,而不止是一部接一部的写详细做法    :D


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