第2章Photoshop网页版面制作

第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) 选择要填充图案的区域，选择菜单“编辑—填充”，并找到刚才定义的...