帧动画工作流程

在Photoshop中，使用“动画”面板(Photoshop Extended CS5)或“时间轴”面板(CS6)创建动画帧。每个帧表示一个图层配置。

注：在Photoshop Extended CS5和Photoshop CS6中，也可以使用时间轴和关键帧创建动画。请参阅创建时间轴动画。

动画插图。单轮脚踏车图像在其自身的图层上；图层的位置在动画的每一帧中都会发生变化。

要在Photoshop中创建基于帧的动画，请使用以下一般工作流程。

1. 打开一个新文档。

如果尚未显示，则打开“动画”(Photoshop Extended CS5)、“时间轴”(CS6) 和“图层”面板。确保“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 处于帧动画模式：

  • (Photoshop Extended CS5) 单击“动画”面板中的“转换为帧动画”。

  • (CS6) 单击“时间轴”面板中间的向下箭头以选取“创建帧动画”，然后单击箭头旁边的按钮。

2. 添加图层或转换背景图层。

由于不能为背景图层创建动画，请添加新图层或将背景图层转换为常规图层。请参阅转换背景和图层。

3. 向动画中添加内容。

如果动画中包含一些已单独创建动画的对象，或者您要更改某个对象的颜色或完全更改某个帧中的内容，请在单独图层上创建对象。

4. 向“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 添加帧。

5. 选择一个帧。

6. 编辑选定帧的图层。

请执行下列任一操作：

  • 打开和关闭不同图层的可见性。

  • 更改对象或图层的位置以移动图层内容。

  • 更改图层不透明度以渐显或渐隐内容。

  • 更改图层的混合模式。

  • 向图层添加样式。

    Photoshop 提供了用于在帧之间保持图层特性相同的工具。请参阅统一动画帧中的图层属性。

7. 根据需要，添加更多帧并编辑图层。

可以创建的帧的数量仅受 Photoshop 可用的系统内存数量的限制。

借助于“过渡”命令，可以使用面板中两个现有帧之间的中间更改生成新的帧。这是一种在屏幕上移动对象或渐显/渐隐对象的快速方法。请参阅使用过渡创建帧。

8. 设置帧延迟和循环选项。

可以为每个帧指定延迟时间，并指定循环以让动画运行一次、运行一定的次数或连续运行。请参阅在帧动画中指定延迟时间和在帧动画中指定循环。

9. 预览动画。

可在创建动画时使用“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中的控件播放动画。然后，使用“存储为 Web 和设备所用格式”命令在 Web 浏览器中预览动画。请参阅在 Web 浏览器中预览优化的图像。

10. 优化动画以便快速进行下载。

11. 存储动画。

可以使用以下几个不同的选项存储您的帧动画：

  • 使用“存储为 Web 和设备所用格式”(Photoshop Extended CS5) 或“存储为 Web 所用格式”(CS6) 命令将帧动画存储为动画 GIF。

  • 以 Photoshop (PSD) 格式存储，以便稍后能够对动画执行更多的操作。

  • 存储为图像序列、QuickTime 影片或单独的文件。另请参阅导出视频文件或图像序列。

将帧添加到动画

添加帧是创建动画的第一步。如果打开了一个图像，则“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 会将该图像显示为新动画的第一个帧。添加的每个帧开始都是上一个帧的副本。然后可使用“图层”面板对帧进行更改。

  1. 确保“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 处于帧动画模式。

  2. 单击“动画”面板中的“复制选定的帧”按钮 。

选择动画帧

在处理帧之前，必须将其选择为当前帧。当前帧的内容显示在文档窗口中。

在“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中，当前帧由帧缩览图周围的窄边框（在带阴影的选区高光的内部）指示。选中的帧由帧缩览图周围带阴影的高光指示。

选择一个动画帧

在“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中执行下列操作之一：

  • 单击某个帧。

  • 单击“选择下一帧”按钮 以选择序列中的下一帧作为当前帧。

  • 单击“选择上一帧”按钮 以选择序列中的上一帧作为当前帧。

  • 单击“选择第一帧”按钮 以选择序列中的第一帧作为当前帧。

