第4章 制作网页背景

PS技术

第4章 制作网页背景网页背景是指在网页内容以外，用来填充页面空白区域的部分。大 多数的站点都采用单一的颜色，或者渐变的颜色作为背景。也有一 些站点使用比较复杂的背景。无论使用哪种背景，其作用都是用来 美化页面，或者突出主题和主体内容。下面是一个使用网页背景的 示例，其显示效果如图所示。

PS技术

4.1 制作渐变的页面背景渐变的页面背景使用得非常广泛，制作也比较简单。在 实际制作网页的时候，为了加快页面显示的速度，一般 要使用尽量小的图像文件。所以一般的网页背景都是采 用小图片重复排列来显示。这样就要求在制作渐变的时 候，最好使用线性渐变。目的是方便背景的重复排列。 在Photoshop中，制作渐变有两种方式，使用“渐变填 充”工具和使用图层样式。下面分别进行讲解。

PS技术

4.1.1 使用渐变填充工具制作渐变背景使用“渐变”工具是实现渐变填充的最常用的方法。首先要在“渐 变编辑器”对话框中设置填充的颜色，然后在画布的适当区域上填 充渐变颜色。本实例要制作的效果为白色到深灰色，然后再到白色 的渐变背景，具体操如下所示。

PS技术

4.1.2 使用图层样式制作渐变背景使用图层样式实现渐变填充也是常用的方法。首先要选择制作渐变 的图层或者选区，然后在“图层样式”对话框中，选择渐变叠加样 式填充渐变颜色，具体操作如下所示。

PS技术

4.2 制作图案式网页背景图案式网页背景的制作方法较为复杂一些，要综合使用 各种工具和面板进行制作，同时也可以使用自己搜集的 素材。在本实例中制作的图案式网页背景为天空、野草 和土地组成的图像，包括制作野草的画笔预设、制作野 草图案、制作天空图案、制作地面图案4部分。下面分 别进行讲解。

PS技术

4.2.1 制作野草的画笔预设在制作具体的网页背景之前，首先要制作需要使用的画 笔预设，具体操作如下所示。

PS技术

4.2.2 制作野草图案制作好野草的画笔预设后，要使用“路径”工具和“画 笔”工具等，制作背景中的野草图案，具体操作如下所 示。

PS技术

4.2.3 制作天空图案天空图案的制作相对较为简单。首先要在“渐变编辑器” 对话框中设置填充的颜色，然后在画布的适当区域上填 充渐变颜色，具体操作如下所示。

PS技术

4.2.4 制作地面图案制作地面图案要使用“滤镜”工具制作，具体操作如下 所示。

PS技术

4.3 专家总结在网页效果图的制作中，背景部分是要优先考虑的部分。 好的网页背景可以烘托出页面的主题，制作出很好的页 面氛围。在制作背景时要注意，因为背景中并不显示有 意义的内容，所以最好不要制作得过于复杂。另外，由 于背景部分一般要显

示在整个页面中，所以最好能够使 用重复排列的方法显示，以减少加载背景图片的时间。