第2章-Photoshop网页版面制作

第2章Photoshop网页版面制作教学目标1.掌握使用photoshop制作网页中图形元素的技巧2.掌握使用photoshop进行整体版面的制作3.掌握photoshop切片工具的使用方法4.掌握photoshop与dreamweaver结合的方法教学要求知识要点能力要求关联知识Photoshop画线画笔的设置Photoshop图案填充自定义图案的能力Photoshop按钮的制作路径与形状图层的绘制；图层样式的用法PhotoshopLogo标志的制作文字图层的用法；图层的用法Photoshop图像的合成图层蒙版及图层混和模式的用法Photoshop网页版面制作色彩、文字、版面的设计Photoshop切片与输出切片的用法；输出导入Dreamweaver的方法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)选择要填充图案的区域，选择菜单“编辑—填充”，并找到刚才定义的图案，如下图2-6所示。图2-6填充面板(5)设置方格子的图层透明度，效果如图2-7所示。图2-7表格填充效果2．横线图案要填充横线图案，填充方法一样，只是定义图案的方法为：新建1×6像素的文件，填充最上面像素，如下图2-8所示，这时填充的横线为1像素高，线和线之间的距离为5px。图2-8横线自定义图案和填充效果3．斜线图案同样定义斜线的图案，新建文件5×5像素大小，填充斜对角5个像素如下图2-9所示。图2-9斜线自定义图案和填充效果4．浮点图案同样定义浮点的图案，新建文件7×7像素大小，填充最中间一个像素，如下图2-10所示。还有其它一些图案的定义如图2-11所示，大家可以自己试试定义和填充，看看效果如何。图2-10浮点自定义图案和填充效果图2-11其它自定义图案2.1.3按钮制作网页中按钮各式各样，往往按钮的形状和样式是网页的重要内容。下面讲解了几款常用的按钮。1．透明圆形按钮效果如下图2-12所示：图2-12透明圆形按钮制作步骤：（1）建立新文件，80x80像素大小，RGB模式，透明前景，图层1填充为白色，新建图层2，建立50x50像素的圆形，放在页面正中心，前景设为#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，建立10×6像素大的椭圆选区，并进行羽化，然后填充前景色，即如图2-16效果。图2-16效果图（5）输入文字，字号不要太大，文字去掉抗锯齿，并加上投影样式，最后效果如图2-17所示。图2-17效果图2．塑料按钮（一）效果如下图2-18所示：2-18效果图制作步骤：（1）选择圆角矩形工具，并选择形状图层绘图方式，点击工具栏上的下拉三角，打开几何选项，在圆角矩形选项中设置矩形为固定大小，98×28像素，然后将圆角半径设为3像素，选择消除锯齿，如图2-19所示。图2-19圆角矩形（2）双击图层，进入图层样式，为了使按纽清晰的显示出来，首先选择描边样式，设置描边大小为1像素，位置在内部，混合模式为正常，不透明度为62％，描边颜色为RGB（58，58，58）。用渐变叠加样式为按纽添加基本的渐变黑色到白色，选择反向，将黑色色标的位置从0％移动到40％处，样式为线性，选择与图层对齐，角度为90度，缩放为60％，效果如图2-20所示。图2-20填充渐变色（3）为按纽添加立体感，选择斜面和浮雕，样式选择内斜面，方法为平滑，深度为1000％，方向为上，大小为2像素，软化为3像素，阴影角度为-84度，取消全局光，高度为34度，保持高光和暗调的数值不变，仅将暗调的不透明度降低为16％，效果如图2-21所示。图2-21添加立体感（4）为按纽添加光泽效果，选择内阴影，将混合模式设为正常，颜色为白色，不透明度为65％，取消全局光后将角度设为-90度，距离为13像素，阻塞和大小均为0，然后，修改等高线，点击默认的等高线，拖动映射曲线两端的端点，将它们自上而下改变位置，效果如图2-22所示。图2-22添加光泽效果（5）选择投影给按纽添加一点阴影效果：将投影的不透明度设为14％，取消全局光，将角度设为-134度，距离和大小为1像素，扩展为0％。最后添加文字，文字为无抗齿锯状，效果如图2-23所示。2-23效果图3．塑料按纽（二）另外一种形式的塑料按纽，相对于前面所介绍类型来说，下面将要介绍的这种按钮显得更活泼，更适合用于轻松的网站。这种方法适合制作各种不规则的按纽。制作步骤：（1）和前面的方法一样，首先选择圆角矩形工具，并选择形状图层绘图方式，绘制一绿色圆角矩形，生然后按下Ctrl+T的同时再按住Ctrl键进行透视，效果如下图2-24所示。图2-24透视后的圆角矩形（2）制作按纽的高光部分。新建图层2，并选择套索工具随意的勾选按钮的上部分，如下图2-25所示。图2-25选区（3）按下Shift+Alt+Ctrl并点击上一图层得到两选区的相交区域，对得到的相交区域进行羽化，填充由白色到透明的渐变色，并调整图层的透明度，效果如2-26所示。图2-26高光区域（4）使用同样的方法得到右下角选区部分，并填充黑色到透明的渐变色，如下图2-27所示，图2-27暗调区（5）最后再加上相关的文字，如下图2-28所示。图2-28效果图4．简单的MAC按钮这款按纽的知名度很高，制作方法也有很多种，这里用了一种较为简单的，但效果同样好，效果如下图2-29：图2-29MAC按钮制作步骤：（1）选择圆角矩形工具，并选择形状图层绘图方式，绘制一白色圆角矩形，效果如图2-30所示。图2-30圆角矩形（2）与上一例一样，选择图层样式的描边和渐变叠加，如下图2-31所示。图2-31渐变色填充（3）新建图层，并选择上一图层区域，向上移动选区如下图2-32所示，按下Shift+Alt+Ctrl并点击上一图层得到两选区的相交区域。图2-32得到高光区域选区（4）对相交区域进行羽化，并填充白色，得到下图2-33所示。图2-33效果图大家可以试试下列按钮的制作，效果如图2-34所示。图2-34效果图5．内嵌按钮的制作很多时候，按纽会搭配具有个性化的面板。这种组合会使你的网页看起来更精致。下面就来介绍一种小巧的内嵌式按纽，这种按钮不但可以用于网页，对于别的图像，如手机上的按键，播放器上的按纽，也是非常合适的。内嵌按钮的效果图可参考如下图2-35所示：图2-35内嵌按钮效果图制作步骤：（1）绘制背景。选择选区工具中的矩形区域，使用渐变填充工具填充灰到深灰的渐变，效果如图2-36所示。图2-36渐变矩形（2）选择形状绘图工具椭圆，并设置绘图方式为创建形状图层，按住Shift键，在图中绘制一个小圆形并使用图层样式给小圆从上至下填充深灰到浅灰的渐变色，如下图2-37所示。图2-37渐变的圆（3）复制上一步小圆图层，并把复制出来的图层缩小，并对缩小的小小圆填充径向的深灰到浅灰的渐变，并描上深灰色1个像素的边，如下图2-38所示。图2-38效果图6．玻璃按钮的制作效果图如下2-39所示：图2-39效果图制作步骤：（1）选择圆角矩形工具，并选择形状图层绘图方式，圆角半径为30px，绘制一蓝色圆角矩形，如下图2-40所示。图2-40圆角矩形（2）双击形状图层，进入图层样式设置，给图层加上投影，设置距离为5，大小也为5。（3）给图层加上斜面与浮雕效果，参数设置如图2-41，样式设置为“枕状浮雕”，深度设为“300%”，光泽等高线设为“Ring”，高光模式设置为“100%”，阴影模式设置为“45%”，效果如下图2-42所示。图2-41斜面与浮雕参数设置图2-42玻璃按钮（4）现在要把制作好的按钮图像的一边切掉。选择矩形绘图工具，并选取相减的路径运算工具如下图，减去按钮的右边部分，效果如下图2-43所示。图2-43路径运算（5）按住Shift+Alt键向右方拖动，将复制出当前图层，然后镜像复制出来的图层，得到两个方向相反的按钮。同样使用圆角距形，并使用路径相交运算，得到中间的按钮部分，效果如图2-44所示。图2-44效果图7．按钮参照效果图如下：图2-45效果图制作步骤如下：（1）选择圆角矩形工具，并选择形状图层绘图方式，圆角半径为10px，绘制一黄色圆角矩形。选取矩形绘图工具，并选择“相减”路径运算，如下图2-46所示。图2-46路径运算（2）双击形状图层进入图层样式，给按钮加上渐变叠加，参数设置如图2-47，效果如图2-48所示。图2-47渐变叠加图2-48渐变效果图（3）选取按钮的上部分，并羽化，填充黄色到白色的渐变色，效果如下图2-49所示。图2-49效果图2.1.4倒影和投影倒影在网页中经常使用，有些是对文字，有些是对图片。倒影会使画片产生空间和立体感。如图2-50所示。图2-50倒影效果1．文字倒影效果如下图2-51所示：图2-51文字倒影制作步骤：（1）输入绿色的FireFox文字，复制一文字图层，对此文字图层按下“Ctrl+T”，然后右击文字图层并选择垂直翻转，如下图2-52所示。图2-52复制文字图层（2）给翻转过来的图层文字添加图层蒙版，在蒙版上填充黑白渐变色，最后调整图层透明度。效果如下图2-53所示。图2-53效果图2．投影给标志加上投影和阴影，效果图.2-54：图2-54投影效果图(1)首先浅灰色到深灰色的渐变背景在背景图层，标志在另一图层。新建一图层，按住CTRL键点击标志图层，得到标志图层的选区，然后选择菜单“选区――变换选区”工具对该选区进行透视变换，得到阴影区域。(2)对阴影区域填充黑色，并使用滤镜中的高斯模糊，如下图2-55所示。设置阴影图层的透明度为40%。如图2-55所示。图2-55阴影制作过程2.1.5Logo标志很多Logo标志都是文字变形而来的，下面是两种常用的文字标志制作方法。1．XP文字标志图2-56XP文字标志制作步骤：（1）输入文字“XP”，并选择字体“BankGothicMdBT”，字号选择大一些的，效果如图2-57所示。图2-58XP文字效果（2）选择菜单中的“图层—文字—文字转换为形状”，把文字图层转换为形状图层。图2-59XP形状图层（3）选择白色箭头工具拖动“X”上下两个节点移动他们的位置，效果如下图2-60所示