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


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


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

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

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

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

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

最新评论

  • the market compare This site is like a classroom, except I don't hate it. lol 人脸标签!体验 Picasa 网络相册新功能
  • Kaylin Pra quem leva a sério esses argumentos desses links, é melhor nunca mais assistir um filme de Holywood. Todos sabem que Disney era conaorvsder para os padrões de lá. 人脸标签!体验 Picasa 网络相册新功能
  • Justice | | | | | inmidderen film izleme sitesi bedava filmler canlı film seyret binlerce filmler online sinema izletir beleÅŸ filmler filmini full izle ücretsiz sinema izleme sitesi filmini izle direk filmler son çıkan filmler vizyondan sonra full sinema izleme sitesi filmleri tam izle indirmeden bedava filim filmler full ve bedava 非常有创意的献血慈善广告
  • Mikel Congratulations on your spicy new name; and the expansion of your services.As a long time patron of ‘Chef Sazon’, I look forward to Roho Kitchen’s future success. Whether it is cooking classes, food and beverage pairing classes,event catering, or pop- up reratusants— I know that Roho Kitchen will always deliver an amazing culinary experience!. Semih Sayginer的开伦表演
  • Charlotte Gee willekirs, that's such a great post! 超牛的flash忍者游戏: N-Game

发表您的评论

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

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

目前有 38 条评论

  

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


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

As a Cherise-Aminecan, I used Sina Weibo a lot to connect with some old friends in China. It would be great to see Weibo is coming to the non-China version, too.


有 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