如何为博客设计一个出色的 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。特别是上图那样带有曲线边缘的图标。

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

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

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

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

最新评论

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

发表您的评论

评论将回复给

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

目前有 28 条评论

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

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




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