时髦的页背景的制作设计

时髦的页背景的制作设计

【译者的话】 将一张漂亮开阔的照片作为页背景图，不但漂亮吸引，而且也让观众有一种亲临其境的体验感，加强了页所传达的信息。而设计这样一个页，技术上并不难，但在图片处理上却有注意的地方。让我们一起来体验这种充满视觉冲击力的页制作。

北卡罗莱纳州商务部下属的旅游站并没有象其它站一样仅仅介绍该州的迷人景色，而是让你恍如置身于该州的景色之中。因为该站采用了视野开阔、漂亮迷人的照片作为背景。宽广的图片给人一种超大屏幕影院（ IMAX ）的视觉效果，传达出空间感及真实感。整个页显得漂亮迷人。还有一点：这种效果其实很容易制作。

漂亮页从漂亮图片开始。为了设计这样的一种超大屏幕感的视觉效果，背景图片必须很宽――至少 22 英寸 ――比一般的显示器都要宽，这样就算在大小不一的显示器中观看，也一样能占满背景。为了使视觉统一协调，无论页窗口是拉大拉小，我们都要保证背景图片及内容页都仍然居中。

使用具有强烈中心焦点的图片

焦点是最大的关键：上述图片上方的中心位置形成一个视觉焦点，这让我们在观看这个页时有了一个起点。所以我们要选择那些具有中心焦点的图片（参考上方三张图片）。最好是选择那些视野开阔、较少细节的图片。留意上述三张图片中，透视消失点与图片的焦点是处于同一个位置的（或非常接近）。避免构图发散、繁琐或焦点偏离中心的图片，否则会使整个页显得拥挤，让读者无法适从。

在 Photoshop 里准备图片

尺寸及象素：处理图片最好的方法就是将一张原本300dpi 的图片变成 72dpi 。在 PS 里很容易完成，选择：图像 > 图像大小，然后在对话框中，不要选“重定图像像素”选项，在分辨率一栏中输入 72 后，按确定即可。

发掘焦点：观察图片，发现一个合适的焦点，定下一下宽度大约为 22 英寸的区域后剪切。然后选择：文件 > 储存为 web 所有格式，选择 JPEG ，在“品质”一栏中，选择最低的压缩质量（这里，我们选择“中”），尽可能不使图像质量变差而且图片大小不会太大。按“存储”键保存文件。

在 Photoshop 里处理图片过渡

将图片边缘过渡至实色区域

你只是希望背景图片在页上方出现，而图片下方则过渡到一个实色区域，这个实色区域是这个页下方的背景色。这样可保证背景图片不会太大，也可以保证下方的背景平实，不会干扰页上的内容。

用吸管取色然后填充：我们在图片底部区域中取一种主要颜色（注意这里的颜色模式应为 RGB ，记下颜色数值，因为在用 Golive 软件做页时你还用得着）。然后我们可以用渐变工具或一枝柔软的毛笔将图片底部填充，使到图片过渡到实色区域显得温和自然。

预计信贷增长继续呈平稳回落运行态势。 在 Adobe GoLive 建立页

在 GoLive 软件中，建立一个新的页，并存储文件作为你的根文件夹。然后选择 View>CSS Editor ，打开对话框，点击“ Create a Style That Applies to Markup Elements ”键，在子菜单中选择“ body ”。

点击“背景特性”（ Background Properties ）按钮并进行如下设置：

在图像： URL （相对地址）区域中，点击下方“浏览”按钮，然后选择你刚才处理好的图片。您可以通过点击页里上方的预览按钮来观看背景图片的情况，默认模式下，该图片会以水平及垂直方向重复填充背景区域。我们会在下面的步骤中修正这一点。

颜色 (Color) ：点击颜色库，在这里，输入我们刚才取色时确定的 RGB 色值作为页背景颜色。

水平方向（ horizontal ） ：设为“居中”（ Center ），这可以保证需要背景图片无论显示器如何缩放都是处于居中位置。

垂直方向 (Vertical) ： 选择“上方“（ top ），这保证图片是处于页最上方的；

重复（ Repeat ）： 选择“一次”（ once ），这表示图片只会放置一次，而不会在背景中重复图片。

放置（ Attach ）： 选择“固定”（ Fixed ），这保证图片不会随着滚动条上下移动；

这样，我们的背景完成了。

当背景图片处理好后，我们就可按照常规的页制作方法建立页。如果你是按表格来安排页内容，则将表格设为居中，主要内容最好也放置在中间区域，图片上方要空出一定的区域来显示背景图片，空出来的区域高度应该统一，这样整个站看起来才显得协调。

（译注：本文中涉及的页制作，在其它软件如Dreamweaver中，一样可以完成及达到相同的效果。）