1 多重图标简介

所谓多重图标,就是指在一个图标文件中,提供了多种不同尺寸、不同色彩的图像。

1.1 为什么要使用多重图标?

在不同的场合,不同的用途下,图标需要的尺寸是不一样的。桌面图标是 32 x 32 的;在 Windows XP 以上版本中,资源管理器里使用平铺查看方式后,图标是 48 x 48 的;窗口左上角的图标是 16 x 16 的;在 Windows 2000 以下版本中,屏幕右下角的系统托盘里的图标是 16 x 16 的,而且只支持 16 色。

由于图标本身面积很小,因此不宜使用缩放的方式来适应各个分辨率,插值缩放会造成严重的失真。而将高彩图标转换为低彩图标时,也会出现严重的色彩损失。因此,我们需要在同一图标文件中保存不同分辨率、不同色彩数的多张图像。这就是我们说的多重图标。

1.2 提供多重尺寸

许多时候,我们需要使用尺寸很小的图标,如窗口左上角的图标是 16 x 16 的。在如此小的尺寸下,我们是很难描述太多细节的。因此,与其将原先图标直接缩小,得到一个任何人都无法辨认的图标,不如主动丢弃原图的一些细节,重新绘制一张新的小图片。

下图是一张台式电脑的图标,在 32 x 32 的尺寸下时,绘制了显示器、主机箱与键盘。当缩小到 16 x 16 时,如此小的尺寸里无法容纳那么多细节,如果直接把原图缩小的话,将无法辨认任何图像。因此,我们直接“丢弃”主机箱与键盘,只绘制显示器。当用户看到这个图标时,仍然能够辨认出这是一台电脑。

pixelart_computer_32x32 32 x 32 图像→ pixelart_computer_16x16 16 x 16 图像,由于面积过小,省略了许多细节。

事实上,为了在 16 x 16 的尺寸里得到清晰可辨的图标,绝大部分情况下,我们都需要提供重新绘制的小图。下图是 kittie 的图标,从中很容易看出,小图标绝对不是大图标直接缩小就能得到的。

kittie 32 x 32 图像→ kittie_16x16 16 x 16 图像,后者并非前者直接缩小所得。

1.3 提供多重色彩

在 Windows XP 以上的操作系统下,图标都能够支持到 32 位真彩色,应该不再存在提供多重色彩的需求。然而,Windows 2000 以下版本中,系统托盘仍然只能支持 16 色,另外,还有许多不能使用高彩图标的场合,如远程桌面等,因此低彩图标在许多时候仍然有它存在的理由。

然而,不幸的是,绝大部分情况下,直接让系统自动将一个高彩图标转换为低彩图标,几乎不能得到能令人满意的结果。因此,我们需要手工再绘制一幅低彩图标,以多重图标的形式打包到图标文件中。下图是一个很常见的例子,一个很漂亮的高彩图标直接转换为 16 色时,效果简直惨不忍睹。而手工绘制的 16 色图标就好看多了。

html_win_icon 256 色优化调色板图像→ html_win_icon_bad_lowcolor 直接转换为 16 色,→ html_win_icon_lowcolor 使用 16 色重新绘制。

下图是 Windows 98, Windows 2000 中的文件夹图标,可以看出,如果不提供一个低彩版本的话,在远程桌面等不支持高彩图标的场合下,系统自动转换出来的低彩图标将会是什么样子!

folder_win_icon 256 色优化调色板图像→ folder_win_icon_bad_lowcolor 直接转换为 16 色,→ folder_win_icon_lowcolor 使用 16 色重新绘制。

2 常见多重图标格式

2.1 二重

二重图标指的是提供了 32 x 32、16 x 16 两种尺寸的标准 16 色图标。二重图标的适应性相当好,无论是作为桌面图标还是窗体图标,无论是高彩环境还是低彩环境,都能得到非常清晰的显示效果。在 48 x 48 的 Windows XP 平铺查看方式下有少许变形,但不会丢失任何细节。滇狐个人认为,二重图标是对一个 Windows 下的图标的最低要求。

下图是一个二重图标的例子,可以顺便看一下,为了在 16 x 16 的尺寸下绘制清晰的图标,图标的作者是如何主动丢弃部分细节的。

midi_win_icon 32 x 32 x 16 色midi_win_icon_small 16 x 16 x 16 色

2.2 三重

三重图标在二重图标的基础上,增加了一个 48 x 48 的标准 16 色图标,这样在 Windows XP 的平铺查看方式下,也不会出现变形,拥有最广泛的适应性。下图是一个三重图标的例子。

txt_win_icon 32 x 32 x 16 色txt_win_icon_small 16 x 16 x 16 色txt_win_icon_large 48 x 48 x 16 色

2.3 六重

为了在高彩环境下获得更好的效果,可以使用优化的 256 色调色板为16 x 16、32 x 32、48 x 48 各绘制一幅图像,这样一个多重图标中将包含 6 张图像,如下图所示。

pixelart_globe_48x48x256 48 x 48 x 256 色pixelart_globe_32x32x256 32 x 32 x 256 色pixelart_globe_16x16x256 16 x 16 x 256 色

pixelart_globe_32x32x16 32 x 32 x 16 色pixelart_globe_16x16x16 16 x 16 x 16 色pixelart_globe_48x48x16 48 x 48 x 16 色

2.4 十二重

所谓十二重图标,是在六重图标的基础上,再增加了 16 x 16、32 x 32 与 48 x 48 的24 位真彩色、32 位真彩色的图标。

滇狐个人认为,在小于 48 x 48 的狭小面积里,优化过的 256 色与 24 位真彩色视觉效果上几乎没有任何区别,而 24 位真彩色图标体积上却要比 256 色的图标大出许多(有个例外,16 x 16 的图标,256 色的尺寸比 24 位真彩色要大,原因自己想)。

至于 32 位真彩,在 Windows XP 以下版本的系统里并没有得到支持,因此滇狐个人对于这种所谓的十二重图标并没有太多兴趣。

2.5 其它组合

有的多重图标只提供高彩图标,没有相应的低彩图标,这样在低彩状况下难以取得较好效果,不推荐这样的做法。有的多重图标会提供 64 x 64 的图标,目前滇狐还没发现 Windows 下有什么地方能够使用这样硕大的图标,因此似乎没有太多实用价值。

3 常用技巧

3.1 抖动

Dither 在中国大陆地区被翻译为“抖动”,其实它似乎与发抖没有任何关系。这里说的抖动的意思是,使用两种或两种以上的颜色,间隔排列,形成渐变与过渡效果。

下图是一个典型的“抖动”的例子,通过白色、浅灰、深灰与黑色的相间排列,构成了由亮到暗的渐变效果。

pixelart_winmine_dither

下图是另一个通过“抖动”来实现渐变效果的例子。

pixelart_snail_dither

3.2 优化调色板

在狭小的尺寸里,一张图片能够用到的颜色数是很有限的。如果修改调色板,只将图片用用到的颜色放入调色板,可以用很少的颜色数达到很好的视觉效果,并最大程度地减小图片的体积。

这张图片中一共只用了 15 种颜色,因此优化调色板后,使用 16 色的文件格式就可以将它描述出来。

icon_girl

icon_girl_palette

这张图片的原始样图用了 300 余种颜色,我们丢弃少量颜色后,将原图优化为一张 256 色的图片,与原图在视觉效果上几乎没有区别,而文件尺寸就缩小了许多了。

pixelart_opt_palette_256_icon

pixelart_opt_palette_256_palette