如何为博客设计一个出色的 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 我当初只是怕请求太多没法一一帮助。看完我的教程还是不太明白的朋友尽管留言,我一定尽力帮忙!

最新评论

  • 深圳网站建设 感觉生完儿子我也是一度不正常站在窗边有想跳的冲动。看婆婆怎么也不舒服每天等老公回来骂他还好他从来都是哄我,看我和婆婆一起不开心还一起搬回了自己家。 不用插件自制 WordPress 倒序留言簿
  • 上海网站建设 已有0条评论,共0人参与,点击查看文明上网,理性发言 不用插件自制 WordPress 倒序留言簿
  • 大兴网站建设 我是 剖腹产的!月子里老是发脾气!还好老公一家人的好!老是哄我开心小孩的是他们带!出了月子就好多了! 不用插件自制 WordPress 倒序留言簿
  • www.ahyxzx.com 我是妇科医生,开始我也是没有在意过,上医学课的时候也没有学过,是我的一个同事生完孩子产后抑郁很严重,二十多天时像疯了一样,在精神病院住了一年才只好,现在只要是从我手上生完孩子的产妇我都会向她们宣教 不用插件自制 WordPress 倒序留言簿
  • 长沙新闻网 央央中华,如病猫一般。。。该醒一醒了,是时候向国军学习了,看看正规军的作风 不用插件自制 WordPress 倒序留言簿

发表您的评论

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

: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 « 粽 www.zhouziyang.com/?p=34