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

最新评论

  • motif motif.md 晒一晒我用过的博客页眉
  • Shawna Kenyon Are you looking for powerful advertising that delivers real results? I apologize for sending you this message on your contact form but actually that was the whole point. We can send your ad copy to sites via their contact pages just like you're receiving this note right now. You can specify targets by keyword or just execute mass blasts to sites in the location of your choice. So let's say you're looking to push through an ad to all the mortgage brokers in the US, we'll scrape websites for just those and post your ad message to them. Providing you're advertising some kind of offer that's relevant to that type of business then you'll be blessed with an amazing response! Shoot me a reply to ethan3646hug@gmail.com for the details Greasemonkey 脚本推荐:在任何填邮箱的地方自动提示 Gmail 联系人
  • cheap jordan shoes I wish to show my gratitude for your generosity in support of people that should have help on this area. Your special commitment to getting the message all over had become incredibly good and has frequently allowed people much like me to achieve their targets. This useful useful information signifies this much to me and much more to my mates. Thank you; from all of us. Google 嵌入式日历重大更新
  • Fredericka McGuirk Need to find effective online promotion that isn't completely full of it? I apologize for sending you this message on your contact form but actually that was kinda the point. We can send your ad text to sites through their contact pages just like you're receiving this message right now. You can target by keyword or just start bulk blasts to websites in any country you choose. So let's say you want to push through an ad to all the contractors in the United States, we'll scrape websites for only those and post your ad message to them. As long as you're advertising a product or service that's relevant to that business category then your business will get awesome results! Write a quick note to evie2535gre@gmail.com to get info and prices Greasemonkey 脚本推荐:在任何填邮箱的地方自动提示 Gmail 联系人
  • 心灵博客 当年有这个效果已经很不错哦 diy 山寨投影家庭影院

发表您的评论

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

: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 « 粽