制作网页图像与动画.ppt

1、第14章 制作网页图像与动画,新版本的Photoshop CS在Web方面的运用进行了扩充，大大增强了在网页图像制作方面功能，以方便用户快速的制作网页图像。此外，Photoshop CS还提供了一个专门用于制作动态网页和GIF动画的附件 ImageReady CS。该附件基本上具备了Photoshop的图像编辑处理功能，用户可直接用它来处理图像和制作GIF动画。 蓝色冰晶减肥霜,教学目标 通过对本章的学习，读者应了解并掌握在Photoshop CS中制作与编辑切片的基本方法，能够在ImageReady CS中优化网页图像及制作GIF动画与滚动图像。 教学重点与难点 制作与编辑切片 优化输出网页

2、图像 在ImageReady CS中制作GIF动画 在ImageReady CS中优化网页图像,本章知识点,制作网页图像 使用ImageReady CS,14.1 制作网页图像,在Photoshop CS中，用户不但可以制作网页图像，而且可以优化和输出网页图像。本节将介绍这方面的知识。 使用切片功能 优化输出网页图像,14.1.1 使用切片功能,经常上网的用户都遇到过这样的现象：在浏览一幅较大的网页图像时，只有在整个图像数据全部下载后才能看到图像，而在此之前看到的都是一个空白屏幕。鉴于这种情况，人们便提出了一个对图像进行切割的方法，即将一幅大图像切分成若干小图像。这样，在浏览网页时，便能够看到

3、一幅逐渐显示的图像，从而避免了长时间的等待。在此基础上，还可为图像切片设置链接属性，单击不同的切片即可转至不同的网页。 蓝色冰晶减肥霜 制作切片 设置切片属性 调整切片的位置或尺寸,调整切片的位置或尺寸,14.1.2 优化输出网页图像,在Photoshop CS中，用户可对网页图像进行两种方式的优化，即基本优化与精确优化。如果只是简单地制作能够用于网页的优化图像，可选择“文件”|“存储为”命令，将图像文件按GIF或JPG格式进行保存。,14.2 使用ImageReady CS,ImageReady CS是Photoshop CS的一个附件，它基本具备了Photoshop CS的所有功能，是专门

4、用于处理Web图像和编辑网页动画的工具。 ImageReady CS的功能 优化网页图像 制作GIF动画 制作网页按钮动画 蓝色冰晶减肥霜,14.2.1 ImageReady CS的功能,ImageReady CS得基本功能包括以下几个方面：制作切片、图像映射、制作动画、优化Web图像等。 制作切片 图像映射 制作动画 优化Web图像,14.2.2 优化网页图像,要在ImageReady CS中优化网页图像，可使用它所提供的“优化”调板，如图所示。该调板中各优化选项与Photoshop CS中的“存储为Web所用格式”对话框中的优化选项基本相同。,14.2.3 制作GIF动画,动画由多幅画面所组成，每一幅画面称为一个动画帧，这些帧按照动作发生的前后顺序排列起来，进行连续地播放，模拟物体的运动情况。帧之间的差别越小，动画的效果就越逼真。在各种常用的动画文件格式中，最常用的是GIF图像文件格式。因此，很多动画软件都将其结果保存为GIF格式。,14.2.4 制作网页按钮动画,制作网页按钮是增强网页动态效果的有效手段，在ImageReady CS中，也同样可以方便地制作按钮动画。 网页按钮动画是一种特殊的网页效果，是指网页中的同一区域根据鼠标动作的不同，而显示的不同图像效果。根