如何为博客设计一个出色的 favicon (二)


本篇说说最常见的单字母/汉字构成的 favicon。上面这些除了比较饱满的 W,挖,易,其它都不同程度做了修饰,而圆角方框是最常见的方式。像 M,B,西,是类似阴文印章的风格,好处是比搜狗 S 那样的阳文少一道边框线;而且既可以做成 B 那样端端正正的,也可以像 M 和西那样内外相通。


同样是阴文印章,豆瓣的 favicon 就比西祠差很多了:撑得太满,且字体不合适。豆这个字上下都有分离的横,一不小心就把它们弄丢了。第一眼我真的看成了“一只”。后面几个图标在字体、颜色上也都各有特色,和各自网站风格很搭配。阴文印章是最简单的样式,只需要简单的颜色、字体搭配就可以收到很好的效果。

下面是一个阴文印章的实例,如果用 Photoshop 的话会用到圆角矩形工具 (U),文字工具 (T),图层样式,裁切工具 (C)。

还有一种用得比较多的是镂空字体,有点类似于华文彩云,这是另一种让字符饱满起来的办法,很好的例子就是最上面的“”。

也给一个镂空文字的实例, 这个做起来更简单,选好字体,在图层样式里描边并视情况更改填充透明度,裁切到 16x16,存为 png,用图标工具存为带 α-channel 的图标就可以了。

OK,说完了两种用字符来画 favicon 的思路,今天就到这里吧,下次有空再说说带图形的。作图过程没有详细讲,如果您没有什么基础的话可以查查资料,有问题可以问我,但是请不要扔给我一句“帮我搞定”……

最新评论

  • 增肥 目前很多人都开始注意饮食中的营养,甚至细算食物中的营养含量。不过,即使这些都已经做的很好,大多数人却发现身体的变化还是没有相对的进展,还是不能长胖。 我为什么爱 Twitter
  • 高午饭 博主现在的社交网络有么,想关注您呢 我为什么爱 Twitter
  • 西贝博客 很好的建议!谢谢分享! 如何为 blog 建立一个高效的标签系统
  • 苹果 老罗露脸了,哈哈,支持他现在的事业 我为什么爱 Twitter
  • 飞之梦 不错,第一次看到这些效果,以后要用一用了。 CSS 文字阴影在网页设计中的应用

发表您的评论

您的评论将回复给 原评论者

:D:):O8):(8D;DXD:P:nice::rainbow::cafe::love::cake:

目前有 37 条评论

  

好早啊....
学到了,什么时候把我的照你说的改改


fisio 回复: 你也早哦 :)

加个链接吧。


fisio 回复: Done:D

“帮我搞定”是说我吧。。。。
走了,伤自尊了。。。


fisio 回复: 哈哈 哥们切勿对号入座!

这句话是我说的 : ( 不过真的太感谢老肥啦!

赞!都不时很难的ps操作啊:)不错:)


fisio 回复: 94,加工字符还是挺省事的~

好强!我是一点PS都不会呀。。。

contact里面那个小人画出邮箱地址的图是怎么做的?


fisio 回复: 试试这个: http://tools.fodey.com/generators/animated/ninjatext.asp

你这里不接收pingback啊??


fisio 回复: 真抱歉,yo2 的trackback 坏好久了...

记号。

想问一下favicon做好了之后,怎么加到blog上去。。。


fisio 回复: 最妥当的是命名为 favicon.ico 放到网站根目录下。指定路径也行,但 IE 里就显示不出来了

来迟了,谢谢肥硕还帮我设计了一个如此漂亮的favicon~感动ing


fisio 回复: 不客气,我还怕简陋了拿不出手呢:D

我把背景改了改,阿肥哥帮我看看咋样~


fisio 回复: 嗯,边缘太锯齿了,有大图吗,我帮你试试?

好教程,学习之。

我用IE。根本看不到favicon。


fisio 回复: 地址栏前面,收藏夹,也有的嘛:)

我准备改成红色SB两个大字,也不要扭扭捏捏talk啥的了,2i2j的i,j我已经江郎才尽了,哈哈。还是你搞的好看,我就是瞎搞搞


fisio 回复: 汗你这俩大字...

"用图标工具存为带 α-channel 的图标就可以了。"是什么工具?我做的的都不透明的


fisio 回复: 我用的是 Icon Developer, 其实类似的工具非常多。做出来的不透明可能是源图像本来就没有透明背景,或者加工图标的时候出了错,嗯

看了这个,但是我还是不知道怎么设计我的图标,没有艺术细胞我~

恩,不错,期待下一篇~

赞!强烈的赞!

看了我得仔细去弄弄我的favicon,太简陋了~

PS:你说yo2.cn可以上传文件到根目录呢?怎么上传啊?欣喜若狂中~


fisio 回复: 试过了,也不是根目录,IE 下的问题还是谬解决...其他浏览器可以正常显示的,一直

学习了,觉得自己的松树icon也挺好看的,虽然不是自己弄的,:-)

不错,原来小A的图标是你作的啊


fisio 回复: hehe,正是

挺实用的

强人啊,要多来这里学习学习。


fisio 回复: 哇 传说中的左飞!

呵呵,写的真好

那把图标生成以后怎么让这个图标显示在地址栏前面呢?=^=^=


fisio 回复: 命名为 favicon.ico 放在网站根目录下

帅哥啊,问下内个冰的字体是什么啊?我找了一堆,没有类似的...郁闷...

我想做一个字的ico,"光",想用黑底白字,有没有推荐的字体啊? 还有内个"冰"内个ico的做法,能不能详细教俺一下啊.谢谢啦.

非常感谢啊...


fisio 回复: 好像叫 文鼎pop-4 来着?

哈哈,这个教程不错。
这个兔子套装是你设计的?真不错 :p

不是……很多人问这个问题,呵呵,我把链接加在页尾了 :)

:) 不错。学习了。

先锋部落格拜访,顺便留下自己的足迹

就算大图很美好,可要怎样在16×16上搞得光滑 :O


有 6 篇其他博客的文章引用了本文

  1. 07年7月5日教你用纯命令行做简单的文字 favicon
  2. 08年3月2日城堡迷路的挪威
  3. 08年3月4日电车上的玫瑰花
  4. 08年5月21日可凡网志 » 网站logo和favicon图标及在线工具
  5. 08年12月27日冒牌的 K2 风格 at catch the digital flow|北极冰仔部落格
  6. 12年1月19日粽 如何为博客设计一个出色的 favicon