第4章 图像

设计师的主要工作之一就是创建各类图像，力求带给浏览者最大限度的视觉冲击。本章选择的各个作品都将图像运用得炉火纯青。各种不同的图像创作过程也会将作品引领至不同的方向。

本章将介绍很多图像相关的内容，包括获取灵感的方法、图像处理技术及技巧、一些资源丰富的照片库，以及根据情况需要为作品创建图像的方法等。

4.1 Japanese Garden 4.1 （日式花园）

Masanori Kawachi，设计师

www.csszengarden.com/096

理解图像文件格式以及优化方法

“和”「わ」在日语里是协调、融洽的意思。虽然大胆、生动的设计也许会让作品更有吸引力，但显然Masanori Kawachi在Japanese Garden中要表现的是一种更易理解的、全球范围内的美感。Masanori Kawachi尝试在各种风格鲜明的作品中脱颖而出，牢牢把握住“和”的宗旨，让作品能够被全球范围内的各种欣赏者所接受。

Kawachi所使用的设计元素显然带有日式风格，但痕迹却不是那么明显，任何国家的浏览者都会对其产生兴趣。

4.1.1 图像文件格式

Japanese Garden中所用到的种种精巧的透明效果都能够暗示出设计师对各种图像文件格式及其使用方式的深刻理解。计算机图形学领域中有上千种不同的图像格式，但能在Web页面中使用的并不多，最为常用的有三种格式：GIF、JPEG和PNG。这三种格式的图像均支持压缩，以节省浏览者下载时的网络带宽。

为什么优化如此重要

为什么要优化？随着宽带越来越普及，我们还需要如此在意图像的大小么？虽然宽带上网越来越普及，但这却不是任何地方的任何用户都能享受到。很多用户仍旧使用56K的调制解调器上网，在有些国家连电话线都是稀罕物。多下载1K的文件都要占用额外的时间，多上网一分钟也要花费额外的金钱。

同样需要考虑的还有服务器端。高流量的站点通常都有很多用户同时访问——每个用户耗费的带宽越多，服务器需要的总带宽也就越大，购买带宽的开销也会越大。无论对于用户还是网站运营者，图片文件大小的降低都意味着更少的开销。2K的优化看上去不算什么，但其累积的过程却非常快。例如，若日访问量为100 000的站点中某张图片的大小减少2K，那么每个月将节省6G的带宽。这种细微之处的优化显然可以实实在在地降低网站运营成本。

Note

在2004年中期，美国国内家庭的宽带普及率已经超过50%。

4.1.2 理解并选择图像文件4.1.2 格式

每种图片文件格式都有自己的色彩模型、表示形式、压缩方案以及透明效果支持dent特性。只有充分地了解每一种格式的优劣之处，才能根据实际需要做出合理的选择。

无损压缩将保留原图像的所有细节，有损压缩会对细节有所取舍，以换来更小的文件。二者都有其适用的地方。

色深（color depth）是指某种图像格式包含的颜色的多少。色深用位（bit）计量，更高的色深表示将包含更多的颜色种类。例如8位的色深只有256种颜色，而24位色深则能够包含1600万种颜色。

1. GIF

GIF出现的历史最早，大约在20年前就已经初具雏形。GIF使用一种叫做LZW的无损压缩格式，非常适合带有大块相同颜色区域的图像。单色插图、文本、色块等文件非常适合存为此格式。

GIF需要使用颜色索引来实现无损压缩，但这却是把双刃剑。该格式的色深只允许同一张图像中最多出现256种颜色，对于超过范围的若干种颜色只能忍痛割爱。但对于少于256种颜色的图像，其颜色索引也会相应地变小，这也就意味着图片文件的整体大小也将随之降低（图4-1-1～图4-1-3）。当然，对于超过256种颜色的图像，我们仍可以将其存为GIF格式，不过某些颜色信息将丢失——最终变成有损压缩。

图4-1-1 256色的GIF图像，文件大小为8.6KB

图4-1-2 32色的GIF图像，文件大小为5.0KB

图4-1-3 4色的GIF图像，文件大小为2.1KB

GIF支持1位的透明度，即某个像素要么完全透明，要么完全不透明，没有任何中间值。若在图像编辑软件中使用了各种范围的透明度，那么在保存为GIF的时候将会受到限制并不得不妥协。但若是预先知道该图像在Web页面中所处区域的背景颜色，那么这也不会带来太大问题。此外，GIF还支持基于桢的简单动画以及隔行加载技术，但这两者都将增加文件大小。

1. JPEG

JPEG的24位色深让其能够很好地显示照片等色彩、细节丰富的图像。JPEG支持有损压缩且可以设置压缩等级，这样我们即可通过合理的压缩等级找到图像颜色和细节与文件大小之间的平衡点（图4-1-4～图4-1-6）。

图4-1-4 高品质（70）的JPEG图像，文件大小为8.3KB

图4-1-5 中品质（30）的JPEG图像，文件大小为3.7KB

图4-1-6 低品质（10）的JPEG图像，文件大小为2.5KB

压缩比很大的JPEG图像将会高度失真，并引发一种叫做非自然痕迹¹（artifact）的小块像素缺陷问题。虽然图像中的丰富细节将会淡化非自然痕迹的影响，但在使用JPEG时仍要把握好图像质量和文件大小之间的平衡关系。JPEG不支持任何形式的透明度，但最新的“渐进JPEG （Progressive JPEG）”版本能够和GIF一样实现隔行加载，且已经被大多数浏览器所支持（请参考本节稍后的4.1.4节）。

注释：¹ 有的翻译将其叫做膺像。——译者注

1. PNG

PNG格式在有些方面与GIF类似，但它提供了两种色深模式：24位和8位。24位色深的PNG文件通常都很大，但却能保证完全无损。原始图片的所有细节都将被精确地保留。8位色深的PNG文件使用了类似GIF的颜色索引。但很多时候，同样设置下用PNG压缩的图像要比GIF更小（图4-1-7～图4-1-9）。

图4-1-7 24位的PNG图像，文件大小为16.2KB

图4-1-8 8位、64色的PNG图像，文件大小为5.3KB

图4-1-9 8位、4色的PNG图像，文件大小为2.2KB

由于PNG同时支持这两种色深模式，所以理论上它可以用于任何图像。但实际上最好还是用GIF和JPEG，前者用于带有大块相同颜色区域的图像，后者用于照片等色彩、细节丰富的图像。24位色深的PNG文件虽然能够做到完全无损，但这却是以增加文件大小的代价换来的。

PNG还支持两种模式的透明度设置：1位（bit）或8位。前者与GIF的行为一样，而后者则能够实现256级的透明度。当我们无法预知图像在Web页面中所处区域的背景颜色时，8位的透明度模式将非常实用。但不幸的是，浏览器支持问题却让PNG的透明度支持大打折扣。其中最明显的就是Windows平台上的IE浏览器，它无法正确呈现出PNG的透明度设置¹。

注释：¹ IE 7.0中已经可以正常识别并显示出PNG图像的透明度设置。——译者注

4.1.3 透明度限制

虽然计算机领域中仍有很多其他图像格式，但只有上面介绍的这三种才适合在Web中使用。JPEG根本不支持透明度，GIF的1位透明度设置又显得太简陋，但PNG所支持的8位透明度又不能被最流行的浏览器识别。这个问题已经由来以久了，甚至与CSS也没有什么关系。在过去的十年中，Web中的透明效果只能由一种方法实现，那就是模拟——预先设计并呈现好整个图像，包括其中的半透明效果，然后以无透明度的文件格式保存。

在Japanese Garden中，Kawachi将内容放在了看起来似乎半透明的栏中，透过这一栏甚至还能隐约看到作为背景的绿色树叶（图4-1-10）。虽然并不支持这种类型的半透明设置，但Kawachi还是选用了GIF。其半透明效果的实现不是在浏览器中完成的，而是在Adobe Photoshop中直接使用图层技术做出的效果，然后直接保存为GIF。文本栏中作为背景的图像其实也根本没用到任何透明设定——不过是普通的完全不透明图像而已。虽然最终结果看上去像是有半透明效果，但这却是通过在图像处理软件中预先处理得到的。

图4-1-10 Japanese Garden的半透明效果是由一些不透明或伪透明的图像组成的

