9.5 网络安全色彩
在网络上使用图片的一个问题在于并不是所有的电脑都可以同时显示很多种颜色。比如,分辨率为1024 x 768的显示屏,如果用一个字节(八个比特)来表示一个像素,那么需要至少0.786Mb的显存,同时最多只能显示256种颜色。
另一方面,用两个字节表示一个像素的显卡可以表示65536种颜色,而三个字节一个像素的显卡则可以表示16777216种颜色。所以,16比特系统所能显示的颜色比8比特系统有很大提高。24比特系统被称为“真彩”系统。但是,随着显示质量的提高,对显卡的要求也相应提升。16比特,1024 x 768分辨率的系统需要1.6Mb显存,而24比特系统则需要2.4Mb。
很多显卡都只有1Mb显存,甚至更少。虽然这种显卡已经越来越少,可是我们总会碰到一些非常古老的机器。这造成的结果是多过256种色彩的图片在8比特的显卡上不能正确显示,图片中的某些颜色不得不用别的颜色代替,因为显卡无法同时显示足够多的颜色。这种现象会使图片失真。
GIMP用24比特来表示一个像素的颜色,R,G,B各8比特。所以,使用GIMP制作的图片往往在256色系统上会失真。网络开发员常常希望他们的图片可以在所有的显示屏上正确显示,所以我们在这节里会讨论如何制作“网络安全”色彩的图片。
9.5.1 色彩失真的种类
当显示屏已经在显示它所能显示的最多色彩,而系统要求它再显示一个新的色彩时,就会出现色彩失真。处理色彩失真的最简单的方法就是色彩剪辑。这种方法用显示调色板中已有的最近的一种颜色来显示这种新的颜色。对于颜色渐变的图片,这种方法会产生“分栏”效果,如图9.23所示。
图(9.23):色彩剪辑与色彩乳化产生的失真
(a)原图
(b)色彩剪辑
(c)色彩乳化
(d)原图放大图
(e)色彩剪辑放大图
(f)色彩乳化放大图
9.23(a)显示原图,9.23(b)是同一副图在低端系统上显示的效果,其中分栏效果十分明显。
另一幅图采用“乳化”技术。“乳化”虽然也是一种失真,但它不是一个问题,它使一种解决办法。乳化在相邻的点上显示不同的颜色,使它们整体看起来接近我们想显示的颜色。这种方法产生的图片不会有分栏效果。9.23(c)显示乳化的效果。9.23(f)显示9.23(c)放大后的样子,您可以清楚地看到系统是如何用不同的颜色拼出一种新的颜色来的。您可以将9.23(f)和9.23(d),9.23(e)仔细地做做比较。
9.23表明,乳化是比剪辑复杂得多的一种技巧。对于色彩渐变的图片,它的效果也会好得多。可是,也会有例外的时候。要知道为什么剪辑有时候效果比乳化好,您需要知道乳化是怎么生成的。9.24种给出了一个简单的例子。
图(9.24):使用乳化显示颜色
(c)用乳化显示黄色
(d)图(c)的放大图
(e)真正的黄色
选择图片:滤镜/着色/模版菜单,使用“棋盘效果”插件,我们用它来展示一种失败的乳化。棋盘效果对话框如9.24(b)所示。这个插件在当前层上用当前前景和当前背景生成一个棋盘状图样。图9.24(a)显示我们将这两种颜色定分别定为红色和绿色。
在图9.24(b)中,我们将棋盘效果的边长设为一个像素。我们用这种方法来用乳化显示黄色,如图9.24(c)所示。理论上,红色与绿色混色后应该生成黄色,我们在5.1种已经提到过这个问题。
9.24(c)显示9.24(d)的放大图。我们可以在这里清楚地看到棋盘状图案。为了方便比较,我们在9.24(c)中显示了真正的纯黄色。9.24种的例子比较极端,因为我们从来不会用两种差得这么远的色彩来做乳化效果,不过,作为一个例子它还是很不错的。
另外,GIMP中使用的乳化比我们这里使用的棋盘效果复杂得多。在GIMP中,我们可以选择几种不同的乳化算法,包括Floyd-Steinberg算法。这种算法的特点在于它使用最多三种色彩像素的随机分布来模拟一种新的色彩。9.23(f)中清楚地显示了这种随机性。很多情况下,正是这种随机性使它的效果更加逼真,当然,也有例外的时候,我们在9.5.4中会更详细地讲到这个问题。
9.5.2 低端图形系统与网络浏览器调色板
低端图形系统用8比特表示一个像素,它们只能同时显示256种颜色。在低端图形系统上,浏览器必须选择如何表示不能现实的色彩。Internet Explorer和Netscape Navigator使用很相似的调色板,虽然两者也有不同之处。两种浏览器的调色板中都有的颜色被称为“网络安全”颜色。任何网络设计者都应当了解这些颜色,以及如何使用这些颜色。
网络安全颜色的红、绿、蓝强度都是0,51,102,153,204和255种的一个值。所以,使用5.1中介绍的表示法,51R 204G 153B是一种网络安全色。而52R 204G 153B则不是。网络安全色因此一共有216种。我们之所以在每种强度中定义6个值是因为7个值就会产生343种色彩,这已经超过低端系统所能表示的颜色了。剩下的40种颜色就取决于所用的系统了。Mac、PC上的Internet Exploere和Netscape Navigator都会有不同的值,所以你不能假设这些这也能正确地显示出来。
如果您用GIMP制作网络图片,那么最好只使用216种网络安全色,这样您的图片可以在所有的系统上正确显示。GIMP有一组内建的调色板,可以用图片:对话框/调色板中的色彩调色板对话框中作选择。您也可以直接在图片窗口或工具箱窗口中按C-p。
我们要讨论的是GIMP的网络调色板,如下图所示。
图(9.25)
网络调色板中定义了216种网络安全色,可以在所有的系统上不失真地显示出来。可是,因为这个调色板中的色彩相当没有组织,作为创作的工具似乎不太方便。一个根据色彩及饱和度组织的调色板就容易用得多。
您可以从http://www.visibone.com/swatches ... siBone2调色板。
图(9.26)
VisiBone2种的色彩和GIMP中的网络调色板完全一样,可是它将所有的色彩拼成了一个环状,所以使用起来更加方便。
9.5.3 转换为索引色彩
在8比特系统上显示颜色,最好的方法是使用索引模式,如9.27(a)所示。
图(9.27)
上图显示我们选择图片:图片/模式中“索引模式”功能之后弹出的对话框。
上面的对话框中有三个选择。第一个选项,“最优调色板”,分析图片中实际出现的色彩,并给出一个调色板。我们可以指定这个调色板中的色彩数目,最多256种。
第二个选项,“自定义调色板”,允许我们从内建的与自定义的调色板中选择一个适当的。GIMP的标准调色板的名称如9.27(b)和(c)所示。默认的自定义调色板,网络调色板,就是根据在低端系统上用浏览器查看的情况设计的,其中包含216种颜色,如9.25所示。选择这个选项时生成的索引图在所有系统上显示都不会失真。
最后一个选项,黑白,把图片转化为真正的黑白色(没有灰色)。
“索引色彩转化”对话框的第二个部分是乳化选项。下面是所有的选项:
- 不用乳化
- 定点乳化
- Floyd-Steinberg乳化(减少色彩放送)
- Floyd-Steinberg乳化(普通)
普通的Floyd-Steinberg乳化是默认值。有时您可能需要将各种选项试一试,特别是当图片有渐变色或大片版色时。下一节会继续讨论这个问题。
9.5.4 那种乳化才好?
当您决定使用网络安全色后,您还要决定使用哪种乳化方法将图片转化为索引模式。使用哪种方法才能使失真最小和您的图片种类有很大关系。
如果图片是张照片,或者有渐变色,那么色彩一般都超过256种,而且有很多“网络不安全”的颜色。一般上在这种情况下将照片显示在低端设备上产生的失真很不明显,我们甚至可以说根本就没有必要将照片转化为索引图。但是,如果照片上还有别的图样,我们就必须使用乳化了。这在9.28中可以看出来。
图(9.28):渐变色的失真
9.28(a)是GIMP 1.0.4版的启动画面。9.28(b)中是该图使用网络安全色乳化生成的一个索引图,而9.28(c)中则是该图使用网络安全色剪辑生成的一个另一个索引图。9.28(c)中有很严重的分栏效果,所以9.28(b)的效果比较好。所以对于渐变色而言,乳化比剪辑要好得多。
如果图片不是照片,也没有渐变色,相反,它由大片的版色构成,那么结果就完全不一样了。
图(9.29)
上图是美国内政部150周年纪念的一张图片,整幅图主要由四种色彩构成:黑,白,46R 110G 207B的蓝,以及241R 214G 47B的黄。图中还有别的色彩,不过那是为了抗锯齿化效果(3.1.2章)以及对比(6.4.1章)。从前面的讨论可以知道,这里的蓝色和黄色都不是网络安全色,所以我们将图片存为网络安全色索引时不可避免地会有色彩失真。9.29(b)中是Floyd-Steinberg乳化的效果,而9.29(c)中则是剪辑的效果。
9.29(b)中的乳化生成的图片差强人意。大片蓝色和黄色的区域都布满了斑点。另一方面,剪辑生成的图片中虽然黄色和蓝色的颜色发生了一点变化,可是效果比乳化的要好了多。
最后我们回顾一下。颜色细节丰富,变化微妙的图片最好用乳化,而由大片版色的图片则最好用剪辑。对于两者都有的图片,我们必须用实验决定哪种更好;可是有时候两种的效果都很不好。 |