选择多个动画帧

在“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中，执行下列操作之一：

  • 要选择多个连续的帧，请按住 Shift 键，并单击第二个帧。第二个帧以及第一个帧与第二个帧之间的所有帧都将添加到选区中。

  • 要选择多个不连续的帧，请按住 Ctrl 键 (Windows) 或 Command 键 (Mac OS) 并单击其它帧，可将这些帧添加到选区。

  • 要选择全部帧，请从面板菜单中选取“选择全部帧”。

  • 要在多帧选区中取消选择一个帧，请按住 Ctrl 键 (Windows) 或 Command 键 (Mac OS) 并单击该帧。

编辑动画帧

  1. 在“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中，选择一个或多个帧。

  2. 请执行下列任一操作：

    • 要编辑动画帧中的对象的内容，请使用“图层”面板修改图像中影响该帧的图层。

    • 要更改动画帧中某个对象的位置，请在“图层”面板中选择包含该对象的图层，然后将其拖动到新位置。

      注：可以选择和更改多个帧的位置。但是，如果拖动多个不连续的帧，这些帧会连续地放置到新位置上。

    • 要反转动画帧的顺序，请从面板菜单中选取“反向帧”。

      注：要反向的帧不必是连续的；可以反向任何选定的帧。

    • 要删除选定的帧，请从“动画”面板菜单中选择“删除帧”，或单击“删除”图标 ，然后单击“是”以确认删除操作。也可以将选定的帧拖动到“删除”图标上。

统一动画帧中的图层属性

“图层”面板中的统一按钮（“统一图层位置”、“统一图层可见性”和“统一图层样式”）决定如何将对现用动画帧中的属性所做的更改应用于同一图层中的其他帧。当选择某个统一按钮时，将在现用图层的所有帧中更改该属性；当取消选择该按钮时，更改将仅应用于现用帧。

“图层”面板中的“传播帧 1”选项还决定如何将对第一帧中的属性所做的更改应用于同一图层中的其他帧。选择该选项后，您可以更改第一帧中的属性，现用图层中的所有后续帧都会发生与第一帧相关的更改（并保留已创建的动画）。

统一图层属性

  1. 在“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中，更改一个帧的属性。

  2. 在“图层”面板中，单击“统一图层位置”、“统一图层可见性” 或“统一图层样式” 以将更改的属性应用于现用图层中的所有其他帧。

传播帧 1

  1. 在“图层”面板中，选择“传播帧 1”选项。

  2. 在“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中，更改第一帧的属性。

    更改的属性会应用于（关联）图层中所有后续帧。


也可以通过如下方式传播帧：按住 Shift 键并选择图层中任何连续的帧组，然后更改任何选定帧的某个属性。

显示或隐藏统一图层按钮

从“图层”面板菜单中选取“动画选项”，然后选取下列选项之一：  

自动

在“动画”面板打开时显示统一图层按钮。在 Photoshop Extended 中，“动画”面板必须处于帧动画模式中。

总是显示

无论是在打开还是关闭“动画”面板时都显示统一图层按钮。

总是隐藏

无论是在打开还是关闭“动画”面板时都隐藏统一图层按钮。

拷贝帧和图层属性