在使用透明GIF图像时必须格外小心——因为它仅支持一个级别的透明度设定。所有其他半透明的像素都要恰当地与背景颜色融合在一起，即所谓的“蒙版颜色（matte color）”。蒙版必须与该GIF周围的背景颜色协调一致，否则将呈现出明显的不协调边缘（图4-1-11～图4-1-13）。

图4-1-11 为白色背景设计的透明G I F图像，置于白色背景之上

图4-1-12 为白色背景设计的透明GIF图像，置于淡绿色背景之上

图4-1-13 为白色背景设计的透明GIF图像，置于深绿色背景之上

通常情况下，Web页面中只有这两种实现透明的方法，二者都经过测试且足够可靠。虽然PNG的半透明设定功能强大，但IE的漠视让我们不得不放弃使用它的想法。

虽然透明PNG图像在IE中显示得一团糟，但仍有一些办法让其正常工作。这些方法只应用于IE中，且自身都有一定的限制，但总归聊胜于无，迫不得已时仍可以考虑使用。

4.1.4 优化技巧

降低文件大小的诀窍在于适当牺牲一定的图像质量。图像压缩比越大，结果自然越难看。所以最好的方式是从较低品质（即较高压缩比）的图像开始，逐步提高品质，直到对图像质量满意为止。

1. GIF

优化GIF的步骤通常是从最低的颜色级别开始，逐步提高颜色数目，直至可以接受。若从8种颜色开始，那么接下来就依次查看16、32、64（依此类推）种颜色的样子，直到你觉得满意。某些图像确实需要256种颜色（若是超过256种颜色，那么就考虑使用JPEG代替GIF了），但还有一些图像却不那么敏感，哪怕是在8或16种颜色中看起来也和未经压缩过的差不多。

还有一些设定能够影响到GIF格式文件的大小。例如抖动技术（dither）即可在一块相同颜色区域中添加另一种颜色的像素点，这个技术可以用于模拟出一些本不在文件颜色索引中的颜色。但抖动技术也将影响文件的压缩比率。若是只考虑降低文件大小，那么某些时候增加颜色种类可能要比使用抖动技术更为有效。

Photoshop中有一个相关的新特性，即保存GIF文件时的有损（Lossy）压缩选项。无论已经将文件压缩到了多小，有损压缩选项都能在继续降低图像质量的代价下得到更大的压缩比率。甚至一个很小的有损压缩值（5%～6%，并不会明显影响到图像的质量），都有可能让GIF的文件大小降低20%～30%。

1. JPEG

优化JPEG则更为简单。在将原始图像保存为JPEG格式时，图像处理程序一般都会用滑动条表示图像的品质等级。高品质意味着更大的文件，低品质则意味着更小的文件。这样在保存时，我们即可从较低值开始，逐步增加图像的品质，直到可以接受为止。

JPEG所提供的另外一些高级特性目前已经被大多数浏览器支持。其中“优化（Optimized）”选项能够略微提高图像的压缩比。“渐进JPEG （Progressive JPEG）”对于庞大的照片文件来讲非常合适，只是需要添加一些额外的数据。而“Blur（模糊）”选项，顾名思义，则能够通过让图像略加模糊而降低文件大小。

1. PNG

优化8位PNG图像的步骤与优化GIF完全一致，提供了颜色级别以及抖动选项。24位PNG图像的优化更为简单：无需任何关注。因为PNG的唯一压缩方式固化在文件格式中，根本无法更改。

Note

下面一些文章介绍了让Windows上的IE也能正常显示PNG图像透明度信息的技巧：“PNG Behavior”（http://webfx.eae.n et/dhtml/pngbehavior/pngbehavior.html）以及“Cross-Browser Variable Opacity with PNG: A Real Solution”（www.alis tapart.com/articles/pngopacity）。

4.1.5 困难的选择

在所有浏览器都支持PNG的半透明行为之前，Kawachi预先生成半透明效果之类的技巧仍然会继续使用下去。

选择合适的图像文件格式也就是在透明支持、色深以及压缩比率三者之间取舍的问题。这三者并没有什么必要的联系，但限于文件类型，又不得不将其放在一起考虑。有时我们需要做出一定的妥协，只有了解了可选范围，我们才能够决定最适合当前情况的图像文件格式。

4.2 Revolution!（革命！）

David Hellsing，设计师

www.csszengarden.com/102

在CSS中为作品应用图像

图像在传达信息、营造氛围和吸引目光方面都能起到独到的作用。掌握正确、合理的应用图像方法将是我们刻不容缓的任务。

就像紧张、寂静的战场上的第一声枪响一样， Revolution!页首部分的那张大幅图片一下子就吸引了我们的注意。David Hellsing深谙这类表意性很强的图像的力量，他找到了一些从前的宣传海报，加上一些能体现历史感的图像，例如曾被浸湿的旧纸等，来营造作品的整体氛围。鲜血和标语、泥土和红星——这些元素组合在一起，让作品给浏览者以强大的视觉震撼。

但保证作品的平衡也不容忽视。虽然页首部分给人以好战、政治等相关暗示，但Hellsing却在内容区域选择了较为平静的风格。Hellsing首先在Adobe Illustrator中绘制出了图形和文字，然后用Adobe Photoshop将各个元素组合起来，最终完成了这幅充满活力的作品。

4.2.1 实际应用

在使用CSS进行布局时，要将那些预先设计好的图像（例如Hellsing的页首图像）应用到作品中。若某个设计师习惯使用<img>标签引入图片，那么在查看禅意花园的源代码时他定会感到些许疑惑，甚至不安——其中居然并没有什么显式的图像声明代码。其实，引入这些图像是在CSS文件中实现的。那么这又是如何完成的呢？

CSS提供了若干种将图片应用到页面元素上的方法，但只有背景图像方法得到了广泛支持，也就是说只有这一种方法才能用于实际开发中。CSS中为元素（例如禅意花园的h1标签，图4-2-1）应用背景图像的语法非常简单：只要定义图像的路径、位置以及重复显示方式（如果需要重复显示的话）即可：

图4-2-1 h1元素应用了背景图像，其中文字仍然可见

h1 {

　background: url(path/to/image.gif) left top no-

　repeat;

}

若是设置了no-repeat，那么必须精确定义该背景图像的容器大小，以确保图像能够完整显示。若未指定图像的width或height属性，除非图像本身尺寸不大，否则很有可能因为容器中没有足够将其撑大到完整尺寸的文字，导致背景图像无法完整显示（图4-2-2）。所以在大多数情况下，我们都要为容器元素显式指定大小，以便完整地显示出其背景图片。

图4-2-2 背景图像在文本结束时即被拦腰截断，只能显示出一部分

h1 {

　background: url(image.gif) top left no-repeat;

　width: 400px;

　height: 20px;

}

Tip

注意背景属性中值的声明次序。例如对于背景图像的位置，我们必须要先声明水平位置，然后再是垂直位置，因此这段代码中left先于top出现。若使用left或top之类的位置关键字，那么其顺序要求并不是那么的严格，但若使用长度单位值，例如%或px，那么顺序就就变得至关重要。

4.2.2 图像替换

我们并不总是要文字呆在背景图像之上，很多禅意花园的作品都故意隐藏了标题等元素中的文本，取而代之的是一幅生动的图像。

2003年3月，Douglas Bowman在他的网站Stopdesign上发布了一个技巧（www.stopdesign.com/articles/replace_text），让设计师能够用一张背景图像替代某元素中的原始文字，以期显示出更美观的字体。为了表示对发明者Todd Fahrner的尊重，这个技巧随后也被叫做“Fahrner图像替换（Fahrner Image Replacement，FIR）”。该技巧的实现非常简单：用span将元素中的文本包围起来，然后通过应用CSS样式隐藏这个span中的文本，最后将背景图像应用到该元素之上即可。例如，对于下面的这一段HTML标记：

<h1 id="pageHeader"><span>css Zen Garden</span></h1>

我们可以使用下面的这段CSS容易地实现图像替换：

pageHeader {

　background: url(lemonfresh.gif) top left no-repeat;

　width: 400px;

　height: 20px;

}

