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

    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)