第2章 Photoshop网页版面制作 教学目标 1. 掌握使用photoshop 制作网页中图形元素的技巧 2. 掌握使用photoshop 进行整体版面的制作 3. 掌握photoshop 切片工具的使用方法 4. 掌握photoshop 与dreamw eaver 结合的方法 教学要求 知识要点 能力要求 关联知识 Photoshop 画线 画笔的设置 Photoshop 图案填充 自定义图案的能力 Photoshop 按钮的制作 路径与形状图层的绘制;图层样式的用法 Photoshop Logo 标志的制作 文字图层的用法;图层的用法 Photoshop 图像的合成 图层蒙版及图层混和模式的用法 Photoshop 网页版面制作 色彩、文字、版面的设计 Photoshop 切片与输出 切片的用法;输出导入 Dreamw eaver 的方法 2 .1 网页图形元素的制作 2 .1 .1 各式线条的绘制 在网页中常使用线来分隔版面,或分隔导航条,是最常用的图形元素。在photoshp 中画线是使用画笔或铅笔工具来实现的。 1. 画线 选择photoshop 工具箱中的画笔工具,并设置画笔的半径为1 个像素,设置画笔硬度为0%,按住shift 键拖动鼠标可绘制一条直线。如要连续绘制多条直线,一定要在绘制后一直线前先选择其它工具,然后再选择画笔工具继续绘制,否则连续绘制会出现连笔现象如图2-1 所示。 图2-1 连笔现象 2. 画虚线 画虚线和画直线一样也是使用画笔工具,不过要对画笔间距进行设置。按下快捷键F5弹出画笔设置面板,对画笔的直径、硬度和间距进行设置,如图2-2 所示, 图2-2 绘制虚线的画笔设置 连笔 3. 画凹凸线 凹凸线在网页版面中最常见,对网页有着非常重要的点缀作用,如图2-3 所示。绘制的方法如下:首先绘制一条比背景色暗的直线,然后再绘制一条比背景色亮的直线,线条色彩可选用与背景色同一色系的颜色,然后两直线并列排,这样凹凸效果就出来了。 图2-3 凹凸线 2 .1 .2 图案填充 在网页的背景和Banner 中经常会见到填充的各式图案,如点、方格子,横线、斜线、交叉线等等。网页填充的背景图案往往要先自定义图案,然后再进行填充。 1. 方格子的图案填充,如下图2-4 所示。 图2-4 格子图案填充 方法如下: (1) 新建一40*40px 大小,背景是透明的文件。 (2) 使用单行与单列选框工具绘制两条线,如下图2-5 所示。 图2-5 定制的图案 (3) 全选上图,选择菜单“编辑—定义图案”,图案定义好了。 (4) 选择要填充图案的区域,选择菜单“编辑—填充”,并找到刚才定义的...