商务网页实例项目07课件.pptx

1、 内容提要Photoshop是目前非常流行的一款平面设计软件，在网页设计领域里Photoshop是不可缺少的一个设计软件，一个好的网页创意离不开图片，只要涉及到图像，就会用到图像处理软件，Photoshop理所当然成为网页设计中的一员。使用Photoshop不仅可以对图像进行精确的加工，还可以将图像制作成网页动画上传到网页中。本项目主要介绍Photoshop CS5的主要功能、界面组成，学习利用Photoshop CS5来进行网页效果设计和网页图像元素的处理和制作。1Photoshop CS5概述Photoshop是Adobe公司旗下最为著名的图像处理软件之一，也是图像处理界最为著名的软件。P

2、hotoshop从诞生到现在，已经走过了二十多年。在这二十多年里，历经了许多版本的更迭。从最早的1.0，到CS5，其功能越来越强大、越来越完善，用户界面也越来越友好。本书介绍的Photoshop的版本为Photoshop CS5。2010年4月12日北京时间23时，Adobe（奥多比）公司正式发布Adobe Creative Suite 5设计套装软件。Adobe CS5总共有15个独立程序和相关技术，五种不同的组合构成了五个不同的组合版本，分别是大师典藏版、设计高级版、设计标准版、网络高级版、产品高级版。我们最熟悉的Photoshop CS5就在其中，Photoshop CS5有标准版和扩展

3、版两个版本。Photoshop CS5标准版适合摄影师以及印刷设计人员使用，Photoshop CS5扩展版除了包含标准版的功能外还添加了用于创建和编辑3D和基于动画内容的突破性工具。活动活动1 1 认识认识Photoshop CS5Photoshop CS5 2Photoshop CS5的特点与新增功能Photoshop CS5新增功能如下（摘自Photoshop CS5帮助文档）：使用实时工作区轻松进行界面管理。自动存储反映设计者的工作流程、针对特定任务的工作区，并且在工作区之间快速切换。智能选区技术。更快且更准确地从背景中抽出主体，从而创建逼真的复合图像。内容识别填充和修复。轻松删除图像

4、元素并用其他内容替换，与其周边环境天衣无缝地融合在一起。1）HDR Pro。应用更强大的色调映射功能，从而创建从逼真照片到超现实照片的高动态范围图像。或者通过HDR色调调整，将一种HDR外观应用于多个标准图像。2）非凡的绘画效果。利用逼真的绘画效果，混合画布上的颜色并模拟硬毛刷以产生传统绘画介质的媲美效果。3）操控变形。彻底变换特定的图像区域，同时固定其他图像区域。4）自动进行镜头校正。使用已安装的常见镜头的配置文件快速修复扭曲问题，或自定其他型号的配置文件。5）使用3D凸纹轻松实现凸出。将2D文本和图稿转换为3D对象，然后凸出并膨胀其表面。增强3D性能、工作流程和材质。使用专用的3D首选项快

5、速优化性能。能够更快地预览，并使用改进的Adobe Ray Tracer引擎进行渲染。6）简化的创意审阅。CS Review是一种可加速审阅流程的联机服务，通过它可以与同事进行协作并快速获取用户反馈。7）集成的介质管理。利用Adobe Bridge CS5中经过改进的水印、Web画廊和批处理。使用Mini Bridge面板直接在Photoshop中访问资源。8）RAW处理的尖端技术。在保留颜色和细节的同时删除高ISO图像中的杂色。添加创意效果，如胶片颗粒和剪裁后晕影。或者使用最低程度的不自然感精确地锐化图像。9）新增GPU加速功能。充分利用增强的硬件处理能力，新增画笔预览、吸管工具的颜色取样器

6、环以及裁剪工具的“三等分”网格等功能。10）通过跨平台的64位支持实现更快的性能。在64位版本的Mac OS和Windows上完成日常成像任务的速度至少要快10%。3系统硬件配置要求Photoshop CS5配置要求如下。1）Intel Pentium 4或AMD Athlon 64处理器。2）Microsoft Windows XP（带有Service Pack 3）；Windows Vista Home Premium、Business、Ultimate或Enterprise（带有Service Pack 1，推荐Service Pack 2）；或Windows 7。3）1GB内存。4）1

