小麦工作室07

2007年9月2日星期日

为网站添加图标

今天为网站添加上了图标（ico），地址栏上、和标签上不再是白色的页面图标，而是显示为自己网站的个性图标。

制作过程使用了CorelDRAW，Photoshop，Iconworkshop几个软件。下面是详细的制作过程......
为网页设置ico图标本来不是html的标准，只是当年微软为IE5所增加的一个功能，为的是让IE收藏夹中的网页连接能显示各个网站的图标。因为越来越多的网站采用了微软的这种标准，所以其他浏览器也加入了支持ico的功能。
网页图标的规范
要为网站的页面增加图标，需要满足下面几个标准：

必须采用ico文件格式
图标的大小为16X16像素，256索引色。
如果命名为favicon.ico，上传到网站的根，IE会自动调用该图标；但这个标准其他浏览器不一定支持。
普遍支持的标准是，在网页的head部分，加入如下代码：
<link rel="icon" href="http://网站URL/favicon.ico" type="image/x-icon">
其中favicon.ico可以采用其他文件名。

工具和步骤
制作ico文件的工具很多，网上搜索一下，可以找到一堆。我自己比较喜欢用Iconworkshop
概括地说，制作过程可以简单分成两个步骤：用自己喜欢的绘图工具(例如Photoshop等等)制作成图片，然后用图标工具转换成ico文件。

细节，学习Pixel Art的知识
步骤说起来简单，但是图标的尺寸非常小，所以每个步骤都有很多细节需要讲究。
如果想制作好一个图标，建议先学习一下“像素画（pixel art）”的基本知识。像图标那么小的图片，要做出好的效果，最终还是要精确地对每一个像素进行细致的调整。
“像素画”的教程，可以看看这个地址的：http://www.blueidea.com/design/pixel/index.asp

我的制作过程
构思：
最开始我想用我的士气章做图标，但是要把那么复杂的图形放入16X16的像素格子内，难度实在是太高了，估计作出来，都看不出是什么东西。
16X16的图标只能走简单图案的路线。于是我想用“小麦”两个标准字做图标的元素。试了一下，还是太复杂了，两个字，相当于每个字只有8个像素的空间，而且两个字之间还不能有间隙。12像素是中文显示的最低极限，再低，文字会很难看。
最后决定用“麦”的标准字做图标。

原始素材

在CorelDRAW中把当年制作的“麦”字的标准字单独导出为PSD文件，带背景透明。导出的尺寸大很多，选择背景透明。

在Photoshop中打开该文件，加入一个渐变的蓝色背景。把图片的尺寸调整为16X16。把“麦”字修改小，让周边留出1像素的空间。

合并所有图层。

导出到IconWorkshop
打开IconWorkshop，新建一个16X16的图标。
回到Photoshop中，选择菜单，filter/axialis/Transfers To Axialis IconWorkshop ...... 。因为我安装的是IconWorkshop，会自动为Photoshop增加一个滤镜。
选择“粘贴到当前图标中”。
从预览中可以看到，这样的图标效果还算理想，直接做ICO也不会有什么大问题。