使用Photoshop和ImageReady，你可以为你的网页动画添加多变的效果。在这篇教程中，你将学习如何使一个物体在屏幕上移动时改变颜色。先来看看效果。（图main）


1.建立调整图层

打开Photoshop，把你想使之运动的物体放置在透明背景的中心。（当使用文字时，在应用调整图层之前需先将文字层栅格化 ）

在图层菜单中，选择新建一个调整层，其内容为色相/饱和度。

在色相/饱和度对话框中，首先确定打开预览；然后分别拖动色相、饱和度和明度滑块来改变物体颜色，满意后点击确认。（图step01）


2.在Photoshop工具箱里，点击“跳转到ImageReady”按钮，用ImageReady打开文件

存储文档，选择文件名称和存储路径。提示：虽然调整图层只能在Photoshop中使用，但当你用ImageReady打开图像时，它仍然可以被保留。（图step02）


3.创建动画的第一帧

在ImageReady的图层面板中，选择图层1（包含图像的一层），选择移动工具，在图像窗口拖动这一层到动画的起始位置。注意，动画面板第一帧的图像位置也跟着改变。（图step03）


4.创建动画的最后一帧

在动画面板中，点击新建帧按钮，在动画面板中选择第二帧，而在图层面板中选择图层1。在图像窗口，用移动工具把图层1拖至动画的终点位置。可以看到，动画面板第二帧的图像位置改变了。（图step04）


5.在动画的最后一帧中改变物体颜色

在第二帧被选择的情况下，选择色相/饱和度调整层，把图层不透明度改为1％。

现在，第一帧的层不透明度为100％，第二帧的不透明度为1％，两帧之间不透明度的差异会造成物体颜色的改变。（图step05）


6.创建动画的中间帧

在动画面板中，选择“动画帧过渡”，在参数栏中，确定位置、不透明度、效果均被选择，然后在“添加帧”中输入要增加的帧的数量。

点击动画面板上的播放键，预览动画，在观看之后，你可以添加，删除或是修改帧，如果需要，可以设置重放选项。（图step06）


7.从动画面板中选择优化动画

点击动画面板最右端的黑色小三角，从弹出菜单中选择“优化动画”，在优化动画对话框中，选择“定界框”和“删除冗余像素”，然后选择自动重建选项，保留帧不透明度。

在优化面板中，从“优化的文件格式”菜单中选择GIF，然后选择其它选项来优化图像在Web上的显示。

选择文件>将优化文件存储为，存储图像。（图step07）