7、GB可用硬盘空间用于安装；安装过程中需要额外的可用空间（无法安装在基于闪存的可移动存储设备上）。5）1024768像素屏幕（推荐1280800像素），配备符合条件的硬件加速OpenGL图形卡、16位颜色和256MB VRAM。6）某些GPU加速功能需要Shader Model 3.0和OpenGL 2.0图形支持。7）DVD-ROM驱动器。8）多媒体功能需要QuickTime 7.6.2软件。9）在线服务需要宽带Internet连接。4认识Photoshop CS5界面Photoshop CS5安装完毕后，会自动在“开始”按钮的“程序”菜单中添加启动项，同时也会在桌面上创建Photoshop

8、CS5快捷方式图标。单击“程序”菜单中相应的启动项或双击桌面快捷方式，都可以启动Photoshop CS5，如图7-1、图7-2所示。1Photoshop CS5基本操作（1）文件新建、保存与关闭1）新建文件。启动Photoshop CS5后，打开“文件”菜单，选择“新建”选项新建一个文件。参数设置如图7-3所示，宽度1004像素、高度800像素，分辨率72像素/in，颜色模式为RGB颜色8位。然后单击“确定”按钮。活动活动2 2 使用使用Photoshop CS5Photoshop CS5制作页面效果图制作页面效果图 2）保存文件。完成设计后，一般需要对设计成果进行保存。打开“文件”菜单，选

9、择“另存为”选项，出现如图7-4所示的“存储为”对话框。选择文件存储的位置，并且给文件命名，然后单击“保存”按钮。文件就被存储在本地磁盘上了。3）关闭文件。需要关闭一个文件时可以单击工作区的关闭按钮或者按组合键可以关闭当前文件。需要退出整个Photoshop软件时单击界面右上角的关闭按钮或按组合键即可退出软件。Photoshop CS5界面，如图7-5所示。（2）工具箱的显示与隐藏每个设计者的设计习惯不一样，可以在Photoshop CS5中设定自己喜欢的界面布局效果。通过单击标题栏（见图7-6）上的快速界面控制按钮，可以将界面快速切换为基本功能界面布局、设计界面布局、绘画界面布局、摄影界面布

10、局，如图7-7图7-10所示。左侧的工具箱也可以根据个人喜好进行调整，单击箭头 图标可以对工具箱进行单列和双列布局模式切换。右侧的功能面板同样可以通过单击箭头图标进行展开和收缩。按键可以快速隐藏和显示工具箱和右侧的功能面板。按组合键只能快速隐藏和显示右侧功能面板，如图7-11、图7-12所示。2利用Photoshop CS5设计页面（1）活动分析用Photoshop设计网页是目前网站制作的常用方法。先用Photoshop做出样图，再进行细化和修改，最后切图，就可以生成网页。（2）知识要点 Photoshop的基本操作。掌握Photoshop设计网页的一个技巧和方法。（3）动手操作步骤步骤1 使

11、用使用Photoshop的工具绘图的工具绘图1）新建文档大小为宽1004像素、高800像素、分辨率72像素/in、颜色模式RGB颜色8位、背景颜色白色。2）进入图层面板，单击创建新组 ，对新组命名为head。3）在head组下新建图层，命名为搜索框。4）选择工具面板中矩形选区工具，在工具栏上设置为路径模式，设置固定大小为宽300px、高25px。5）在页面上单击鼠标。一个高25px、宽300px的路径就画好了，如图7-13所示。6）进入路径面板，选择工作路径并单击鼠标右键，在弹出的快捷菜单中选择“建立选区”命令，如图7-14所示。打开“建立选区”对话框，如图7-15所示。7）选择“编辑”“描边

12、”命令，在弹出的“描边”对话框中设置描边参数。宽度为1px，颜色为#babebf，位置为内部，如图7-16所示。8）最后效果，如图7-17所示。图7-17 搜索框效果 步骤步骤2 图像的导入与图像的导入与编辑编辑1）打开本书配套资源中的素材文件夹中的logo.gif图片。选择“图像”“模式”“RGB颜色”命令，如图7-18所示。图7-18 转换模式 2）选择“选择”“全选”命令，选择整个图像，再选择“编辑”“复制”命令，复制整个图像。3）回到网页设计文件，选择“编辑”“粘贴”命令，将图像粘贴到文档中。4）在工具面板中选择选择工具，选择图片，按住鼠标左键，适量调整图片位置。5）选择图片图层，选择

13、“编辑”“自由变换”命令，此时图片四周出现8个控制点，可以通过鼠标和属性参数改变图像效果，如图7-19所示。图7-19 自由变换图片 6）用同样的方法导入和编辑图片，搜索.gif、banner.bmp、新品上架.bmp、热卖商品.bmp、推荐商品.bmp，如图7-20所示。步骤3 添加文字效果1）添加文字。选择文本工具，在网页头部添加文字“请登录 免费注册 帮助中心”，并设置文字效果为宋体、14点、样式无。如图7-21所示。2）添加版权。用同样的方法给页面添加版权信息。3）左侧全部商品效果添加。新建“全部商品”图层，选择选区工具，在左侧画出一个区域。随便给选区上个颜色。双击图层，弹出“图层样式

