如何为博客设计一个出色的 favicon (二)
本篇说说最常见的单字母/汉字构成的 favicon。上面这些除了比较饱满的 W,挖,易,其它都不同程度做了修饰,而圆角方框是最常见的方式。像 M,B,西,是类似阴文印章的风格,好处是比搜狗 S 那样的阳文少一道边框线;而且既可以做成 B 那样端端正正的,也可以像 M 和西那样内外相通。
同样是阴文印章,豆瓣的 favicon 就比西祠差很多了:撑得太满,且字体不合适。豆这个字上下都有分离的横,一不小心就把它们弄丢了。第一眼我真的看成了“一只”。后面几个图标在字体、颜色上也都各有特色,和各自网站风格很搭配。阴文印章是最简单的样式,只需要简单的颜色、字体搭配就可以收到很好的效果。
下面是一个阴文印章的实例,如果用 Photoshop 的话会用到圆角矩形工具 (U),文字工具 (T),图层样式,裁切工具 (C)。
还有一种用得比较多的是镂空字体,有点类似于华文彩云,这是另一种让字符饱满起来的办法,很好的例子就是最上面的“挖”。
也给一个镂空文字的实例, 这个做起来更简单,选好字体,在图层样式里描边并视情况更改填充透明度,裁切到 16×16,存为 png,用图标工具存为带 α-channel 的图标就可以了。
OK,说完了两种用字符来画 favicon 的思路,今天就到这里吧,下次有空再说说带图形的。作图过程没有详细讲,如果您没有什么基础的话可以查查资料,有问题可以问我,但是请不要扔给我一句“帮我搞定”……
好早啊….
学到了,什么时候把我的照你说的改改
你也早哦 :)
加个链接吧。
Done:D
“帮我搞定”是说我吧。。。。
走了,伤自尊了。。。
哈哈 哥们切勿对号入座!
我把背景改了改,阿肥哥帮我看看咋样~
嗯,边缘太锯齿了,有大图吗,我帮你试试?
这句话是我说的 : ( 不过真的太感谢老肥啦!
赞!都不时很难的ps操作啊:)不错:)
94,加工字符还是挺省事的~
好强!我是一点PS都不会呀。。。
contact里面那个小人画出邮箱地址的图是怎么做的?
试试这个: http://tools.fodey.com/generators/animated/ninjatext.asp
你这里不接收pingback啊??
真抱歉,yo2 的trackback 坏好久了…
记号。
想问一下favicon做好了之后,怎么加到blog上去。。。
最妥当的是命名为 favicon.ico 放到网站根目录下。指定路径也行,但 IE 里就显示不出来了
来迟了,谢谢肥硕还帮我设计了一个如此漂亮的favicon~感动ing
不客气,我还怕简陋了拿不出手呢:D
好教程,学习之。
我用IE。根本看不到favicon。
地址栏前面,收藏夹,也有的嘛:)
我准备改成红色SB两个大字,也不要扭扭捏捏talk啥的了,2i2j的i,j我已经江郎才尽了,哈哈。还是你搞的好看,我就是瞎搞搞
汗你这俩大字…
“用图标工具存为带 α-channel 的图标就可以了。”是什么工具?我做的的都不透明的
我用的是 Icon Developer, 其实类似的工具非常多。做出来的不透明可能是源图像本来就没有透明背景,或者加工图标的时候出了错,嗯
看了这个,但是我还是不知道怎么设计我的图标,没有艺术细胞我~
恩,不错,期待下一篇~
赞!强烈的赞!
看了我得仔细去弄弄我的favicon,太简陋了~
PS:你说yo2.cn可以上传文件到根目录呢?怎么上传啊?欣喜若狂中~
试过了,也不是根目录,IE 下的问题还是谬解决…其他浏览器可以正常显示的,一直
学习了,觉得自己的松树icon也挺好看的,虽然不是自己弄的,:-)
不错,原来小A的图标是你作的啊
hehe,正是
挺实用的
强人啊,要多来这里学习学习。
哇 传说中的左飞!
呵呵,写的真好
那把图标生成以后怎么让这个图标显示在地址栏前面呢?=^=^=
命名为 favicon.ico 放在网站根目录下
帅哥啊,问下内个冰的字体是什么啊?我找了一堆,没有类似的…郁闷…
我想做一个字的ico,”光”,想用黑底白字,有没有推荐的字体啊? 还有内个”冰”内个ico的做法,能不能详细教俺一下啊.谢谢啦.
非常感谢啊…
好像叫 文鼎pop-4 来着?
哈哈,这个教程不错。
这个兔子套装是你设计的?真不错 :p
不是……很多人问这个问题,呵呵,我把链接加在页尾了 🙂
🙂 不错。学习了。
先锋部落格拜访,顺便留下自己的足迹
就算大图很美好,可要怎样在16×16上搞得光滑 :O