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


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


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

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

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

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

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

最新评论

  • fisio 可不,Google Reader 都去世十年了… Google Reader 的分享和效率
  • 轻重 天哪!今天整理Evernote,发现这条2010年的剪藏笔记,点击连接,原网站还在!12年了,中文互联网早已面目全非! Google Reader 的分享和效率
  • 小波 重新改博客,看看以前的wp小伙伴的博客,发现绝大部分都关了,没想到你的还在,只是停在11年了 我为什么爱 Twitter
  • 心灵博客 当年有这个效果已经很不错哦 diy 山寨投影家庭影院
  • fisio 可不咋地!您也是老司机了 我为什么爱 Twitter

发表您的评论

评论将回复给

😀🙂😯😁🙁😄😆😝😜👍🌈💖🎂

目前有 54 条评论

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

  1. 赞!强烈的赞!

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

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

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

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

    非常感谢啊…




还有 6 条 pingbacks 从其它网站引用了本文