14、”对话框。设置为描边和颜色叠加效果。如图7-22、图7-23所示。图7-21 设置文字效果 图7-22 设置描边属性图7-23 设置颜色叠加属性 步骤步骤4 切图切图选择工具面板上的切片工具，对页面进行切图，如图7-24、图7-25所示。图7-24 切图工具图7-25 切片后的效果 步骤步骤5 导出为网页图像导出为网页图像1）网页切片完成后可以导出网页图像。选择“文件”“存储为Web和设备所用格式”命令。2）在弹出的对话框中设置图片格式为GIF、可选择、扩散、颜色256，如图7-26所示。3）单击“存储”按钮，弹出“将优化结果存储为”对话框，“格式”为HTML和图像，“切片”为所有切片，如图7

15、-27所示。4）Photoshop会自动生成网页文件和图片文件夹，如图7-28所示。5）打开页面，效果如图7-29所示。1活动分析特效文字是网页中给页面增加亮点的一个手段。很多网页的LOGO都是特效文字。2知识要点 Photoshop设计特效文字的过程和方法。掌握图层管理、选区操作、路径操作。3动手操作1）新建“我的设计.psd”文件，进入图层面板，单击面板底部“创建新组”按钮，在图层中创建一个新组“组1”，如图7-30所示。活动活动3 3 制作特效文字制作特效文字 2）双击“组1”，更改组名称为logo，如图7-31所示。3）展开logo组，在组内新建图层1，如图7-32所示。图7-30 新

16、建组“组1”图7-31 给文件组改名 4）单击文字工具，在图层1中输入“Mao”。设置字体为方正综艺简体，大小为60点，字形为加粗，文字方式为平滑，如图7-33所示。5）将文字转换成路径。按住键同时用鼠标左键单击图层1，这时文字出现蚂蚁线效果。进入路径面板，单击第4个按钮“从选区生成路径”，如图7-34所示。6）调整路径文字。回到图层面板，单击取消文字层“Mao”前的眼睛，使文字层不显示。回到路径面板。双击“工作路径”，改名为“文字”。用转换点工具对路径进行编辑调整，如图7-35、图7-36所示。编辑调整后的效果，如图7-37所示。7）路径转换为文字图案。在图层面板中新建图层1，回到路径面板，

17、选择文字路径，单击底部将“路径作为选区载入”按钮，使得路径变成选区。使用油漆桶工具，给路径填充颜色为黑色（#000000），如图7-38、图7-39所示。8）添加爱心小图案。进入路径面板，新建路径命名为“红心”，用钢笔工具和调整工具绘制心形路径，如图7-40所示。9）进入图层面板，新建图层2，回到路径面板，选择红心路径，单击面板底部将“路径转换为选区”按钮，将路径转换为选区。用油漆桶工具给选区上色（#c20057），如图7-41所示。10）给图层2的心形图案添加描边效果。双击图层2，出现图层样式面板，选择描边选项，设置大小为3像素，位置为外部，颜色为黑色，如图7-42所示。单击“确定”按钮后的

18、效果如图7-43所示。11）回到图层面板，复制logo组，得到logo副本，用移动工具移动整个logo副本组，效果如图7-44所示。12）在图层面板新建图层3，选择画笔工具，设置大小为3px，前景颜色为黑色，如图7-45所示。按住键同时画出一条横线。效果如图7-46所示。图7-45 笔刷设置 10）给图层2的心形图案添加描边效果。双击图层2，出现图层样式面板，选择描边选项，设置大小为3像素，位置为外部，颜色为黑色，如图7-42所示。单击“确定”按钮后的效果如图7-43所示。13）选择文字工具，设置文字大小为“24点”，字体为“方正卡通简体”，字体平滑，如图7-47所示。最终效果，如图7-48所

19、示。1活动分析网页按钮在页面中一般起强调或者修饰作用。合适的按钮可以使页面更加生动丰富。网页按钮分为几种：一种是使用文本内容为主的按钮；一种是以图案内容为主的按钮，另外还有综合使用图案和文字的按钮。本活动将实现用Photoshop制作图案文字综合的按钮。2知识要点 Photoshop的基本操作。掌握Photoshop渐变、图层叠加模式的使用。3动手操作先看一下最终效果，如图7-49所示。1）新建文件，新建图层，使用矩形选区工具进行选择，选区大小为6020像素，如图7-50所示。活动活动4 4 制作网页按钮制作网页按钮 2）前景色设置为#afee00，背景色设置为#3b9d00，使用渐变工具从选

