《网页设计与制作教程》第2章 photoshop

第2章photoshop2.1网页标志的制作2.2网页素材处理2.3网页页面的规划与制作2.4其他页面的处理2.5图片切割导成网页格式2.1网页标志的制作2.1.1实例介绍1.新建文件打开【文件】菜单，单击【新建】命令，弹出如图2.1所示的【新建】对话框。设定文件名“logo”，尺寸:C500×300，分辨率:72等信息。一般图像分辨率设定为每英寸72线(约28像素/厘米)。在“模式”中设定为彩色模式类型。在“文档背景”中，设定新建文件的背景颜色。白色即背景为白色;背景色即以“色板”调板中的背景色作为背景的颜色;透明即尤色背景。下一页返回2.1网页标志的制作(1)新建图层打开【窗口】菜单，选择【图层】选项，调出【图层】、【通道】、【路径】和【历史纪录】活动面板。在【图层面板】，创建一个透明图层。如图2.2所示。(2)设定颜色打开【窗口】菜单调出【工具】活动面板，设置前景色为“RGB红”。如图2.3所示。(3)画矩形并用前景色填充在【工具】活动面板上选取【矩形选框工具】在透明图层上画出一个矩形选择区。如图2.4所示。上一页下一页返回2.1网页标志的制作使用【编辑】菜单中的【填充】命令进行前景色填充(前景色填充快捷键:Alt+Del)。取消选择区域(快捷键:Ctrl+D)如图2.5所示。3.画一个红色的菱形(1)新建图层。(2)使用【工具箱】中的【多边形套索工具】，画出一个菱形(画直线击同时按住Shift键)。如图2.6所示。(3)使用前景色填充，取消选取。如图2.7所示。4.绘制红色字母D(1)新建一个图层。上一页下一页返回2.1网页标志的制作(2)画一个红色的矩形。(3)将矩形右侧修整成圆角。在矩形外围画一个椭圆，【选择】菜单【反选】，按Del。如图2.8所示。(4)取消选取，在图形内部画一个小矩形，按Del。如图2.9所示。5.绘制红色飘带(1)新建图层。(2)使用钢笔路径工具绘制飘带。使用【工具箱】中的【钢笔工具】。在绘制飘带起点处单击，以定义第一个锚点。在适当位置单击鼠标左键不上一页下一页返回2.1网页标志的制作放并向右侧拖动以定义第一个锚点;以同样方法定义第二个锚点，单击定义第四个锚点(不需要拖动鼠标)，继续用单击并用拖动的方法定义第五个和第六个锚点，最后在第一个锚点处单击并拖动完成整个飘带路径的绘制。(3)将路径作为选取载入。(4)调出路径调板，选择刚才绘制完的工作路径并单击下方的将路径作为选取载入图标。(5)填充红色。6.画出红色文字框(1)画一个矩形，如图2.13所示。上一页下一页返回2.1网页标志的制作(2)【编辑】菜单中的描边命令，宽度为10像素。7.绘制标志右上角的注册标记“R"(1)新建图层。(2)用椭圆选框工具画一个圆，按住Shift+椭圆选框工具。(3)【编辑】菜单中的描边命令，宽度为4像素。(4)用文字命令写一个字母R，并移动放置到圆内。效果如图2.16所示。8.输入红色文字(1)使用文字工具输入【黑体】字，调整合适字号。上一页下一页返回2.1网页标志的制作(2)【图层】菜单中【文字】中的【消除锯齿强】命令，强化文字边缘。(3)使用移动工具到合适的位置，效果如图2.17所示。9.图形整理和保存(1)删除背景图层(2)合并可见图层(3)保存文件2.1.2相关知识1.Photoshop的基本知识(1)认识Photoshop基本界面如图2.20所示。上一页下一页返回2.1网页标志的制作(2)本章可以参考使用的快捷键删除选框中的图案或选取的路径DEL用背景色填充所选区域或整个图层Ctrl+BackSpace或Ctrl+De1用前景色填充所选区域或整个图层Alt+BackSpace或Alt+De1全部选取Ctrl+A取消选择Ctrl+D重新选择Ctrl+Shift+D羽化选择Ctrl+Alt+D上一页下一页返回2.1网页标志的制作反向选择Ctrl+Shift+l路径变选区数字键盘的Enter2.1.3知识拓展1.Photoshop软件版本说明本例所使用的软件版本为PhotoshopCS，本教材编写时的最新版本为PhotoshopCS3。2.常用图像格式介绍(1)PSDPhotoshop格式(PSD)是默认的文件格式，它允许保存图层等一些信息。上一页下一页返回2.1网页标志的制作(2)BMPBMP是DOS和Windows兼容计算机上的标准Windows图像格式。(3)GIF图形交换格式(GIF是在WorldWideWeb及其他联机服务上常用的一种文件格式，用于显小超文本标记语言(HTML)文档中的索引颜色图形和图像。(4)JPEG联合图像专家组(JPEG)格式是在WorldWideWeb及其他联机服务上常用的一种格式，用于显小超文本标记语言(HTML)文档中的照片和其他连续色调图像。上一页下一页返回2.1网页标志的制作(5)PDF便携文档格式(PDF)是一种灵活的、跨平台、跨应用程序的文件格式。基于PostScript成像模型，PDF文件精确地显示并保留字体、页面版式以及矢量和位图图形。(6)TIFF标记图像文件格式(TIFF用于在应用程序和计算机平台之间交换文件。TIFF是一种灵活的位图图像格式，所有的绘画、图像编辑和页面排版应用程序都可以支持。上一页下一页返回2.1网页标志的制作(7)PNG便携网络图形(PNG)格式是作为GIF的尤专利替代品开发的，用于尤损压缩和显小Web上的图像。与GIF不同，PNG支持24位图像并产生尤锯齿状边缘的背景透明度。但是，某些Web浏览器不支持PNG图像。上一页返回2.2网页素材处理2.2.1实例介绍(1)新建一个大小为600×90像素的页面，命名为menu的文件。(2)背景色图层渐变效果的设置。在前景色上双击，设置【拾色器】中的值为R:219，G:236，B:193。设置背景色为白色。选取工具箱中的渐变工具按住左键，从矩形选区的左侧边缘拖拽到右侧边缘，实现渐变填充效果。完成效果如图2.24所示。下一页返回2.2网页素材处理(3)文本框制作。①新建textbox图层，使用工具箱中的【矩形选框工具】画出一长条形选区，填充选区为白色。②取消选取后双击textbox图层会弹出【图层样式】窗口，在其样式选项上选择【投影】中的【内阴影】，将两者的距离和大小的像素值都设为1。接着在【外发光】选项上将距离和大小值也都设为“1”。单击【好】按钮。(4)图片按钮的制作①新建go图层。②使用【工具箱】中的【椭圆选框工具】，在页面画出一个正圆形(需同时按住Shift键)。上一页下一页返回2.2网页素材处理③将选区填充色设置为R:120，G:118，B:117，进行填充。④在go图层上双击，将图层样式中的【投影】选项打开，设置距离和扩展选项值均为1，大小值为2，其他值不变。再将【外发光】选项打开，设置大小值为1，其他值不变。单击【好】。⑤将前景色设置为白色，使用文字工具输入英文Go，选择合适的字型和字号后防置在相应位置。(5)菜单项的制作①新建heading图层②用矩形选框工具在参考线交义点位置画出一小段长条形选区，填充25%的灰色。上一页下一页返回2.2网页素材处理③选择动作调板下创建新图层后，返回图层调板将刚才绘制的矩形拖拽到创建新图层的图标上④移动新复制出的图层到适当位置⑤再次返回动作调板，单击停止记录后，再重复单击播放选区，复制出相应数量的图形⑥用文字工具输入文字(整行输入后按空格键，间隔出词距离)，移动到适当位置。完成效果如图2.34所示。2.banner制作(1)新建一个大小为585×105像素，命名为banner的文件。(2)新建图层1。上一页下一页返回2.2网页素材处理(3)调整前景色为白色，背景色为:R:248，G:213(4)使用渐变工具在图层1上从左向右填充透明渐变。(5)在弹出的渐变编辑器中单击【不透明性色标】滑块，将色标选项中【不透明度】设定为0%，单击【好】，完成编辑。(6)打开保存在光盘素材中的tree.jpeg文件，将它拖拽到文件上，再将其图层位置移动到透明渐变图层之下。使用【缩放】命令调整到合适的大小，移动到画面的相应位置。(7)将当前图像的窗口最大化，使用椭圆选框工具在tree层上画出椭圆形选区，执行【选择】→【反选】命令，将上一页下一页返回2.2网页素材处理选择区反向选择。再执行【选择】→【羽化】命令将羽化值设定为50。按键盘中的Delete键3次。完成后效果如图2.39所示。3.images操作(1)打开保存在光盘素材中的产品文件SG-208.jpeg，此时的图片整体效果较灰暗，可以执行菜单栏中的【图像】→【调整】→【曲线】命令适当调节图片整体效果。(2)使用菜单栏中的【图像】→【图像大小】命令调节图片的尺寸。将约束比例关闭，修改像素大小的宽度为600像素，高度为450像素。单击【好】。上一页下一页返回2.2网页素材处理(3)使用文字工具输入相应的文字。(4)新建一个图层，使用文字工具下的圆角矩形工具在图像上画出一带圆角的矩形，再切换到路径调板，单击将路径作为选区载入。(5)执行菜单栏中的【选择】→【反选】命令。使用浅红橙色作为前景色进行填充。取消选择区，双击图层调板上的当前图层，在弹出的图层样式窗口中选择【斜面和浮雕】选项，将方向修改为“下”，暗调颜色值为R:147，G:91，B:2。再选择【描边】选项，调整颜色为白色，大小为2像素，完成设置。(6)使用菜单栏中的【图像】→【图像大小】命令调节图上一页下一页返回2.2网页素材处理片的尺寸。将约束比例打开，修改像素大小的宽度为190像素，单击【好】。(7)将文件另存为SL-280G.jpeg。(8)使用同样方法将其他5个产品的图片修改并保存，以备随后使用。完成效果如图2.43所示。4.middle制作(1)创建大小为480×44像素，文件名为“middle”的文件。(2)创建相应图层制作文字框和Go搜索按钮(创建方法参照导航栏制作)。(3)制作下拉菜单标记:上一页下一页返回2.2网页素材处理①新建一图层，命名为“square”。②使用【矩形选框工具】配合键盘上的shift键在文字框的右侧画出一矩形选区，用25%的灰色进行填充。③双击“square”图层，在弹出的【图层样式】菜单中点选【斜面和浮雕】选项，将其中【大小】值子选项设置为“1”像素。再选择【颜色叠加】选项，在其拾色器中设置颜色为R:210，G:210，B:210。单击【好】按钮，结束编辑。⑦使用【矩形选框工具】框选【arrow图形上半部后按键盘上的Delete键删除。⑧取消选区后将其向下移动到适当位置。上一页下一页返回2.2网页素材处理⑨保存文件为middle.jpeg，以备后面使用。5.content制作(1)创建大小为290×185像素，文件名为“content”的文件。(2)打开保存在光盘素材中的产品文件leaf.jpeg，拖拽到content窗口中，移动到适当位置。(3)使用工具栏中的【钢笔工具】在图像上画出波浪状封闭路径。(4)使用【路径选择工具】选择路径，移动到适当位置后将路径作为选区载入。上一页下一页返回2.2网页素材处理(5)使用菜单栏中的【编辑】→【拷贝】后再使用【粘贴】命令进行粘贴。(6)调整图层的不透明度为80%。(7)单击【路径调板】，单击【从选区生成工作路径】。对路径上的锚点作一些位置的修改，使其与上次编辑的路径有所不同。(8)修改结束后移动整个路径在图像上的上下位置。使用【路径调板】中的【将路径作为选区载入】，复制并粘贴选区。(9)将粘贴的新图层移动到适当位置，调整图层的不透明度为40%。上一页下一页返回2.2网页素材处理(10)使用菜单栏中的【编辑】→【粘贴】命令进行粘贴，调整图层的不透明度为23%。使用【编辑】→【变换】→【垂直翻转】命令进行位置调整。(11)在【路径调板】上单击【工作路径】。使用文字工具在路径的适当位置单击鼠标，输入文字。(12)文字输入后删除工作路径，移动文字到适当位置。(13)双击文字图层调出【图层样式】菜单。选择【外发光】选项，调整【扩展】为40%,【大小】为6像素。(14)打开保存在光盘素材中的fruitl.jpeg文件，将该图像拖拽到编辑画面中，放置到适当位置。如图2.55所示。上一页下一页返回2.2网页素材处理(15)合并所有图层后保存文件为content.jpeg，以备后面使用。6.foot制作(1)创建大小为800×80像素，文件名为“foot”的文件。(2)设置前景色为55%的灰色，使用文字工具在页脚底部输入企业和网站的相关信息，并选好位置。如图2.56所示。(3)创建一个新图层。使用工具箱上的【单行选框工具】在图像最顶部边缘单击会出现一个高为1个像素的选区，用25%的灰色进行填充。(4)确保当前选区状态，单击一下键盘的向下移动键。仍然使用25%的灰色进行填充。上一页下一页返回2.2网页素材处理(5)使用【矩形选框工具】从灰色线的左右各选取一部分删除掉。(6)打开保存在光盘素材中的map.jpeg文件，将该图像拖曳到编辑画面中，缩放适当大小后放置到适当位置。(7)将前景色设为红色，使用文字工具输入相关文字，调整其在地图上的大小和位置。完成效果如下如图2.60所示。(8)合并所有图层后保存文件为foot.jpeg，以备后面使用。2.2.2相关知识1.渐变工具渐变工具可以创建多种颜色间的逐渐混合，可以从预设上一页下一页返回2.2网页素材处理渐变填充中选取或创建自己的渐变。通过在图像中拖移用渐变填充区域。起点(按下鼠标处)和终点(松开鼠标处)会影响渐变外观，具体取决于所使用的渐变工具。【渐变编辑器】对话框可用于通过修改现有渐变的拷贝来定义新渐变。还可以向渐变添加中间色，在2种以上的颜色间创建混合。2.钢笔工具钢笔工具可以创建更为精确的直线和平滑流畅的曲线，钢笔工具提供了最佳的绘图控制和最高的绘图准确度。3.文字工具当使用文字工具在图像上输入文字时，可以使用【图层】上一页下一页返回2.2网页素材处理→【文字】→【消除锯齿方式为无】的命令来使文字边缘清晰，这样可以使图像上的小文字看起来更清晰。2.2.3知识拓展1.色彩模式当新建一个photoshop文档时可以为该文档设定一种色彩模式(默认状态下为RGB颜色);打开一幅图像后也可以通过使用菜单命令中的【图像】→【模式】来重新设定一种色彩模式。通‘常清况下制作网页效果应使用RGB颜色模式，但有些时候根据特殊效果的击要，还可以使用其他的色彩模式。上一页下一页返回2.2网页素材处理2.钢笔工具“钢笔工具”常被用来从一幅图像中“抠出”主体物，它比【磁性套索工具】和【魔棒工具】抠图效果都要完美。但灵活使用该工具是击要勤加练习的。上一页返回2.3网页页面的规划与制作2.3.1实例介绍1.新建主页文件打开【文件】菜单，单击【新建】命令。设定文件名"index"、尺寸:800×1020像素、分辨率:72像素等信息。设定新建文件的背景颜色为白色。2.利用标尺和参考线对首页页面进行版面规划设计(1)调出标尺，显小参考线(2)设定参考线根据页面版面规划需要来设定所需的参考线，以为下一步进行各种页面素材的摆位与制作作准备。将鼠标左键下一页返回2.3网页页面的规划与制作放在当前页面窗口的标尺位置向内拖动即可定义一条参考线。(3)根据页面素材关系创建相应的图层组图层组的作用是方便对繁多的图层素材进行有序地管理和操作。3.将相应素材打开，使用拖曳的方法加入到对应的图层组中完成后效果如图2.67所示。上一页下一页返回2.3网页页面的规划与制作2.3.2相关知识1.使用参考线与网格参考线是浮在整个图像上但不打印出来的线条，可以移动或删除参考线，也可以锁定参考线，以免不小心移动它。2.使用【对齐】命令对齐有助于精确放置选区边缘、裁切选框、切片、形状和路径。2.3.3知识扩展1.网格上一页下一页返回2.3网页页面的规划与制作网格对于对称地布置图素很有用。网格在默认情况下显小为不打印出来的线条，但也可以显小为点。2.参考线和网格的特性相似拖移选区、选区边框和工具时，如果拖移距离小于8个解幕(不是图像)像素，则它们将与参考线或网格对齐。参考线移动时也与网格对齐，可以打开或关闭此功能。参考线间距、是否能够看到参考线和网格，以及对齐方式均因图像而异。网格间距、参考线和网格的颜色及样式对于所有的图像都是相同的。3.设置参考线和网格预置在Windows中，选取【编辑】→【预置】→【参考线、网上一页下一页返回2.3网页页面的规划与制作格和切片】。【颜色】，是为参考线、网格或两者选取一种颜色。如果选取了【自定】，清单击颜色框，选取一种颜色，然后单击【好】按钮。【样式】，是为参考线、网格或两者选取一个显小选项。【网格线间隔】，输入网格间距的值。【子网格】，是指输入划分网格的值。如果愿意，可更改此选项的单位。【百分比】选项创建均匀划分图像的网格。上一页返回2.4其他页面的处理2.4.1实例介绍1.新建售后服务的子页文件打开【文件】菜单，单击【新建】命令。设定文件名"register"，尺寸:800×1020像素、分辨率:72像素等信息。设定新建文件的背景颜色为白色。2.将首页原文件中可用的素材导入到新页面(1)将做完首页原文件index.psd打开，将其图层调板中的"menu"，"foot"和"logo"图层组拖拽入新页面中，移动到与主页相同的位置。(2)选择“menu”图层组中的“background”，使用菜单栏中下一页返回2.4其他页面的处理的【图像】→【调整】→【色相/饱和度】命令进行色彩的调整。(3)选择“menu图层组中的“heading”，同样使用菜单栏中的【图像】→【调整】→【色相/饱和度】命令进行色彩的调整。调整后的效果如图2.69所示。3.利用标尺和参考线对当前页面进行版面规划设计4.banner及左侧图片处理(1)新建“banner”图层组。(2)使用菜单栏中的【窗口】→【信息】命令调出信息调板。上一页下一页返回2.4其他页面的处理(3)使用【矩形选框工具】利用辅助线选择指定的选区。(4)查看信息调板中右下角选择区域的宽度和高度值。(5)根据信息调板中看到的数值新建一图像。(6)打开素材文件夹中的work.jpeg文件。使用菜单栏中的【编辑】→【变换】→【水平翻转】命令水平翻转图形，接着拖曳到刚建立的空白图像中并调整缩放到适当位置。(7)新建一个宽度为1像素，高度为2像素的图像。(8)使用【缩放工具】满画布显示该图像。接着使用【矩形选框工具】选择图像上部的一个像素后填充颜色为R:247，G:181，B:220。上一页下一页返回2.4其他页面的处理(9)使用菜单栏中【选择】→【全选】命令全选该图像。(10)执行【编辑】→【定义图案】命令，将选区定义为图案。(11)切换到需要编辑的图像窗口。创建一新图层后，使用菜单栏中【编辑】→【填充】命令调出填充窗口，选择相应选项完成填充。(12)使用菜单栏中的【图像】→【调整】→【色彩平衡】命令对“人像”图层进行色彩倾向的调整。(13)选择底纹图层，使用渐变工具，调整为白色透明渐变。按住shift键后单击鼠标左键从下向上拖动，填充白色透明渐变。上一页下一页返回2.4其他页面的处理(14)使用【裁切工具】将裁切框框选整个图相后双击鼠标完成裁切。(15)将处于锁定状态的白色背景图层删除，余下的两个图层使它们之间处于链接关系。(l6)将图层拖曳入“register”图像中并调整位置。将拖曳入的图层放置在“banner”图层组中。调整位置如图2.81所示。5.绘制表单内容框(1)在“form”图层组中创建一图层，命名为“line”。(2)使用【矩形选框工具】框选出图像中部辅助线围出的上一页下一页返回2.4其他页面的处理区域，执行【编辑】→【描边】命令对选区进行1个像素的描边。6.制作标题色带(1)在“form”图层组中创建一图层，命名为“title”。(2)设置填充前景色为R:247，G:181，B:220，背景色为白色。(3)使用【矩形选框工具】在中部辅助线围出的区域画出一矩形选区，使用【渐变工具】进行填充。(4)执行【全选】命令，再使用【描边】命令作1个像素的描边。上一页下一页返回2.4其他页面的处理(5)在图层调板上将“title”复制出副本，移动到适当的位置。7.制作按钮(1)在“form”图层组中创建一图层，命名为“push”。(2)使用【圆角矩形工具】，调整圆角半径为3个像素。在表单内容框的右下角位置画出一个圆角矩形。(3)设置前景色为20%的灰色，背景色为白色。(4)在路径调板中选择当前的工作路径，单击下面的【将路径作为选区载入】。(5)使用“渐变工具”进行填充。上一页下一页返回2.4其他页面的处理(6)在“push”图层上双击，在弹出的【图层样式】选择【内发光】和【描边】选项，设置描边大小为1像素，颜色为灰色。(7)复制"push"图层，移动到适当位置。8.输入文本信息(1)在“form”图层组中使用文字工具在相应位置输入文本信息。(2)选择文本信息图层，使用菜单栏中【图层】→【文字】→【消除锯齿无】。9.绘制文本输入框、匀选框和点选圈上一页下一页返回2.4其他页面的处理(1)在“form”图层组中新建“frame”图层，使用【矩形选框工具】绘制矩形选选区，接着再使用55%的灰色进行描边。复制出其他的文本输入框，在图像上排列好位置。(2)在“form”图层组中新建“gx”图层，使用【矩形选框工具】配合Shift键绘制出等边矩形选区，接着再使用55%的灰色进行描边。复制出其他的勾选框，在图像上排列好位置。(3)在“form“图层组中新建“round”图层，使用【椭圆选框工具】配合Shift键绘制出正圆形选区，接着再使用55%的灰色进行描边。复制出其他的勾选框，在图像上排列好位置。上一页下一页返回2.4其他页面的处理(4)在“form”图层组中新建“textbox”图层，使用【矩形选框工具】在【意见和建议】下边绘制矩形选区，接着再使用55%的灰色进行描边，调整位置。2.4.2知识拓展1.定义图案使用【编辑】→【定义图案】命令可以创建个性化图案作为页面背景的底纹。2.信息调板使用【窗口】→【信息】命令，信息调板可显小以下信息:上一页下一页返回2.4其他页面的处理(1)当使用【选框工具】时，【信息】调板会随着您拖移鼠标显小指针位置的x坐标和y坐标以及选框的宽度(W)和高度(H)。(2)在使用【裁切工具】、【形状工具】、【切片工具】和【缩放工具】时，随拖移变化的选区的宽度(W)和高度(H)。该调板还显示裁切选框的旋转角度。(3)使用【变换】或者【自由变换】命令时，宽度(W)和高度(H)的变化白分比、旋转角度(A)以及水平切线(H)或垂直切线(V)的角度。上一页返回2.5图片切割导成网页格式2.5.1实例介绍1.打开制作完成的网站首页图像，如图2.87所示，设置和显示参考线2.使用【切片工具】按照【参考线】规划出的区域对页面进行切片处理(1)在【工具】活动面板上点选【切片工具】，在展开的项目中选择【切片工具】。(2)使用菜单栏下方的【切片工具】选项栏中的【基于参考线的切片】，让软件自动对当前图像进行一次切片。(3)按照自己的规划意图，在“参考线”的交义区域使用“切下一页返回2.5图片切割导成网页格式片工具”工具在需要进行切片的图像区域的对角上单击左键拖动鼠标，切出区域(在切出的区域边缘会有蓝色线框和左上角切片编号的显示)，实现更为精确的二次切片。切片后效果如图2.90所示。3.保存已经完成的切片(1)使用菜单命令【文件】一【存储为Web所用格式】，在出现的窗口中单击【存储】。(2)保存的文件名为“index”，保存类型为“HTML和图像”。(3)退出软件。2.5.2相关知识1.使用切片