Photoshop CS4实用图形图像处理案例教程（ 第三版） 高职多媒体 洪光，赵倬 第11章 动静皆宜——Web页设计.ppt

尚辅网 辽宁工程技术大学职业技术学院计算机系 洪 光 教学内容： 本章主要介绍了Photoshop CS4中有关Web页图像设计的内容。通过本章学习，能够熟练掌握Web页设计的方式、方法。从切片到优化图像、动画制作，深入了解Photoshop在网页设计中的作用，并能够利用其强大的图形图像处理功能，制作出精美的网页模板及网页动画。 教学要求： 教学内容： 11.1 概 述 11.2 设计制作“Web页中的导航栏” 11.3 视频和动画 11.4 本章小结 11.1 概 述 使用Photoshop CS4的Web工具，可以轻松构建网页的组件块，或者按照预设或自定格式输出完整网页。 可以使用图层和切片设计网页和网页界面元素。 可以使用图层复合试验不同的页面组合或导出页面的各种变化形式。 可以创建用于导入到Dreamweaver或Flash中的翻转文本或按钮图形。 可以使用【动画】面板结合切片组、嵌套表、百分比宽度表以及远程翻转（将鼠标移到某幅图像上时，另一幅图像发生变化）来创建简单的Web动画，逐帧确定动画的外观。然后将其导出为动画GIF图像或QuickTime文件。 还可以使用Adobe Bridge中的Web画廊功能，通过各种具有专业外观的站点模板将一组图像快速转变为交互网站。 11.2 设计制作“Web页中的导航栏” 本案例以设计制作完成的一个钮扣工厂的“Web页中的导航栏”为例，利用Photoshop中的矢量工具进行图形的绘制，填充颜色，完成后的效果如图11-1所示。 11.2.1 操作步骤 1. 创建“标题”图层组 （1）新建600像素×75像素、背景透明的图像文件，设置属性如图11-2所示。窗口图像效果如图11-3所示。 （2）绘制背景图形。选择圆角矩形工具，设定半径：5；选择“形状图层”，填充颜色为深蓝色，创建一矩形，并添加“斜面和浮雕效果”图层样式，如图11-4所示。 （3）新建“图层2”。选择矢量图形工具绘制厂房，效果如图11-5所示。 图11-5　绘制的厂房 （4）新建文字图层。选择文字工具，输入钮扣工厂标识的文字。颜色：＃cc6600，并为文字添加“投影”效果，【图层】面板如图11-6所示。文字效果如图11-7所示。 （5）创建“徽标”图层组。选择【椭圆工具】，然后选择“形状图层”选项，颜色为“＃afc1e0”，绘制钮扣轮廓并添加“斜面和浮雕”效果，创建形状“图层3”和“图层4”。选择【椭圆工具】，绘制钮扣孔并添加“斜面和浮雕”效果，创建“图层5”，将图层5的钮扣孔复制3次，放置在不同的位置，完成钮扣徽标的制作。完成后的“徽标”图层组如图11-8所示。图像效果如图11-9所示。 （6）创建“拷贝徽标”图层组，将“徽标”图层组的内容复制，将钮扣移动到适当的位置，【图层】面板如图11-10所示。图像效果如图11-11所示。 2.新建“主页”按钮图层组 （1）新建形状图层。选择【圆角矩形工具】，创建“主页”按钮，方法同前，如图11-12、图11-13所示。 （2）新建形状图层。创建“重复钮扣样品”的形状图层，并添加“斜面和浮雕”效果。新建“重复钮扣样品的孔”图层，将两个图层链接起来。【图层】面板如图11-14所示。图像效果如图11-15所示。 （3）创建“钮扣样品”形状图层和“钮扣样品的孔”图层。 不透明度为0，并将两个图层链接起来，【图层】面板如图11-16所示。 图像效果如图11-17所示。 （4）继续创建2个“钮扣样品”形状图层和2个“钮扣样品的孔”图层，不透明度为100%，【图层】面板如图11-18所示。图像效果如图11-19所示。 （5）创建“Home”文字图层，【图层】面板如图11-20所示。“主页”按钮图层组的图像效果如图11-21所示。 3.新建“操作方法”按钮图层组 按照前面的操作步骤，创建完成的“操作方法”按钮图层组的【图层】面板及图像效果如图11-22所示。 4.新建“钮扣”按钮图层组 按照前面的操作步骤，创建完成的“钮扣”按钮图层组的【图层】面板及图像效果如图11-23所示。 5.新建“联系”按钮图层组 按照前面的操作步骤，创建完成的“联系”按钮图层组的【图层】面板及图像效果如图11-24所示。 至此，“Web页导航栏”就制作完成了。完成后的【图层】面板及图像效果如图11-25所示。 11.2.2 “Web页导航栏”的应用 要在Web页中应用设计制作完成的“导航栏”，就要对图像进行切片、优化图像、存储为Web格式等操作。 1.用切片工