第2章-photoshop网页版面制作 - 优秀教学样本

《第2章-photoshop网页版面制作 - 优秀教学样本》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第2章　Photoshop网页版面制作教学目标1.掌握使用photoshop制作网页中图形元素的技巧2.掌握使用photoshop进行整体版面的制作3.掌握photoshop切片工具的使用方法4.掌握photoshop与dreamweaver结合的方法教学要求知识要点能力要求关联知识Photoshop画线画笔的设置Photoshop图案填充自定义图案的能力Photoshop按钮的制作路径与形状图层的绘制；图层样式的用法PhotoshopLogo标志的制作文字图层的用法；图层的用法Photoshop

2、图像的合成图层蒙版及图层混和模式的用法Photoshop网页版面制作色彩、文字、版面的设计Photoshop切片与输出切片的用法；输出导入Dreamweaver的方法2.1网页图形元素的制作2.1.1各式线条的绘制在网页中常使用线来分隔版面，或分隔导航条，是最常用的图形元素。在photoshp中画线是使用画笔或铅笔工具来实现的。1．画线选择photoshop工具箱中的画笔工具，并设置画笔的半径为1个像素，设置画笔硬度为0%，按住shift键拖动鼠标可绘制一条直线。如要连续绘制多条直线，一定要在绘制

3、后一直线前先选择其它工具，然后再选择画笔工具继续绘制，否则连续绘制会出现连笔现象如图2-1所示。连笔图2-1连笔现象2．画虚线画虚线和画直线一样也是使用画笔工具，不过要对画笔间距进行设置。按下快捷键F5弹出画笔设置面板，对画笔的直径、硬度和间距进行设置，如图2-2所示，图2-2绘制虚线的画笔设置1．画凹凸线凹凸线在网页版面中最常见，对网页有着非常重要的点缀作用，如图2-3所示。绘制的方法如下：首先绘制一条比背景色暗的直线，然后再绘制一条比背景色亮的直线，线条色彩可选用与背景色同一色系的颜色，然后两

4、直线并列排，这样凹凸效果就出来了。图2-3凹凸线2.1.2图案填充在网页的背景和Banner中经常会见到填充的各式图案，如点、方格子，横线、斜线、交叉线等等。网页填充的背景图案往往要先自定义图案，然后再进行填充。1．方格子的图案填充，如下图2-4所示。图2-4格子图案填充方法如下：(1)新建一40*40px大小，背景是透明的文件。(2)使用单行与单列选框工具绘制两条线，如下图2-5所示。图2-5定制的图案(3)全选上图，选择菜单“编辑—定义图案”，图案定义好了。(4)选择要填充图案的区域，选择菜单

5、“编辑—填充”，并找到刚才定义的图案，如下图2-6所示。图2-6填充面板(1)设置方格子的图层透明度，效果如图2-7所示。图2-7表格填充效果1．横线图案要填充横线图案，填充方法一样，只是定义图案的方法为：新建1×6像素的文件，填充最上面像素，如下图2-8所示，这时填充的横线为1像素高，线和线之间的距离为5px。图2-8横线自定义图案和填充效果2．斜线图案　同样定义斜线的图案，新建文件5×5像素大小，填充斜对角5个像素如下图2-9所示。图2-9斜线自定义图案和填充效果1．浮点图案同样定义浮点的图案

6、，新建文件7×7像素大小，填充最中间一个像素，如下图2-10所示。还有其它一些图案的定义如图2-11所示，大家可以自己试试定义和填充，看看效果如何。图2-10浮点自定义图案和填充效果图2-11其它自定义图案2.1.3按钮制作网页中按钮各式各样，往往按钮的形状和样式是网页的重要内容。下面讲解了几款常用的按钮。1．透明圆形按钮效果如下图2-12所示：图2-12透明圆形按钮制作步骤：（1）建立新文件，80x80像素大小，RGB模式，透明前景，图层1填充为白色，新建图层2，建立50x50像素的圆形，放在页

7、面正中心，前景设为#99CCFF，背景设为#006699，从圆形左上角到右下角，作圆形辐射渐变效果，如图2-13所示。图2-13渐变效果（2）再新建图3，建立44×44像素大的圆形，放置于正中心，从此圆形的右下角到左上角作圆形辐射渐变效果，即如图2-14效果。图2-14图层3效果（3）再新建图层4，建立42×42像素大的圆形，放置于正中心，这时设前景色为#99CCFF，背景色为#003366，从此圆形的右下角到左上角作圆形辐射渐变效果，即如图2-15效果。图2-15效果图（4）再新建图层5，建立1

8、0×6像素大的椭圆选区，并进行羽化，然后填充前景色，即如图2-16效果。图2-16效果图（5）输入文字，字号不要太大，文字去掉抗锯齿，并加上投影样式，最后效果如图2-17所示。图2-17　效果图2．塑料按钮（一）效果如下图2-18所示：2-18效果图制作步骤：（1）选择圆角矩形工具，并选择形状图层绘图方式，点击工具栏上的下拉三角，打开几何选项，在圆角矩形选项中设置矩形为固定大小，98×28像素，然后将圆角半径设为3像素，选择消除锯齿，如图2-19所示。图2-19圆角矩形（2）双击图