为理解拷贝和粘贴帧时出现的情况，可将帧视为具有给定图层配置的图像副本。在拷贝帧时，将拷贝图层的配置（包括每一图层的可见性设置、位置和其它属性）。粘贴帧就是将图层的配置应用到目标帧。

  1. 在“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中选择一个或多个要拷贝的帧。

  2. 从面板菜单中选取“拷贝帧”。

  3. 在当前动画或另一动画中选择一个或多个目标帧。

  4. 从面板菜单中选取“粘贴帧”。

  5. 选择一种“粘贴”方法：

    替换帧

    使用拷贝的帧替换所选帧。不会添加任何新图层。目标帧中的每个现有图层的属性将由每个拷贝图层的属性替换。如果在不同图像之间粘贴帧，则在图像中添加新的图层；但是，在目标帧中只有粘贴的图层是可见的（现有图层将被隐藏）。

    在选区之上粘贴

    将粘贴的帧的内容作为新图层添加到图像中。将这些帧粘贴到同一图像时，使用此选项可使图像中的图层数量加倍。在目标帧中，新粘贴的图层是可见的，原来的图层将被隐藏。在非目标帧中，新粘贴的图层会隐藏起来。

    在选区前粘贴或在选区后粘贴

    在目标帧之前或之后添加拷贝的帧。如果在不同图像之间粘贴帧，则在图像中添加新的图层；但是，在新帧中只有粘贴的图层是可见的（现有图层将被隐藏）。

  6. （可选）要链接“图层”面板中粘贴的图层，请选择“链接添加的图层”。  

    只有在将帧粘贴到另一个文档时，该选项才起作用。如果打算将粘贴的图层作为一个单元重新调整位置，请选择此选项。

  7. 单击“确定”。

使用过渡创建帧

过渡 (tweening) 这一术语从“in betweening”变化而来，后者是用于描述这一过程的传统动画术语。“过渡”命令（也称为插值处理）大大减少了创建动画效果（如渐现、渐隐或在帧之间移动图素）所需的时间。创建过渡帧之后，可以分别对它们进行编辑。

可以使用“过渡”命令自动添加或修改两个现有帧之间的一系列帧：均匀地改变新帧之间的图层属性（位置、不透明度或效果参数）以创建运动显示效果。例如，如果要渐隐一个图层，则可将起始帧的图层不透明度设置为 100%，然后将结束帧的同一图层的不透明度设置为 0%。在这两个帧之间过渡时，该图层的不透明度在整个新帧上均匀减小。

使用过渡功能对文本位置进行动画处理

  1. 要将过渡应用到特定图层，请在“图层”面板中选择它。

  2. 选择单一帧或多个连续帧。

    • 如果选择单一帧，则应选取是否用上一帧或下一帧来过渡该帧。

    • 如果选择两个连续帧，则在这两个帧之间添加新帧。

    • 如果选择的帧多于两个，过渡操作将改变所选的第一帧和最后一帧之间的现有帧。

    • 如果选择动画中的第一帧和最后一帧，则这些帧将被视为连续的，并且会将过渡帧添加到最后一帧之后。（将动画设置为多次循环时，这种过渡方法很有用。）


  3. 执行下列操作之一：

    • 单击“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中的“过渡”按钮 。

    • 从面板菜单中选择“过渡”。

  4. 指定要在添加的帧中改变的图层：

    所有图层

    改变所选帧中的全部图层。

    选中的图层

    只改变所选帧中当前选中的图层。

  5. 指定要改变的图层属性：

    位置

    在起始帧和结束帧之间均匀地改变图层内容在新帧中的位置。

    不透明度

    在起始帧和结束帧之间均匀地改变新帧的不透明度。

    效果

    均匀改变起始帧和结束帧之间的图层效果的参数设置。

  6. 如果在第 2 步中选择的是单一帧，请从“过渡方式”菜单中选择添加帧的位置：

    下一帧

    在所选的帧和下一帧之间添加帧。在“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中选择最后一帧时，该选项不可用。

    第一帧

    在最后一帧和第一帧之间添加帧。只有在“动画”(Photoshop Extended CS5) 或“时间轴”(CS6) 面板中选择最后一帧时，该选项才可用。

    上一帧

    在所选的帧和上一帧之间添加帧。在“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中选择第一帧时，该选项不可用。

    最后一帧

    在第一帧和最后一帧之间添加帧。只有在“动画”(Photoshop Extended CS5) 或“时间轴”(CS6) 面板中选择第一帧时，该选项才可用。

  7. 在“要添加的帧”框中输入值，或使用向上、向下箭头按钮来选择帧号。（如果选择的帧多于两个，则此选项不可用。）

  8. 单击“确定”。