pageHeader span {

　display: none;

通过使用CSS的display:none或visibility:hidden，所有在#pageHeader元素中的span元素都将被隐藏起来。Hellsing同时使用了上述两种CSS设定——但它们的效果却是一致的。图像替换技术非常强大且很快开始流行——若是没有了它，我们甚至都无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一块最为重要基石。

Note

我们同样可以用CSS生成的内容来为元素应用图像，这种技术可以让我们在CSS中用一段自定义的内容替换元素的原有内容：

[h1 {

　content: url("aldente.gif");

}

在CSS 2引入:before以及:after两个伪元素（pseudo element）之后，CSS 3中又定义了上面代码中提到的content属性，以便更加全面地控制页面的表现。但大多数浏览器还不支持这个属性，所以目前还不能将其应用到实际开发中，只能用在实验性质的尝试中。

4.2.3 图像替换的责任

图像替换技术使用display: none的本意并不只是想要替换文本，这样做还有一些更深层次的理由。实际上，若是没有任何提示或帮助，计算机就无法认出或读取图像中包含的文字。例如HTML中的img元素，若是没有了alt属性，那么对于Google等搜索引擎，以及辅助浏览设备（例如，屏幕阅读器即可阅读页面内容，并以声音的形式告知浏览者）之类无法呈现图像的客户端来说，将变得毫无意义。而图像替换技术则保留了被替换元素中的原有文本，因此无论对何种客户而言，理解页面内容都不成问题。

Note

屏幕阅读器是一种建立于浏览器（例如IE）之上的程序，所以它也不会读出浏览器中的不可见文本。

但图像替换技术还有一个问题：Google能够读取到隐藏的文本，而有些屏幕阅读器却不能。图像替换技术的本意是让视觉不便用户也能够获取图像传递的信息，但实际上它却没有达到预期的目标。不但如此，若用户在浏览器中禁用了图像，但却仍保留CSS，那么屏幕上将什么都不会显示。且这些额外的span也增加了页面文件的大小，虽然并没有太大的影响，但毕竟不够理想。

Note

很多人都对图像替换技术发表了看法（例如Dave Shea的“In Defense of Fahrner Image Replacement”： www.digital-web.com/articles/in_defense_of_fahrner_ima ge_replacement），并进行了研究（请参考Joe Clark的“Facts and Opinion About Fahrner Image Replacement”：www.alista-part.com/articles/fir）。很明显，图像替换技术的原本意图根本无法实现——这种在提高CSS地位中至关重要的、最为基础的技术实际上却是没用的。那我们又该怎么办呢？

4.2.4 更好的技术

随着图像替换技术一天天地流行起来，这些问题也渐渐开始受到越来越多的人的关注。有没有这样一种技术，既可以为普通浏览者隐藏一些不必要的元素，也能将这些信息提供给需要的人呢？幸运的是，几乎在图像替换技术开始流行的同时，另外一些替代的技术也开始走向成熟。其中有些在实现了一些最为基础的要求的同时，也留下了一两个悬而未决的显著问题；而另一些则需要大量的CSS技巧及hack来实现跨浏览器兼容。在撰写本书时，尚没有一种完美的替代方案出现，我们只能在权衡利弊之后，根据实际需要在这些现有的方案中进行挑选。

1. Leahy和Langridge的方案

Seamus Leahy和Stuart Langridge均独立地发现了这种方法。该方法让我们不必再添加那些多余的<span>标签，且在保证屏幕阅读器可以正常阅读文本的同时，也能在页面中隐藏元素中的内容。但不幸的是，由于6.0版本之前的IE浏览器均不遵守盒模型，所以对于这类浏览器，我们还必须使用一些特殊的技巧来实现兼容。

•HTML标记

<h3 id="header">I like cola.</h3>

•CSS代码

header {

　padding: 25px 0 0 0;

　overflow: hidden;

　background-image: url(cola.gif);

　background-repeat: no-repeat;

　height: 0px !important;

　height /**/:25px;

}

优点：屏幕阅读器可正常访问；没有多余的<span>。

缺点：并没有解决浏览器禁用图像后空白页面的可访问性问题；实现需要hack。

Note

Dave Shea的个人网站上有一张页面（www.mezzoblue.com/tests/revised-image-replacement），专门用来跟踪时下最新的图像替换技术。

浏览器支持：Windows——IE 5.0及以上版本、Netscape 7、Opera 6及以上版本、FireFox；苹果机——IE 5.2、Safari、Firefox。

1. Rundle的方案

设计师Mike Rundle提出了一种使用负text-indent属性值的方法，将文本推到屏幕的左边缘之外。虽然该方案的适用性并不广泛——IE 5.0会将背景图片随文本一起推出浏览者的视线范围——但却相当简洁优雅。

•HTML标记

<h3 id="header">Apple pie with cheddar?!</h3>

•CSS代码

header {

　text-indent: -5000px;

　background: url(sample-image.gif) no-repeat;

　height: 25px;

}

优点：屏幕阅读器可正常访问；没有多余的<span>；简洁优雅的CSS。

缺点：并没有解决浏览器禁用图像后空白页面的可访问性问题；有时在IE 5.0中无法使用。

浏览器支持：Windows平台——IE 5.5及以上版本、Netscape 7、Opera 6及以上版本、FireFox；Mac OS X平台——IE 5.2、Safari、Firefox。

1. Levin的方案

Levin Alexander想出了一个绝妙的主意：不再将文本置于span中，而是将其从span中移出来，将文本和span一起放在父元素中，然后使用这个空白的span覆盖住文本，并将背景图像应用到该span之上。如果一切顺利的话，屏幕阅读器即可正常访问这段文本，且也充分考虑并解决了浏览器禁用图像后空白页面的可访问性问题。但新的问题也随之出现，那就是图像不能是透明的，否则用户将会看到下面的文本。且这种方案所需要的CSS极为冗长，让人难以理解。

•HTML标记

　<h3 class="replace" id="myh1">And a dash of Thyme.<span>

</span></h1>

•CSS代码

.replace {

　position: relative;

　margin: 0px; padding: 0px;

　/ hide overflow:hidden from IE5/Mac \/

　overflow: hidden;

　/ /

}

.replace span {

　display: block;

　position: absolute;

　top: 0px;

　left: 0px;

　z-index: 1; /for Opera 5 and 6/

}

myh1, #myh1 span {

　height: 25px;

　width: 300px;

　background-image: url(thyme.png);

}

优点：屏幕阅读器可正常访问¹；解决浏览器禁用图像后空白页面的可访问性问题。

注释：¹ 原文还提到了一个优势：没有多余的<span>，但实际上在Levin的方案中仍需要这个span的辅助。——译者注

缺点：无法使用透明图像；CSS代码较为冗长。

浏览器支持：Windows平台——IE 5.0及以上版本、Netscape 7、Opera 6及以上版本、FireFox；Mac OS X平台——IE 5.2、Safari、Firefox。

4.2.5 选择

应该使用哪种方法呢？这要自己选择。在大多数浏览器都支持前面提到的“CSS生成内容”的那一天之前，Leahy/Langridge、Rundle或Levin的方案仍然是最好的选择。若是图像替换技术没有出现，那么禅意花园中很多与Hellsing的Revolution! 类似的作品也都不可能实现。在对未来的提交作品要求中，禅意花园也明确地提出了这一点，鼓励大家发现更具可访问性、兼容性的图像替代方案。

4.3 Deco

Marc Trudel，设计师

www.csszengarden.com/094

用最少的图像带来最大限度的视觉冲击

在开始创作之前，Marc Trudel总是希望他的设计过程能够像进行仪式一样有条不紊。Trudel首先访问了一些他欣赏的网站，用一个小时的时间欣赏他人的作品并收集内容素材，包括照片、图示和文本等。接下来他开始在Adobe Photoshop中创建原型。与其他图形设计师不同的是，Trudel没有将草稿打在纸上，而是直接选择了更易把握细节的Photoshop方式。

2004年初冬，Trudel却在弗罗里达州迈阿密闲逛时突然找到了灵感，他随即放弃了仪式一般的设计过程。Trudel钟情于南部海岸的装饰艺术建筑的特写效果，并拍摄了很多照片。Trudel更是对其中的一幅照片所表现出的简洁的线条赞不绝口，它也成为了禅意花园作品Deco的灵感来源。

4.3.1 用另一种方式去思考

对于那些曾用图像切片方式布局Web页面的“守旧”的设计师来说，在CSS中使用图像则是一种完全不同的思考方式。在图像切片的布局方式中（如果很幸运没有用过这种方式，那么也没有必要再了解它了），设计师通常需要首先在Photoshop中完成整幅图像，然后根据需要将其切成小片，最后在Web页面中用HTML表格将其再次组合起来。

这些表格组成了一个网格系统，且这种布局方式在20世纪90年代的Web设计中也处于支配地位（图4-3-1）。但不幸的是，这种阻碍进步、影响可访问性且影响网站功能的方法在今天仍未彻底消亡。

图4-3-1 基于表格的网格设计所带来的限制

传统切片方式所带来的一个致命的限制却很少被提及，特别是在处理图像时，必须确保每张图像都恰好符合网格，也就是那一系列方框的大小。即使说这种布局方法彻底摧毁了Web作品的创造性也丝毫不为过。太多的设计师陷入到了方框设计的怪圈，甚至还陶醉于其中。

但CSS布局却将我们从这个限制中解放了出来。虽然所有CSS布局的实现仍旧基于盒模型，但我们仍可发现二者的显著差异。在CSS布局中，可以仍旧用网格的方式思考——但如果愿意的话，也可以从中彻底地跳出。通过巧妙的设计以及灵活的图像布局，设计师可以超越网格的限制，以更加流畅、开放的方式思考（图4-3-2）。

图4-3-2 Deco的整体效果显得非常轻快、开阔。虽然在表格方式中也不是不可能实现，但在表格布局起支配地位的年代中，这样的创意却非常少见

摆脱了表格的限制之后，设计师在创作时不再有束手束脚的感觉。这一转变所带来的最大的好处之一就是，我们能够以一种完全不同的方式使用图像，让作品远远好过从前。

严格、刻板且阻碍设计师发挥的网格布局年代已经过去。借助CSS的帮助，我们可以将图像以背景的形式应用到任何元素上，进而实现诸如图像分层、图像覆盖——甚至在某些浏览器中用PNG透明效果创建出一系列图片之间的交互效果等功能。

CSS不但让设计师变得更有创造力，同时也减轻了页面文件大小，让浏览者也倍感满意。

4.3.2 图像使用技巧

Deco除了在线条运用方面显得简洁、开阔之外，其用CSS应用图像的方法技巧也非常值得我们学习。无论是图像的大小、尺寸，还是图像的位置等相关选项，CSS布局方式中用到的图像都和传统表格布局中的作法大不相同。

1.图像的大小和尺寸

在保证足够质量的前提下，图像文件的大小应该尽可能地降低。表格布局中的图像切片技术就是为了减少页面文件的总大小而产生的。

但CSS却允许更精确地跟踪图像的使用方式及使用位置，进而根据特定需要作出最好的选择和优化。有些情况下，我们将不得不选择一幅较大的图像，而有些时候只要用一张，或一系列较小的图片填充到某个较大区域中即可。

让我们看一下Deco作品中最主要的一张背景图像，Trudel拍下来的这张照片中包含了天空中的云以及该建筑的装饰线条。这张图像让作品显得轻快开阔，营造出了良好的意境，但同时其尺寸也相当让人吃惊（图4-3-3）。

图4-3-3 Deco使用的主背景图

这张图像宽788像素，高497像素。在传统的表格布局中，若设计师希望实现类似的效果，那么他一定会将该图像切分为若干小片。

该图像的大小为45.02KB，若是以表格布局的角度考虑，似乎有些太大了。但请记住，CSS布局中的图像使用方式更加明确专一，若页面中并没有太多其他图像，且这些图像大小也很合理的话，那么这样的背景图片大小则完全可以接受。接下来看看标题图像，该图像只有3.28KB，对标题而言其尺寸也很典型——266像素宽，103像素高（图4-3-4）。

图4-3-4 作为标题图像的透明GIF

2.图像数量

同样一个作品，用CSS设计所使用图像的数量并不一定会比表格布局的少，但用CSS却能在使用更少图像的同时得到更好的效果。表4-3-1列举了Deco中用到的图像及其大小和尺寸。

表4-3-1 Deco中用到的图像

注释：¹ 原文为28KB，疑为笔误。——译者注

那么将如何减少图像的数目，进而降低页面文件总大小呢？本章的主要目的之一就是让我们在使用图像时能够充分展开想象，思考从何处开始着手。下面就列出了一些能够有效减少图像使用的方法。

□ 尽可能地使用文本样式代替图像。在Deco的页首部分我们可以看到，作品的主次标题均用图像得到期望的字体，但其下方quickSummary一节中的文字却并非用图像实现。合理地把握图像和文本之间的平衡将会得到立竿见影的效果。

□ 只保留图像中为实现预期效果所必需的部分。在使用照片作为背景图或页面标题时，这一条所带来的好处显而易见——丝毫不影响图像质量的同时又降低了文件的大小。

Note

当然，使用当代最新的图像压缩技术能够更进一步地降低图像大小。在Deco中，我们完全可以相信，在不损失过多图像质量的前提下，主背景图仍有相当大的压缩空间。尽管如此，由于该图片在作品中至关重要且支配了非常大的页面空间，设计师仍有足够的理由选择使用较大的文件，以期保证足够的质量，带来更好的视觉效果。

□ 使用细条图像填充背景。bg_blue1.gif用来作为Deco中主背景之外的空白部分的背景，但其高度只有1个像素，以至于其文件大小甚至可以忽略不计——只有140字节。

□ 尽可能地重复使用图像。在CSS中，我们可以将同一幅图像应用到不同的元素上。在Deco中，lightblue.gif就同时成为了三个截然不同元素的背景图像。借助CSS的后代选择器，我们只需书写一次规则即可，之后linkList中所有的ul元素都会自动应用该图像：

linkList ul {

　margin: 0px;

　padding: 0px;

　background-image: url(lightblue.gif);

　background-repeat: repeat-y;

}

□ 合理地选用图像或颜色。若CSS中的color或background-color属性也能实现设计效果，则你应该毫不犹豫地使用这些属性，而不是背景图像。

最后作为补充，若能不使用图像，那么就不要使用。图形设计中最大的诱惑就是为作品添加过多的非必要图像。每添加一幅图像之前都要先问问自己，这幅图像在作品中真的有其明确的目的，会起到预期的作用且能带来美感吗？如果并不能完全确定，那么就考虑将其移除。

3.图像的分层

CSS所提供的另一个从前难以想象的功能就是以分层的形式显示不同的图像，并借此创建出惊人的视觉效果。现今看来，这种效果的确不难实现，但在从前的表格布局作品中却很难做到。

在从前的表格布局作品中，当某个透明GIF位于body或table中，且body或table应用了背景图像或背景颜色时，我们也能看到这样的效果。例如，如下的HTML代码就在body标签中指定了整个页面的背景颜色和背景图片：

<body bgcolor="#3366CC" background="images/bg.jpg">

接下来，那个透明的GIF图像将被置于body中的某处——最有可能在某张表格的单元格中：

<td><img src="../Images/csszengarden.gif" width="266 "height ="103"alt="CSS Zen Garden"></td>

结果将类似于Deco中的效果（图4-3-5）。

图4-3-5 用表格布局将透明GIF图像置于背景之上

但Trudel在Deco中的做法却是将主背景图像应用到#container元素上：

container {

　background: url(bg.jpg) no-repeat scroll left top;

}

然后将该透明GIF图像应用在#pageHeader h1选择器中：

pageHeader h1 {

　background: url(csszengarden.gif) no-repeat left top;

　width: 620px;

　height: 103px;

}

这样即完成了漂亮的页首部分。虽然与图4-3-5所示的图像与背景颜色混合达到的效果一样，但二者的实现方法却截然不同。

4.3.3 最大化视觉冲击

Deco仅仅使用了少量的图像就实现了令人如此羡慕的效果。只要明智地选择图像放置的位置，仔细平衡图像和文本效果的使用，加上简单有效地借助图像或文本处理作品色彩，我们也能够创造出同样精彩的作品——不仅从技术实现角度上看足够优雅，作品本身也会变得超凡脱俗，给浏览者带来强大的视觉冲击。

4.4 No Frontiers!

Michal Mokrzycki，设计师

www.csszengarden.com/097

用圆角图像打破方框的束缚

CSS设计中占支配地位的趋势就是居中、固定宽度的布局加上阴影效果——但Michal Mokrzycki却希望在其作品No Frontiers!中打破这一惯例。Mokrzycki决定不限制他的三栏布局的宽度，让其可以随浏览器窗口大小的变化而自动调整。作品将尽可能地简洁，但仍足够优雅、独特。

与其他严格遵守设计流程的设计师不同，Mokrzycki在设计时更喜欢即兴创作。他首先在自己的照片库里找到了合适的素材，然后不停切换于CSS和Adobe Photoshop之间，以实现他的灵感。在这个过程中， Mokrzycki发现了CSS的强大之处就在于它能够让设计师完全无拘无束地进行创作，这也正是该作品被命名为No Frontiers!的原因。

4.4.1 方框问题

Web页面在历史上一直看起来如盒子一般四四方方，这并不是个意外。但具有讽刺意味的是有些人却批评CSS布局是引发这一问题的罪魁祸首！早期基于表格布局的作品均大量使用了边框和内边距，这也使此类作品看起来似乎是由一个个方框组成，页面元素之间也缺少了联系（图4-4-1）。

图4-4-1 早期的Web页面中经常滥用方框

那时大多数个人计算机的屏幕分辨率只有640像素×480像素——与今天的大屏幕比起来显得非常小，自然空间也变得极为珍贵。加上浏览器方框界面和计算机屏幕方框外形带来的暗示，我们只能继续在方框中不停地嵌入另外的方框。

从视觉角度考虑，将信息埋没在一个又一个的方框中并不能使浏览者轻松找到。当然，那是一个随心所欲的时代——Web刚刚出现不久，无论是设计师还是用户都被其深深吸引，自然也就不会对界面样式太过于挑剔。

因此，当CSS这种新的、专注于视觉表现的布局方法出现时，大多数人都在考虑如何将他们从前熟悉的表格布局改为用CSS实现。人们对分栏布局的关注，以及随后为这类布局添加的一系列修饰（例如边框）均很自然地导致早期的CSS作品被人诟病为滥用方框（图4-4-2）。

图4-4-2 早期的CSS布局：分栏布局的确能够带来四四方方的感觉。但考虑到当时的特殊情况，此类布局仍流行了起来

说CSS对方框问题负有主要责任显得有失偏颇。随着我们越来越深入地了解CSS，包括聪明地使用图像（特别是在背景图像使用上），用层将图形、图案等装饰元素组合起来等，CSS布局模型能够实现的效果已经远远超过了从前表格布局的效果。

No Frontiers!就通过圆角形状的装饰替代了方框那单调的边缘，整个作品给人的感觉也显得更加柔和、统一。

Note

幸运的是，随着Web设计技术的日趋完善，设计师们开始使用切片技术在表格布局的页面中添加更多的图形。一段时间之后，这种方法开始走向成熟且逐渐被大家接受，为Web设计带来了一丝新意。但在很大程度上，方框问题始终是Web设计中的一片挥之不去的阴影。

4.4.2 实现曲线效果

No Frontiers!中演示了很多为作品添加曲线效果的方法，让作品摆脱“四四方方”的样子。这些方法都需要这样或那样的背景图像支持。

1.简单曲线：单一背景图像实现

最简单的为作品添加曲线效果的方法就是创建一张带有曲线且内容部分空白的图像。然后用CSS将其设置为某元素的背景即可。

No Frontiers!中演示了这种方法—— 页首部分“The Road to Enlightenment”的右边缘呈现出了漂亮的圆角效果（图4-4-3）。

图4-4-3 No Frontiers!中的一幅圆角标题图像。注意右面的透明效果

该圆角图像就是以背景的方式应用于#preamble中的h3元素上的：

preamble h3 {

　background: transparent url(enlightment.gif) no-

　repeat top left;

　width: 291px;

　height: 37px;

　margin-bottom: 10px;

　padding: 0;

}

但若是想要在已经有背景的元素上再应用这样一幅带有曲线效果的图像，又该怎么做呢？

2.在多个元素上应用背景

用CSS在多个元素上应用背景图像将会让我们受益匪浅。通过合理地将背景图像应用到若干元素上，在实现最终曲线效果的同时，图像文件大小也会有所降低。

在No Frontiers!中的“CSS Zen Garden”标题处可以看到该技术的实际应用。“CSS Zen Garden”标题的右下角带有圆角效果，且圆角下方还依稀露出了一部分条纹背景图像（图4-4-4）。

图4-4-4 圆角标题图像看上去位于条纹背景图像之上

为了实现这样的效果，Mokrzycki首先将条纹背景图像（一幅细长的小图像，见图4-4-5）应用于body元素之上：

图4-4-5 该细长的背景图像应用于body元素上，并在x方向上重复显示

body {

　font: small "Trebuchet MS", Verdana, Arial,

　Helvetica, sans-serif;

　color: #676767;

　margin: 0px;

　padding: 0px;

　background: #fbfbf2 url(page_back.gif) repeat-x fixed;

}

然后，将圆角图像应用于容器元素之上：

Note

图像的透明设定将允许其他的背景颜色或背景图片透过上面图像的透明部分显示出来。

container {

　padding: 0px;

　margin: 0px;

　background: transparent url(body_back.png) no-repeat

　top left;

}

从概念上讲，此时背景图像将分层显示，既实现了圆角效果，又在其下显示了不同的图案。在作品的右上角处也能看到该技术的实际应用：链接列表的头部的圆角效果同样呈现于条纹背景之上（图4-4-6）。

图4-4-6 另一个分层背景图像的实例

3.修饰内容区域的边角

通过使用这种层的概念，我们也可以将多个圆角甚至其他边缘修饰效果应用到内容区域上。用这种方法实现圆角效果的挑战在于，它必须依赖多个不同的HTML元素。

在No Frontiers!的#pageHeader节和#quickSummary节中可以看到该技术的实际应用。最终效果很漂亮——作品中该文字区域的右上角和右下角都以圆角方式显示（图4-4-7）。

图4-4-7 包含文本内容的多个元素组成的背景

若是没有了CSS，那么实现这种效果则需要一张单独的图像，或者用表格将若干张图像组合到一起。但在CSS中，我们完全可以仅仅为圆角部分创建图像，并将其应用到文本区域，这样在保证必要效果的同时也降低了图像文件的大小。

Mokrzycki为此创建了两幅图像，分别用于该区域的顶部（图4-4-8）和底部（图4-4-9）。

图4-4-8 实现该效果的顶部图像，图像自身包含文字

图4-4-9 实现该效果的顶部图像。注意，在这两张图像中灰白相间的格子图案表示图像的透明部分

随后将这两幅图像分别应用于#pageheader和#pageheader h2元素上：

pageHeader {

　position: absolute;

　left: 0px;

　top: 190px;

　width: 291px;

　height: 159px;

　background: transparent url(green_top.gif) no-repeat

　top left;

　z-index: 3;

}

pageHeader h2 {

　position: absolute;

　top: 118px;

　background: transparent url(green_bottom.gif)

　no-repeat bottom left;

　width: 291px;

　height: 135px;

　margin: 0;

　padding: 0;

}

但#pageHeader h1和#quickSummary这两个元素却并不包含任何背景图像定义。实际上，它们均应用了一些定位技术。h1元素用来实现背景颜色，其中的HTML文本内容也经过了一定样式的修饰：

pageHeader h1 {

　position: absolute;

　top: 59px;

　background-color: #bbbf58;

　border-right: 2px solid #fff;

　width: 289px;

　height: 150px;

　margin: 0;

　padding: 0;

}

quickSummary {

　position: absolute;

　top: 270px;

　left: 20px;

　width: 245px;

　line-height: 2;

　z-index: 3;

}

quickSummary p {

　color: #fff;

　font-size: 11px;

　line-height: 1.5;

注意到上述代码中固定了各节的高度。这样即可避免该区域大小变化对圆角效果的影响。

Note

一些更复杂的相关技术，例如Douglas Bowman的 “ Sliding Doors of CSS”（www.alistapart.com/articles/slidingdoors和www.alistapart.com/articles/slidingdoors2）等都依赖于分层背景的概念。

4.自定义列表项目的指示符号

这个技术同样可以将图像应用于元素的背景上——在这里为li元素。这些圆型、基于图像的列表项目指示符号能让列表内容更好地融入到No Frontiers!作品的整体意境中（图4-4-10）。仔细体会其融入作品主题的方式，我们也能够用自己的图像创建出类似的效果。

图4-4-10 带自定义项目符号而链接列表

为了能在No Frontiers!中自定义所有项目列表指示符号，Mokrzycki首先创建了三个小图像。第一个使用淡绿色，用于主链接列表中。第二个使用淡蓝色。用于作品存档链接列表中。第三个使用浅红棕色，用于资源链接列表中。

然后，将这三个指示符号图像相应地应用到链接列表中各元素的背景上：

lselect li {

　background: transparent url(link_dot.gif) 0 7px no-repeat;

}

larchives li {

　background: transparent url(link_dot2.gif) 0 7px no-repeat;

}

lresources li {

　background: transparent url(link_dot3.gif) 0 7px no-repeat;

}

使用不同颜色或不同样式的指示符号图像能够丰富作品的细节，且给用户一定的暗示，表明列表之间和列表中元素之间上下文关系。

4.4.3 多姿多彩的图像

无论想通过圆角还是别的什么边缘效果打破那沿用已久的方框布局，恰当的图像应用技术总是能够让作品充满独到的新意。适当地用图像进行修饰将让整个作品的视觉效果变得截然不同，正如我们在No Frontiers!中所看到的一样。

4.5 Coastal Breeze

Dave Shea，设计师

www.csszengarden.com/013

为作品创建图像，并寻找额外的素材

被本地居民和著名作家Douglas Coupland称为“玻璃之城”的温哥华是一座繁荣的城市，坐落于加拿大西海岸的一片高耸入云的群山脚下。几根浮木、几片贝壳，加上一些玻璃碎片等海洋相关的作品主题让城市的形象呼之欲出，若是再来上几片寿司那就再好不过了。但设计师Dave Shea却更懂得在适当的时候戛然而止。

Coastal Breeze中的图像完全是手工在Adobe Photoshop中绘制完成的，没有用到任何照片素材。借助于Photoshop提供的各种绘画工具，Shea未使用任何摄影照片就实现了作品中栩栩如生、富有材质感的效果。

4.5.1 从这里开始

Coastal Breeze中的各个元素最初是为别的站点创建的，该站点在禅意花园发布之前几年就已经上线，但现在已经关闭。原Photoshop图像创建于2001年初（图4-5-1），其中使用了超过300个图层。Shea找出了这个文件，把其中需要的元素提取出来并布置在新作品中。调整图像相对来说较为简单，难点在于如何创建出能够包含住页面文本的布局。

图4-5-1 作为Coastal Breeze起源的原Photoshop图像

原作品中这些元素构成了一个大致呈长方形的框架，并用框架中包含的HTML frame显示实际内容，而禅意花园的内容长度又让我们不得不使用垂直滚动的布局。这种种问题在开始新作品之前都要经过仔细斟酌。

Shea从一个方形的框架开始设计。将该框架应用到Coastal Breeze中的最干净的方法似乎就是将其劈成上下两部分。两个L字母型的对角既有力地让Coastal Breeze体现出框架的感觉，又给作品留出了必要空白。

4.5.2 绘图技巧

当然，并不是每个人都喜欢手工绘制整个作品的，但很多Coastal Breeze中用到的绘图技巧在其他情况中也同样适用，值得我们学习——正所谓胸中有丘壑，下笔如有神。注意下面的一些技巧适用于Photoshop。因为图形处理工具大都提供了类似的工具，所以即使不用Photoshop，也能用其他软件实现同样的效果。

1.使用画笔和变换工具

右上角的玻璃碎片投射的阴影加上其透明效果，给人感觉如同阳光正透过它们一样（图4-5-2）。在Photoshop中实现这样的效果要比仅仅简单添加阴影图层复杂些，但也不会复杂太多。要想实现漂亮的阴影效果，首先应从复制一个新的前景图层（选择Layer > Duplicate Layer）开始，这里我们用一个玻璃弹子做示范。然后将该复制图层置于原图层下方，并填入单一颜色。借助于自由变换工具（Edit > Free Transform）所提供的放大、缩小、旋转和扭曲等功能，我们可以将该图层垂直压缩并向左扭曲，然后柔和一下其过于分明的边缘（图4-5-3）。

图4-5-2 为玻璃碎片创建透明的阴影

图4-5-3 简单的玻璃弹子及其实心阴影。倾斜的阴影暗示物体处于三维空间中

让阴影变得透明则需要使用橡皮擦工具和涂抹工具，二者的大小、力度均可设置。我们可以用较大且边缘柔和的橡皮擦手工擦去阴影的中部颜色，然后用较小且柔和的涂抹工具让剩下的部分变得不完整，模拟出实际阴影的样子（图4-5-4）。理想化的透明球体效果看起来固然美观，但现实中存在的物体却很少能如此完美无瑕。若不继续添加一些细节，则无法体现出物体的真实感。最后的效果是通过在玻璃弹子上添加一些微痕实现的（图4-5-5）。

图4-5-4 使用橡皮擦和涂抹工具让玻璃弹子的部分阴影变得透明

图4-5-5 完成后的玻璃弹子，添加了一些瑕疵用于表现真实感

2.使用减淡和加深工具

虽然在后期修饰过程中完全可以抛弃加深和减淡工具，但我想我们不会这样做的。借助于加深和减淡工具，我们即可为复杂图像相应地添加极为逼真的阴影和高亮效果。减淡和加深工具类似于橡皮擦和涂抹工具，甚至它们的设定选项都差不多。从简单的单一颜色图形以及其下的图层（图4-5-6）开始，我们即可用减淡工具在叶子上画出浅色的叶脉。不同的力度设置也会给叶脉添加阴影的感觉，呈现出轻微的立体感。

图4-5-6 简单的叶子形状

即使有了网格状的叶脉，完全平整的叶子看起来仍显得不够真实。因此，我们接下来需要用加深工具在叶子表面添加更多的阴影效果，以实现立体的三维效果（图4-5-7）。

图4-5-7 叶子上添加了高亮和阴影效果，用来模拟叶脉和材质

目前提到的这几种工具只不过是用于绘出一片叶子。随后，让我们将这片叶子复制若干次，调整每个副本的尺寸并适当旋转，最终组成一条蔓延的藤蔓的形状。在绘出藤蔓本身并对其进一步的高亮、阴影修饰之后，我们终于得到了魔术般的效果（图4-5-8）。

图4-5-8中很容易发现，随着叶子逐渐变小，上面的叶脉也变得渐渐模糊起来——图像尺寸变小之后，细节自然也将变得难以分辨。但需要注意的是无论如何模糊，肉眼仍旧能够隐约分辨出一些，因此无论如何，精益求精的细节总归都会将让整个作品更加具有说服力。缩小被精雕细琢过的作品对设计师来讲也是个不小的挑战，因为浏览者都会自然地希望它能够大一些，以便于仔细欣赏。

图4-5-8 完成后的藤蔓和叶子

4.5.3 创建图像

虽然不是所有人都有那么多时间花费在手工绘制图像上，但像Coastal Breeze这样精美的作品仍让人觉得这些时间花费得物有所值，某些时候手工绘制也不失为一个好方法。

基于现有的图形作品进行图像创建或许是最直接的办法。在整站设计中，一般很少有人选择手工绘出所有页面，很多设计师都会先在纸上画出作品的草稿，并想好布局中将遇到的各种问题之后才打开计算机。日常积累的图画、照片等其他创造性的作品将会在我们厌倦现有资源或灵感枯竭时有效地起到启发作用。

虽说术业有专攻，但目前很多掌握技能各不相同的人们都在进行着Web设计。即使不懂绘画，仍可以借助现有的资源完成自己的作品。由于技术不断发展（技术也在不断贬值），知道如何使用哪怕是很便宜的扫描仪和数码相机也足够生成高质量的Web设计素材。虽然这些产品都提供了详尽的说明书，但若没有任何基础的话，仍无法避免开始时相当长的一段学习时间。

4.5.4 获取图像

虽然有很多客户希望我们能够精心雕琢作品中的图像，要是能委托专门的设计团队制作那就更好了，但实际上，大多数设计师给出的预算都没有包含聘请专业设计团队的开销。

1.委托设计和免专利使用费（royalty-free）资源

虽然良好的人际关系网络可能会帮你找到中意的摄影师或图像设计师，但有时我们仍免不了要在本地电话黄页中逐一搜寻。但也没必要将眼光局限在本地——很多现有的网站都为该领域专家为我们提供了互相发现和彼此交流的机会。例如Aquent（www.aquent.com）就是其中的佼佼者，其他同类网站也有它们自己的独到之处。

委托设计作品通常较为昂贵，而很多项目却并没有这么多的预算。因此我们对免专利使用费图像更加感兴趣。根据其声明条款，免专利使用费的含义就是只要一次购买，即可终身使用该资源——无论用于何处或重复使用多少次，都无需再额外付款。除了转手之外，大多数免专利使用费协议都允许随意使用购买的图像。这也就意味着购买之后你就可以在多个项目中重复使用。唯一的风险就在于别人可能也购买了同样的图像，所以很有可能你会发现有一天你的最新杰作“职业商务女性”与某人的“理疗师”是同一个人——这种情况真的发生过。

如果预算仍承受不起免专利使用费图像，那么也有一些网站提供免费的素材。为了让那些刚出道的摄影师和图像设计师有交流的平台，类似iStockphoto（www.istockphoto.com，图4-5-9）和stock.xchng （www.sxc.hu）之类的社区均提供了分类良好的索引，其中包含了大量的中高解析度的照片和图像，非常适合应用于Web页面中。只要花费极低的价钱即可得到这些图像，有些甚至可以免费使用，无论是否收费，都非常物超所值。

图4-5-9 iStockphoto鼓励艺术家们彼此分享作品

2.其他可选择的资源

若将视野放宽，将找到更多的免专利使用费资源。因为通常来讲很多版权法律条款均有一定的时限（时限长度取决于所在的国家），所以很多失去版权保护的作品极有可能尚未过时。例如在美国，2004年年中时所有发布于1923年前的作品均失去了版权保护，且发布于1923～1963年间的作品也不能再延长其版权保护时间。

不受版权限制的作品可以被用于任何目的，无论商业还是个人，所以若想使用另一时代的作品，这将会是个非常值得考虑的方案。寻找不受版权限制的作品非常简单，只要在喜欢的搜索引擎中敲入“public domain”即可，图书馆和一些艺术品商店也大都提供了不受版权限制的作品目录供参考。某些图书馆中甚至还有专门有其馆藏的不受版权限制作品的目录。

但我们并不总是要上溯到如此久远的年代，当代也有很多不受版权限制的作品。创作共用组织（http://creativecommons.org）就是为了“扩大创造性作品的使用范围，让人能够基于前人的作品进一步创造并继续分享”（图4-5-10）而成立的。由于该站点在2004年以来的主要目标就是鼓励艺术家们分享他们的作品，所以我们能够容易地找到很多基于该许可协议发布的作品。但在使用这些作品时，不要忘记创作共用许可协议也有很多不同的授权等级——并不是所有作品都可以随意使用的。

图4-5-10 创作共用等站点提供了不受版权限制的作品

3.版权相关的注意事项

若某件作品不能使用，但在设计中却必须要用到，那么首先要做的就是向作者（很多情况下也可能是发布者）请求使用权。可能发生的最坏的结果就是他们不允许。要确保授权信息以书面形式来自合法的版权所有者，然后才能在授权范围内使用该作品。

同样还要注意的是，版权法律非常复杂且经常变化。无论作者是否显式声明了版权信息，创造性作品一问世就自动受到版权法律的保护。

要确保充分理解了法律的条款。若不是绝对地确信可以使用某件作品，那么要么去获取明确的许可，要么使用其他的替代品。未经许可就使用受版权保护的作品是违法的，将会因此被起诉。千万不要存在任何侥幸心理。

Tip

在http://creativecommons.org/getcontent中可以搜索到创作共用作品。

4.5.5 结论：关于手工绘图

所谓勤能补拙，即使没有绝佳的天赋，只要肯花费时间，一样能够得到相当好的结果，Coastal Breeze就是一个有力的证据。为了完成这件作品， Shea估算出他在Photoshop中至少花费了80个小时。

寄希望于客户给你如此宽裕的时间无异于痴人说梦。在商业项目中，客户大多都希望你能从照片中取材，而不是等待类似Coastal Breeze这样漫长的手工绘制过程。若选用了恰当的资源，使用照片素材在保证预算的前提下同样能够营造出相似的意境。

Coastal Breeze作品看起来确实与众不同，但在现实中，项目中能做到什么，不能做到什么却通常是由预算决定的。除了一些细节修饰之外， Coastal Breeze看起来近乎完美。

Tip

一些有用的区域性版权资源¹：美国版权局网站（www.copyright.gov）；加拿大著作权法网站（http://laws.justice.gc.ca/en/C-42）；英国专利局网站的版权信息页面（www.patent.gov.uk/copy）。

注释：¹ 中华人民共和国国家版权局网站：http://www.ncac.gov.cn/。——译者注

4.6 What Lies Beneath

Michael Pick，设计师

www.csszengarden.com/019

在二维平面中表现出三维的意境

头脑游戏和图像引发的联想让Michael Pick产生了该作品的灵感。Pick最开始考虑用纽约城中的公共花园作为该作品的素材，并拍摄了很多数码照片。但当他在Photoshop中处理这些图像时，却突然意识到了作品与蚁巢的某些共同之处。Pick随即放弃了创建普通的“地上”花园的想法，转而去描绘地下的场景。

Pick从一开始就在考虑能在地下发现的其他东西。灵感喷涌而至，最终完成了幽灵般奇异而居然同样美丽的作品——What Lies Beneath。

4.6.1 创造环境

大多数Web页面都主要关注于如何用足够可用且吸引人的方式传递信息。人们都要求设计师的作品有足够的创意，所以不得不承认Web站点最主要的需求就是按照惯例将图像和文字以二维的方式合理美观地组织起来。

当然也存在着一些例外：在Web发展的早期出现了一种名为VRML （Virtual Reality Modeling Language，虚拟实境标记语言）的技术。通过在模拟的环境中给出指定的坐标，开发者能够创建出可应用于Web页面中的三维模型。在安装了VRML插件之后，访问者也可以在Web页面中浏览这些模型。

之后不长时间，苹果公司也引入了QuickTime VR技术，设计师可以使用该技术将连续的全景图拼接起来。与VRML类似，QuickTime VR同样需要浏览者安装特定的插件。之后访问者即可在Web页面中看到这个模拟的全景环境。

当然，在得到浏览器支持或通过安装插件之后，三维电影或游戏（例如Flash、Shockwave以及其他格式的动画视频）同样也可应用于Web页面中。

偶然间，我们幸运地发现了Web媒介本身的潜力——无需任何虚拟现实工具或是特定的软件，即可在Web页面中表现出深度！无需再把想象禁锢在二维的平面国度中，我们自己——正如Pick做的那样——也能够在页面中表现出深度信息，且营造出相当真实的三维环境。

环境模拟所涉及的研究面非常广，包括复杂的理论科学等。若想开始学习这方面的相关知识，那么可以从电脑游戏开发图书开始入手。

电脑游戏的真实度不断提高，我们也越来越惊讶于其能达到的视觉效果。因此，学习游戏设计原理将显然给我们带来很多启发。

Note

VRML并没有消亡。实际上，该技术仍被研究并应用于某些场景中。www.openvrml.org就是开源版本VRML——OpenVRML的网站。

Note

更多关于Apple公司QuickTime VR的内容可在此访问：www.apple.com/quicktime/technologies/qtvr。

Note

Web3D协会（Web3D Consortium， www.web3d.org）是一个开放标准项目，致力于为Web平台研究并制定三维标准。

1.理解细节

What Lies Beneath丰富的细节给作品带来了惊人的视觉效果。在明暗的阴影中，我们能够发现很多隐藏于地表以下的物体，有些是我们从前没有想到会出现在这里的。

设计师的主要职责之一就是仔细观察生活中的细节，以便在作品中充分地重现环境。或者像What Lies Beneath那样，为欣赏者营造出特定的意境。

这就意味着必须学会全面理解细节，而不仅仅停留在能够看到的水平上。例如，当我们走入一间房间时，立刻就会注意到其中最明显的陈设：墙壁、窗子（或许没有窗子）和家具等。

但这些东西的质地又是怎样的呢？木板上是否有裂纹？油漆是否已经斑驳？墙面的石灰是否有些脱落？玻璃窗是否有损坏或好久没有擦拭过？类似地，你是否注意到光影效果呢？房间的整体感觉又是如何呢？沉重？轻柔？开阔？还是狭小？所有这些问题的答案都不是那么显而易见，都需要我们的仔细观察才能够回答。但若你想让作品有足够的真实感，那么这些细节却都是必不可少的。

在What Lies Beneath中，细节无处不在，例如最初启发设计师应用当前风格的蚂蚁等（图4-6-1）。

图4-6-1 将蚂蚁引入到What Lies Beneath中（为清晰起见，图像已被调亮）

2.表现真实感

有意思的是，创建真实感不一定必须用照片作为素材。What Lies Beneath中用到的很多图像都不是来自于实拍照片，但仍旧表现出了非常强烈的真实感。

这些图片能够唤起人们对真实场景的想象。若要创建出能让人联想，而不是简单写实风格的图像，那么可以参考如下一些建议。

□ 要特别注意图形边缘的效果。在学习绘画轮廓时，美术专业的学生通常都倾向于使用较为硬性的方式，例如用线条表示某人胳膊的轮廓。但这些学生很快就会知道，轮廓并不是这么简单的。事实上，边缘来自于线条、光影、正负空间之间的交汇融合，而正是这种融合才让我们体会到线条的感觉（图4-6-2）。

图4-6-2 边缘并不是线条，而是通过光影、线条以及空间的相互作用得到的（为清晰起见，图像已被调亮）

□ 注意形状。看看四周找到一个物体——随便什么物体都行，然后仔细观察并说出它的形状。大多数物体都是由若干种形状组合而来的，这也正是区别于其他物体的关键之处。我们并不能简单地说某个茶壶是圆形的。组成茶壶的形状当然有圆形和弧形，但不同茶壶的外形设计千差万别，某些茶壶很有可能还包含其他一些独特的形状。

□ 图像的材质能够为物体带来真实感。为了创建What Lies Beneath中的泥土效果，Pick特地去拍摄了纽约休斯顿大街上的一个交通灯控制台。有趣的是，这个与主题毫不相关的控制台材质却带给了人们极为真实的泥土效果（图4-6-3）。

图4-6-3 交通灯控制台的表面材质却给浏览者带来了泥土的感觉（为清晰起见，图像已被调亮）

□ 深度的确可以表现出额外维度的感觉，即使是在二维环境中也是如此。在地理学中，x坐标表示水平方向，y坐标表示垂直方向，而z坐标则表示第三个维度。深度与z坐标密切相关——除了宽度和高度之外，第三个坐标轴就用来表示深度信息。在二维作品中，深度是通过边缘的光影体现出来的。图2中的深色区域看起来就像是凹陷了进去。

□ 重力的模拟同样重要。在二维作品中，重力是通过不同的视觉重量（visual weight）体现的。在模拟的环境中，该原则同样适用，但作品的最远处必须要有一些起指示作用的元素。What Lies Beneath中的最远处就是地底深处，这部分使用了最深最浓重的颜色，以体现出重力感（图4-6-4）。

图4-6-4 作品中阴暗沉重的部分，表现了重力感（为清晰起见，图像已被调亮）

在用二维设计描述三维物体时，结合使用上面提到的几种方法将会得到我们期望的物体的体积感（mass）。

在视觉设计的上下文中，我们可以将体积感理解为三维物体的二维表现样式，也就意味着用某种方法让物体从其周围的空间中突显出来。请参考如下几条建议。

□ 封闭区域是由颜色和材质组成的。

□ 物体的体积是由长宽高组成的。

体积感是这些视觉元素组合的结果，由此营造出了真实感（图4-6-5）。

图4-6-5 人类腿骨埋在泥土中的图像，表现了体积感（为清晰起见，图像已被调亮）

Note

虽然设计领域中对体积与封闭区域的理解与数学上的相应概念有重合之处，但由于研究领域不同，二者在细节上仍有所区别。

最后，在真实世界中取材，然后将其应用于模拟环境中自然会大大增强最终效果。在What Lies Beneath中，那个奇怪的、长着星形鼻子的鼹鼠就来自于摄影作品——这画龙点睛的一笔毫无疑问地给浏览者带来了绝妙的真实感（图4-6-6）。

图4-6-6 令人毛骨悚然的真实感：长着星形鼻子的鼹鼠

3.处理层次

Web设计师的另一个很少考虑的问题就是作品的层次。顾名思义，层次表示环境的分层状态。联想某幢办公大楼能够帮助你理解层次的含义——每一个楼层都在不同的层次上。

在游戏开发领域中，人们非常重视在游戏环境中创建具有真实感的层次。游戏设计师经常会参考建筑师或环境设计师设计建筑的方法。作为Web设计师，我们也可以从建筑学、环境设计以及游戏设计中学到很多关于创建分层环境的方法。下面就列出了一些。

□ 层次之间的线条、空间和大小要有区别。

□ 层与层之间仍是一个整体，并以某种方式保持着联系。

□ 层与层之间的过渡要自然。

□ 作品中总是要包含焦点或重点。

□ 正如前面提到过的那样，作品中绝对不能缺少重力感。人们都希望物体能够置于某个平面上。

What Lies Beneath中有三个层次：天空（图4-6-7）、草地（图4-6-8）以及地下部分（图4-6-9）。

图4-6-7 作品的顶层——天空

图4-6-8 作品的中间层——草地（为清晰起见，图像已被调亮）

图4-6-9 作品的底层——地下

仔细观察过这些图像之后，就会发现作品良好地运用了层次。每一个层次都能与其上一层（图4-6-10）和下一层（图4-6-11）良好地衔接起来，而重点则被放在了地下一层。

图4-6-10 从顶层到中间层的过渡。注意在草隙之间仍可以看到天空

图4-6-11 从草地层到地下层的过渡是由逐渐加深的颜色实现的，表现出草生长在土地上的含义（为清晰起见，图像已被调亮）

有趣的是，由于地下一层的高度在作品中占有最大的比重，加上其相对于上部和中部更深的颜色，所以作品很自然地带给人们相当的重力感。体积感就是由这些视觉元素组合起来形成的。良好的体积感也将带来绝佳的视觉体验，让浏览者就像是在欣赏真实物体一样（图4-6-5）。

4.6.2 模拟环境中的非真实4.6.2 存在元素

我们都知道，地下并没有页首文字、正文或链接之类的东西。尽管如此， Pick还是想方设法用一些独到的技术将这些非真实存在的元素和整个作品有机地结合了起来。

首先看一下页首文字（图4-6-12），Pick特别处理了字体，以便营造出低调、久远的感觉。将裂痕和泥土效果添加到这段文本上以后，页首文字也更好地融入到了整个作品中。

图4-6-12 经过衰退陈化处理的文字能够更好地融入周围环境中

Pick在选择颜色时同样非常小心。链接的颜色来自于星形鼻子鼹鼠身上的较明亮部分，为作品添加了一丝明亮的意味，进而更好地将这些链接与作品基调融合起来（图4-6-13）。

图4-6-13 坚持使用取自环境中的同一种颜色让这些非真实存在的文字不至于显得太过突兀

作品中的链接并没有使用不同的鼠标悬停颜色，而只是在鼠标悬停时简单地显示出下划线。这并不是由于设计师的粗心，而是为了避免引入更多潜在的非真实存在元素。

若是Pick将链接设置为其他什么颜色，例如天空部分的蓝色，或是草地部分的绿色，那么整个作品的意境将荡然无存。原因很简单——这样做也就意味着把其他层次中独特的元素风格引入到与其毫不相关的层次中。

正因为Pick在设计时充分地考虑到了这些，整个作品的风格才仍旧能够保持高度统一。

4.6.3 空间相关的收获

总体说来，禅意花园的本意就是鼓励大家进行实验性的创作，What Lies Beneath中描绘的地下环境正是这种创造力的一次绝佳体现。依靠着自己的聪明才智，加上一双善于发现的眼睛，Michael Pick最终完成了这幅如此独特的作品。