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

老肥在这里先感谢大家对我的支持,前三篇文章给我带来了相当多的访问量和订阅量:) 但是,为了避免审美疲劳效应,还是不要拖得太长,之前我都在讲设计和鉴赏,第四篇用实战操作来做结。
相关的 logo 设计、欣赏将来我会另开话题——欢迎订阅!(什么是订阅)

首先搞清楚两个概念:
256 色:图像中最多含有 256 种颜色,且只有 1 位透明通道,换句话说,一个像素只有透明和不透明两种状态。常见的例子是 GIF 和 PNG-8。
带 α-channel (8位透明通道) 的真彩色:除了颜色数的提升外,最重要的是引入了半透明,一个像素可以有 8位(2^8=256)透明状态。常见的例子是 PNG-24。

一个图标文件(.ico) 可以含有多种尺寸和格式的搭配,用来适配各种显示需求。以 Google Desktop 的 favicon 为例,用 图标工具 打开它可以看到这两种格式都有:

alpha-channel.gif

右边 PNG 图标里的像素有很多种透明状态,它可以更好地抗锯齿,更好地适配不同颜色的背景,而左边的 GIF 格式无法兼顾这两方面:

anti-aliasing.png

PNG 相对 GIF 来讲没有弱点,为什么他们会并存?因为很久以前 8 位透明并不被广泛支持,现在不同了,制作图标完全没有必要再带上 256 色 GIF。特别是上图那样带有曲线边缘的图标。

了解了格式,再来看看要点:

  • 作图的时候要在大一点的画布上画,写字也是。满意了再缩小到 16x16,或者交给 图标工具 去缩小。
  • 缩放的时候要用重新计算像素的方式,不要用邻近像素的方式
  • 为了图标文件不至于太大,可以只含有 16x16, 8 位透明真彩色 这一种格式。32x32 或者更高的尺寸在建立 .url 快捷方式图标时会用到,根据情况可以添加。

OK,看到这里想必您已经对 favicon 的制作相当了解了。PS 一下,前些天看到个篱的 Gtalk 状态信息显示“我在听什么歌”,问了一下才知道,Google Music Trends 就是靠它实现的,去访问了一下这个音乐趋势,发现它的 favicon 也很别致,呵呵。

再 PS,我宣布收回在第二篇里说过的“请不要扔给我一句:帮我搞定”,好像伤害到了某些朋友的感情 :P 我当初只是怕请求太多没法一一帮助。看完我的教程还是不太明白的朋友尽管留言,我一定尽力帮忙!

最新评论

  • 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
  • Doc And I was just wonrdeing about that too! 我在使用的 Android 应用程序(三)

发表您的评论

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

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

目前有 22 条评论

  

写得好详细,连我这个白痴也觉得懂了些。谢谢你的icon,:-)


fisio 回复: 不客气,呵呵,我去你那发现你的图标有点锯齿就帮你重新生成了一下,没做别的。。。

这四篇教程很不错,我也准备跟着实践一下。
我已经把订阅地址切换了,看着没有被更改的链接就是爽。


fisio 回复: 看到啦,我还没打算切换订阅地址,哎,就这个吧

很出色的系列文章呢...哈,等想好主题后自已努力弄一个出来:)

鼓掌鼓掌!

学会了,考虑给自己blog做个ico

我在看!!!!

大叔今天又迟到了~文章写地很食用,继续学习并期待下五.


fisio 回复: 大叔。。。我开篇就说这是系列末篇啦

对图形图像处理软件天生排斥。一切交给:
http://tools.dynamicdrive.com/favicon/
处理。
另:帮我看看我的三叶草favicon有没有锯齿,谢谢。


fisio 回复: 没有,很好的

哈哈,受教了。

好的,支持,打算为自己的BLOG制作一个图标.

继续收录!

全收藏下来,好好研究。

写的真好!
我喜欢这种有内容的原创文章!
嗯,打算也尝试一下~

唉,说真的,我不喜欢这一系列的文章,害得我一定要更换自己的favicon,哈哈

这个系列太棒了,真是我想要的。

干脆你好人做到底,亲自做两个挂出来不就行了.和QQ表情一样,应该有人很喜欢……

这个网站不错,本人有这样一个域名,favicon.com.cn 想找人合作,或者转让,有兴趣的设计师可以联系我。谢谢


fisio 回复: 为何这样一个站却没有自己的 favicon? 呵呵

能帮我修改一下吗?呵

位置低了一点,也就是说上边空白比较多,然后笔画粗一点,就差不多啦

你好啊,老肥兄,方便给我做一个favicon吗?内容是一个圆角框 里面一个“潍”字。是wfbbs.com的favicon。

如果百忙之中能帮我做作,不胜感激啊。 :)

我的QQ 56573011 谢谢啊


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

  1. 11年5月29日如何为博客设计一个出色的 favicon « 粽