做了个Favicon:也说说像素级设计
偶然想给这个空间加个图标,因为按我用Chrome的习惯,
一定要带图标的网站我才放到Ctrl+B的那个书签栏上。
这种尺寸(以16×16为主)的favicon网上有无数个,
但想放个有自己特点的icon当然还需要自己去做一个。
.ico格式不是photoshop默认支持的,随便搜了一下,就有篇文章给出了一个让ps支持ico的插件。
打开ps建了一个16×16的图片,并放大了1700多倍(好囧…)
想到既然现在Blog的名字叫鹏翔昊天,那就取“鹏”字来做icon吧,
然后用12号的大小打了个鹏字上去,没加任何修改前是这个样子的:
实在是难看死了,这个要是放在网站上,我自己都不愿意去访问。
改吧。还是在1700倍的视图下,用一个单像素的画笔这加一点那减一点,
同时想到了分成两个区域,两种颜色交替当作前景与背景色,于是有了这个:
感觉好看一点儿了,但堂堂一个鹏,好像给人一种在笼子里面挤着的感觉,实在不舒服,
于是想,最好是把最外的一圈像素留下来不用。
但在15×15的范围里面表达信息更加困难,干脆我原来的都不要了,用单像素的画笔重新写这个字。
右侧的“鸟”字实在让我费尽了心思,不得不承认,简体字实在难看得让人恶心:
盯着它越久越能感到它的丑陋!
于是结合着繁体的风格去写,然后改了半个多小时,才渐渐的满意些了。
改的过程中我为自己订了一个原则,就是同一个颜色不允许出现2×2的方块,这样才有均匀的感觉。
当然,因为鹏字笔划较多,我才这样规定的,换个字也许就不适用了。
改到最后,出现了一个比较神奇的现象:
因为想让人感觉宽松些,所以左边的两个月都是上下各留了一个像素,如:
但这样怎么看都觉得右边的比左边低些。但如果把左边都向下移一个像素,又明显更不协调了:
而这些,都是在1700倍的视图下无法发现的,实际像素视图也不准,
只有存成ico文件后,在“详细信息”下看感觉才最准,因为边上有了文字,与在网站上感觉很相似。
最后无意中想了一个办法,就是在两个月字的左下角各加一个像素,成了:
本来这样是不符合我最初的设定的:因为除了这两个像素,最外圈都是没有被文字占用的。
但没想到,检查了一下,觉得这样却是最满意的,于是就放在网站上了。
也许你觉得这样也并不好看,但这的确已经比前面的有进步了,这就足够啦。
啰嗦了这么多,主要是想总结一下自己的体会:
在像素的级别,因为包含的信息量太少,所以人的眼睛总会自作主张补充一些内容或感觉进去。
这时候无论从客观上讲是多么的不合理,也是要以眼睛为准的。
不管多么简单的设计,都必须要考虑到人的心理,因为视觉上的设计唯一的对象就是人。
另外,在放大的视图上怎么看都已经很好的情况下,说不定在实际像素下却非常糟糕,
所以不能怕麻烦,要经常切换着视图看,当然,ps的导航器是可以实时显示实际结果的。
很巧的是,就在刚刚做完这个不久,
因为找一个手机用的程序而来到了cnpda上,发现它的favicon也是这个风格:
后来又找书去了国图的网站,
发现它们的favicon也是这个风格的(长得很囧吧~):
觉得有些共鸣,也略记一笔。
最近也一直愿意看一些web设计方面的内容,觉得很多效果都是出自细节的。
尤其是一些给人质感很强的风格,其实往往就是一两个像素的功劳。
但真正能够画出这一两个很绝妙的像素,还需要深厚的视觉心理学功底,
这就是设计的大师们之所以是大师的原因。
这方面有机会一定要深入学习一下,个人认为,现在无论是web还是本地的应用,
UI的重要性已经完全不亚于功能本身了,尤其在一些功能已经可以达到基本要求的领域。
极端的讲,如果你的产品连界面都做不好,我完全有理由相信你的功能也不可靠,至少我连试用都懒得用。
匿名 14:35 on 2010/01/22 链接地址
I think that step by step is the best way to make progress.It is also the key to success. Do you think so?Study hard and make progress steadily!
Your mother