第章Photoshop网页版面制作 优秀教学样本.docVIP

第2章　Photoshop网页版面制作 教学目标 掌握使用photoshop制作网页中图形元素的技巧 掌握使用photoshop进行整体版面的制作 掌握photoshop切片工具的使用方法 掌握photoshop与dreamweaver结合的方法 教学要求 知识要点 能力要求 关联知识 Photoshop画线 画笔的设置 Photoshop图案填充 自定义图案的能力 Photoshop按钮的制作 路径与形状图层的绘制；图层样式的用法 Photoshop Logo标志的制作 文字图层的用法；图层的用法 Photoshop 图像的合成 图层蒙版及图层混和模式的用法 Photoshop网页版面制作 色彩、文字、版面的设计 Photoshop 切片与输出 切片的用法；输出导入Dreamweaver的方法 2.1 网页图形元素的制作 2.1.1 各式线条的绘制 在网页中常使用线来分隔版面，或分隔导航条，是最常用的图形元素。在photoshp中画线是使用画笔或铅笔工具来实现的。 画线 选择photoshop工具箱中的画笔工具，并设置画笔的半径为1个像素，设置画笔硬度为0%，按住shift键拖动鼠标可绘制一条直线。如要连续绘制多条直线，一定要在绘制后一直线前先选择其它工具，然后再选择画笔工具继续绘制，否则连续绘制会出现连笔现象如图2-1所示。 图2-1 连笔现象 画虚线 画虚线和画直线一样也是使用画笔工具，不过要对画笔间距进行设置。按下快捷键F5弹出画笔设置面板，对画笔的直径、硬度和间距进行设置，如图2-2所示， 图2-2 绘制虚线的画笔设置 画凹凸线 凹凸线在网页版面中最常见，对网页有着非常重要的点缀作用，如图2-3所示。绘制的方法如下：首先绘制一条比背景色暗的直线，然后再绘制一条比背景色亮的直线，线条色彩可选用与背景色同一色系的颜色，然后两直线并列排，这样凹凸效果就出来了。 图2-3 凹凸线 2.1.2 图案填充 在网页的背景和Banner中经常会见到填充的各式图案，如点、方格子，横线、斜线、交叉线等等。网页填充的背景图案往往要先自定义图案，然后再进行填充。 方格子的图案填充，如下图2-4所示。 图2-4 格子图案填充 方法如下： 新建一40*40px大小，背景是透明的文件。 使用单行与单列选框工具绘制两条线，如下图2-5所示。 图2-5 定制的图案 全选上图，选择菜单“编辑—定义图案”，图案定义好了。 选择要填充图案的区域，选择菜单“编辑—填充”，并找到刚才定义的图案，如下图2-6所示。 图2-6 填充面板 设置方格子的图层透明度，效果如图2-7所示。 图2-7 表格填充效果 横线图案 要填充横线图案，填充方法一样，只是定义图案的方法为：新建1×6像素的文件，填充最上面像素，如下图2-8所示，这时填充的横线为1像素高，线和线之间的距离为5px。 图2-8 横线自定义图案和填充效果 斜线图案 　 同样定义斜线的图案，新建文件5×5像素大小，填充斜对角5个像素如下图2-9所示。 图2-9 斜线自定义图案和填充效果 浮点图案 同样定义浮点的图案，新建文件7×7像素大小，填充最中间一个像素，如下图2-10所示。还有其它一些图案的定义如图2-11所示，大家可以自己试试定义和填充，看看效果如何。 图2-10 浮点自定义图案和填充效果 图2-11 其它自定义图案 2.1.3 按钮制作 网页中按钮各式各样，往往按钮的形状和样式是网页的重要内容。下面讲解了几款常用的按钮。 透明圆形按钮 效果如下图2-12所示： 图2-12 透明圆形按钮 制作步骤： （1） 建立新文件，80x80大小，RGB模式透明，填充为白色，层，建立50x50的圆形，放在页面正中心，前景设为#99CCFF，背景设为#006699，从圆形左上角到右下角，作圆形辐射渐变效果 图2-13渐变效果再，建立4444像素大的圆形，放置于正中心，从此圆形的右下角到左上角作圆形辐射渐变效果，即如图果 图2-14 图层3效果 （3）再层，建立4242像素大的圆形，放置于正中心，这时设前景色为#99CCFF，背景色为#003366，从此圆形的右下角到左上角作圆形辐射渐变效果，即如图 图2-15 效果图 （4）再层，建立106像素大的椭圆，填充前景色，即如图 图2-16 效果图 （5）输入文字，字号不要太大，文字去掉抗锯齿，并加上投影样式，最后效果如图2-17所示。 图2-17　效果图 2．塑料按钮（一） 效果如下图2-18所示： 2-18 效果图 制作步骤： （1）选择圆角矩形工具，点击工具栏上的下拉三角，打开几何选项，在圆角矩形选项中设置矩形为固定大小，98×28像素，然后将圆角半径设为3像素，选择消除锯齿如图