photoshop 图形图像设计与项目实践12.pptVIP

第12章 Web图形和动画 12.1 关于Web图像 12.2 切片 12.3 制作翻转图像或按钮 12.4 制作动画 12.5 优化并输出Web图像 12.6 应用实例 12.7 习题与实验指导 12.1 关于Web图像 12.1.1 常用的Web图像格式 12.1.2 设计Web图像 12.2 切片 　　　使用“切片工具”可以将一幅图像切割成若干个小图像，每个图像切片都包含独立的调色板、URL链接对象和优化设置，可以提高图像的上传下载速度。一般应用于网络的大图或设计网页以及制作各种图标、图像，用户还可以利用切分制作翻转使用的图片组。 12.2.1 创建切片 12.2.2 修改切片 12.2.3 划分切片 12.2.4 切片属性 12.3 制作翻转图像或按钮 　　　翻转是网页上的一个按钮或图像，当鼠标移动到它上方时会发生变化。要创建翻转，至少需要两个图像：主图像表示处于正常状态的图像，而次图像表示处于更改状态的图像。 　　　目前Photoshop CS3虽然没有提供翻转功能，但用户可以通过Photoshop CS3的绘制工具和切片工具来制作用于翻转图像或按钮的图像组，最后使用 Dreamweaver CS3将这些图像置入网页中并添加Javascript代码制作翻转，具体方法如下： 12.4 制作动画 　　Photoshop CS3能够制作出网页GIF动画。GIF动画就是设置好一系列 图像或帧的顺序、装载时间和播放次数等，类似于电影胶片的原理。制作 动画需要结合应用“图层”和动画调板，且处理图层是创建动画的关键，如 下图所示。 12.4.1 帧动画 12.4.2 过渡动画 12.5 优化并输出Web图像 　　　优化网页图像是在保证图像质量的前提下尽量使文件体积减小，以便于在网上传输。而在制作网页时要用到很多图片，如果这些图片教大，就会影响网页的浏览速度。Photoshop CS3提供了强大的优化输出工具，用户能够在压缩图像文件大小的同时又能优化在线显示图像的品质。 12.5.1 优化并输出图像 12.5.2 Web图像文件的格式的选择及其优化 12.5.3 优化切片图像 12.6 应用实例 实例1：制作怪物公司电影宣传网页 12.7 习题与实验指导 实验1 制作逐帧动画 实验２ 制作过渡动画 实验３ 设计制作一个主题为“关于我的学校”的网页 * 主目录 　　Web图像主要有三种图像文件格式，分别为JPEG、GIF、PNG格式。 　　● GIF格式： 　　通过减少图像中的颜色数目来压缩文件，因此适合颜色比较少的图像，如图标、符号、边框等。另外GIF格式还可以保存透明图像和动画图像。 　　● JPEG格式： 　　通过删除图像中的数据信息来压缩文件，虽然也是有损压缩，但是不会改变图像的颜色数目，因此适合色彩丰富，文件较大的图像，但是不支持透明图像。 　　● PNG格式： 　　采用无损压缩方式来减少文件的大小，兼有GIF和JPG的色彩模式，不但能把图像文件压缩到极限又能保留所有与图像品质有关的信息，支持透明图像，不支持动画图像。 　　Web图像通常是低分辨率的，一般设置为72像素/英寸，而且通常采用RGB色彩模式。一个Web页面是各种图像，文字和符号等信息内容的综合体，如何合理编排优化各种内容是Web图像设计的关键。Web图像设计包括如下内容： 　　● 背景设计 　　● 文本设计 　　● 图片设计 　　● 图标设计 　　● 动画设计 本章目录 　　1．用户自定义切片 　　使用“切片工具” 　　绘制切片的基本步骤如下： 　　（1）从工具箱中选择“切片工具”工具　　。 　　（2）单击选项栏中的切片列表，从中选择一项：正常、约束长宽比、固定大小。 　　（3）移动切片工具到图像上，并在要创建切片的区域上拖动。按住Shift键可产生正方形切片，按住Alt＋Shift键可以单击点为中心向外扩展正方形，如下图所示。 用户自定义切片 　　2．基于图层的切片 　　使用“新建基于图层的切片”菜单命令创建基于图层的切片的基本步骤如下： 　　（1）在“图层调板”新建一个“图层1”。 　　（2）在该图层里，使用“矩形”工具　　 绘制一矩形。 　　（3）选择 “图层→新建基于图层的切片”命令，自动创建切片，如下图所示。 基于图层的切片 　　3．基于参考线的切片 　　创建基于参考线的切片的基本步骤如下： 　　（1）向图像中添加参考线。 　　（2）选择“切片工具”　　，然后在选项栏中单击“基于参考线的切片”，如下图所示。 基于参考线的切片 　　4．自动切片提升到用户切片