20、区的上方拉到中央进行填充，如图7-51所示。3）将前景色和背景色设置为黑色和白色，新建图层，双击新图层，对描边选项进行设置，如图7-52所示。图7-52 描边设置 4）图层模式更改为叠加，透明度设置为40%。5）新建图层，创建如下选区，如图7-53所示。6）使用渐变工具，颜色为白色到透明，从上向下进行填充，如图7-54所示。7）图层模式设置为叠加，透明度降低到30%，如图7-55所示。8）使用文字工具输入需要的文字，字体为Tahoma，大小为11pt，如图7-56所示。1活动分析导航条是网页设计中不可缺少的部分，它是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的

21、内容，是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。利用导航条，就可以快速找到想要浏览的页面。本例通过Photoshop制作导航条效果。2知识要点 Photoshop的基本操作。掌握Photoshop设计网页的技巧和方法。3动手操作先看做好的效果图，如图7-57所示。活动活动5 5 制作制作导航条导航条图像图像 1）用形状工具或者选框工具设计出导航条的背景，如图7-58所示。2）新建一个图层，用缩放工具放大到1000%，用画笔在这个新建图层上画出一条适当长度的1px竖线，颜色为#ffffff，如图7-59所示。3）给这个图层加“渐变叠加”混合选项，设置如图7-60、图7-61所示

22、。在图7-62中，1处的颜色为白色竖线的下端附近的背景颜色值，2处的颜色为白色竖线的上端附近的背景颜色值，3处的颜色为#d7d7d7。渐变效果，如图7-62所示。4）复制这个图层，用箭头工具将复制的图层向左移动1px，修改渐变参数，如图7-63所示。分割线效果如图7-64所示。100%比例下的效果，如图7-65所示。剩下的工作就是加上文字，复制图层及排版的问题了。1活动分析GIF动画是网页中动态呈现内容的一个方式，吸引浏览者的注意力。很多软件都可以快速地制作滚动文字的效果。使用Photoshop可能还有点复杂，但是大家只要学会这种方法，灵活地运用再加上自己的创意，就能制作出多种个性化的效果。本

23、例学习用Photoshop软件制作简单的GIF滚动文字的动画效果。2知识要点 Photoshop的基本操作。掌握Photoshop制作GIF动画的技巧和方法。3动手操作1）首先使用Photoshop CS5打开图片，然后使用“文字工具”输入文字，如图7-66所示。活动活动6 6 制作制作GIFGIF动画动画 2）选择文字图层并单击鼠标右键，在弹出的快捷菜单中选择“删格化”命令，然后单击“图层面板”中的“添加图层蒙版”按钮。3）为文字图层添加蒙版，如图7-67所示。图7-67 添加蒙版图7-66 动画效果 4）使用“矩形选区工具”创建一个选区，把文字围起来，然后按组合键设置羽化选区，如图7-68

24、所示。5）按组合键执行反向选择命令，接着单击图层蒙版，然后使用“油漆桶工具”在蒙版的选区中填充黑色，如图7-69所示。6）取消图层蒙版链接到图层，如图7-70所示。7）在菜单中选择“窗口”“动画”，打开动画面板，然后使用“移动工具”向下拖动文字图层直到消失，如图7-71所示。8）单击“动画面板”中的“复制所选帧”按钮，得到第2帧，然后使用“移动工具”向上拖动文字图层，直到消失为止，如图7-72所示。9）单击第1帧，接着单击动画面板中的“过渡动画帧按钮”，设置过渡到下一帧，添加的帧数可以自由决定，如图7-73所示。10）全选所有帧，设置延迟时间，如图7-74所示。11）最后在菜单栏中选择“文件”“存储为Web和设置所有格式”命令，设置GIF格式，保存即可。Photoshop是目前非常流行、功能十分强大的一款图像处理软件。在本活动中，我们学习了Photoshop CS5的基本操作，以及怎样运用Photoshop CS5来制作网页图像元素和进行网页效果图的设计制作。使用Photoshop进行网页布局的一般步骤是：首先设计制作网页中需要的各种图像元素，然后将这些网页图像元素制作成网页效果图，最后对制作好的效果图进行切片并导出。后期再将导出的网页用Dreamweaver进行重构。项项 目目 小小 结结