设计图片背景网页

时间:2011-09-25 23:20

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

原文出处:www.bamagazine.com

北卡罗莱纳州商务部下属的旅游网站并没有象其它网站一样仅仅介绍该州的迷人景色,而是让你恍如置身于该州的景色之中。因为该网站采用了视野开阔、漂亮迷人的照片作为背景。宽广的图片给人一种超大屏幕影院( 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 ”。

官方QQ:709139970

WSSJ1.CN 粤ICP备15076589号-2