为每个新帧添加新图层

“为每个新帧创建新图层”命令会在每个新帧中自动添加一个新的可视图层，该图层在其它帧中则是隐藏的。如果创建的动画要求向每个帧中添加一个新的可视图素，则使用此选项可节省时间。

从“动画”面板菜单 (Photoshop Extended CS5) 或“时间轴”面板菜单 (CS6) 中选取“为每个新帧创建新图层”。

复选标记表示该选项已打开。

隐藏动画帧中的图层

创建新图层时，该图层在所有动画帧中都是默认可见的。

  • 要仅在活动帧中显示新图层，请取消选择“动画”面板菜单 (Photoshop Extended CS5) 或“时间轴”面板菜单 (CS6) 中的“新建在所有帧中都可见的图层”。

  • 要在特定帧中隐藏图层，请选择该帧，然后在“图层”面板中隐藏所需图层。

在帧动画中指定延迟时间

可以为动画中的单个或多个帧指定延迟（显示帧的时间）。延迟时间以秒为单位显示。秒的几分之一以小数值显示。例如，将四分之一秒指定为 0.25。如果在当前帧上设置延迟，则之后创建的每个帧都将记忆并应用该延迟值。

  1. 在“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 中选择一个或多个帧。

  2. 单击所选帧下面的“延迟”值以查看弹出式菜单。

  3. 指定延迟：

    • 从弹出菜单中选择一个值。（最后一次使用的值会显示在菜单底部。）

    • 选择“其它”，在“设置帧延迟”对话框中输入一个值并单击“确定”。如果选择了多个帧，则为一个帧指定延迟值时会将该值应用于所有帧。

选取帧处理方法

帧处理方法指定在显示下一帧之前是否扔掉当前帧。选择一种处理包含背景透明度的动画的方法，以指定当前帧是否可透过下一帧的透明区域可见。

帧处理方法

A.具有背景透明度并使用“恢复为背景”选项的帧

B.具有背景透明度并使用“不处理”选项的帧

“处理方法”图标指示是将帧设置为“不处理”还是“处理”。（将“处理方法”设置为“自动”时不显示图标。）

  1. (Photoshop Extended) 确保“动画”面板处于帧动画模式。

  2. 选择要为其选取处理方法的帧。

  3. 右键单击 (Windows) 或按住 Control 键并单击 (Mac OS) 帧缩览图以查看“处理方法”上下文菜单。

  4. 选取处理方法：

    自动

    自动确定当前帧的处理方法，如果下一帧包含图层透明度，则扔掉当前帧。对于大多数动画，使用“自动”选项（默认）即可获得所需结果。

    注：   要保留包含透明度的帧，请在使用“去除多余像素”优化选项时选择“自动处理”选项。

    不处理

    在显示下一帧时保留当前帧。当前帧（和前一帧）可以透过下一帧的透明区域显示出来。可以使用“不处理”选项，在浏览器中查看准确的动画预览。

    处理

    在显示下一帧之前中止显示当前帧。在任何时候都只显示一个帧（并且当前帧不会透过下一帧的透明区域显示出来）。

在帧动画中指定循环

选择一个循环选项以指定动画序列在播放时重复的次数。

  1. 单击“动画”面板 (Photoshop Extended CS5) 或“时间轴”面板 (CS6) 左下角的“循环选项选择”框。

  2. 选择循环选项：“一次”、“3 次”、“永远”或“其它”。

  3. 如果选择的是“其它”，请在“设置循环计数”对话框中输入一个值，并单击“确定”。

    注：  也可以在“存储为 Web 和设备所用格式”(Photoshop Extended CS5) 或“存储为 Web 所用格式”(CS6) 对话框中设置“循环”选项。有关更多信息，请参阅存储为 Web 和设备所用格式概述。

删除整个动画

从“动画”面板菜单 (Photoshop Extended CS5) 或“时间轴”面板菜单 (CS6) 中选择“删除动画”。

,