导出图像和动画 GIF

Animate

Animate

打开应用程序
  1. Adobe Animate 用户指南
  2. Animate 简介
    1. Animate 新增功能
    2. 图示术语表
    3. Animate 系统要求
    4. Animate 键盘快捷键
    5. 在 Animate 中使用多种文件类型
  3. 动画
    1. Animate 动画基础知识
    2. 如何在 Animate 中使用帧和关键帧
    3. 在 Animate 中使用逐帧动画
    4. 如何在 Animate 中使用经典补间动画
    5. 画笔工具
    6. 运动辅助线
    7. 补间动画和 ActionScript 3.0
    8. 关于运动补间动画
    9. 补间动画
    10. 创建补间动画
    11. 使用属性关键帧
    12. 用补间对位置进行动画处理
    13. 如何使用动画编辑器编辑补间动画
    14. 编辑补间动画的运动路径
    15. 处理补间动画
    16. 添加自定义缓动
    17. 创建和应用动画预设
    18. 设置动画的补间范围
    19. 处理另存为 XML 文件的补间动画
    20. 补间动画与传统补间
    21. 形状补间
    22. 在 Animate 中使用骨骼工具动画
    23. 在 Animate 中处理角色操纵
    24. 如何在 Adobe Animate 中使用遮罩层
    25. 如何在 Animate 中使用场景
  4. 交互性
    1. 如何使用 Animate 创建按钮
    2. 将 Animate 项目转换为其它文档类型格式
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 在 Animate 中通过代码片段添加交互性
    5. 创建自定义 HTML5 组件
    6. 使用 HTML5 Canvas 中的组件
    7. 创建自定义组件：示例
    8. 自定义组件的代码片段
    9. 最佳做法 - 使用 Animate 制作广告
    10. 虚拟现实创作和发布
  5. 工作区和工作流
    1. 创建和管理画笔
    2. 在 HTML5 Canvas 文档中使用 Google 字体
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作区
    6. 在 HTML5 Canvas 文档中使用 Web 字体
    7. 时间轴和 ActionScript
    8. 使用多个时间轴
    9. 设置首选参数
    10. 使用 Animate 创作面板
    11. 使用 Animate 创建时间轴图层
    12. 导出移动应用程序和游戏引擎的动画
    13. 移动和复制对象
    14. 模板
    15. 在 Animate 中查找和替换
    16. 撤消、重做和历史记录面板
    17. 键盘快捷键
    18. 如何在 Animate 中使用时间轴
    19. 创建 HTML 扩展
    20. 图像和动画 GIF 的优化选项
    21. 图像和 GIF 的导出设置
    22. Animate 中的资源面板
  6. 多媒体与视频
    1. 在 Animate 中变形和合并图形对象
    2. 在 Animate 中创建并使用元件实例
    3. 图像描摹
    4. 如何在 Adobe Animate 中使用声音
    5. 导出 SVG 文件
    6. 创建用于 Animate 中的视频文件
    7. 如何在 Animate 中添加视频
    8. 使用 Animate 绘制和创建对象
    9. 改变线条和形状
    10. Animate CC 中的笔触、填充和渐变
    11. 使用 Adobe Premiere Pro 和 After Effects
    12. Animate CC 中的颜色面板
    13. 使用 Animate 打开 Flash CS6 文件
    14. 在 Animate 中使用传统文本
    15. 向 Animate 中置入图稿
    16. 在 Animate 中导入的位图
    17. 3D 图形
    18. 在 Animate 中使用元件
    19. 使用 Adobe Animate 绘制线条和形状
    20. 在 Animate 中使用库
    21. 导出声音
    22. 在 Animate CC 中选择对象
    23. 在 Animate 中使用 Illustrator AI 文件
    24. 应用混合模式
    25. 排列对象
    26. 使用“命令”菜单自动处理任务
    27. 多语言文本
    28. 在 Animate 中使用摄像头
    29. 图形滤镜
    30. 声音和 ActionScript
    31. 绘制首选参数
    32. 用钢笔工具绘图
  7. 平台
    1. 将 Animate 项目转换为其它文档类型格式
    2. 自定义平台支持
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 创建和发布 WebGL 文档
    5. 如何打包 AIR for iOS 应用程序
    6. 发布 AIR for Android 应用程序
    7. 发布用于桌面的 Adobe AIR
    8. ActionScript 发布设置
    9. 最佳做法 - 管理应用程序中的 ActionScript
    10. 如何在 Animate 中使用 ActionScript
    11. Animate 工作区中的辅助功能
    12. 编写和管理脚本
    13. 启用自定义平台支持
    14. 自定义平台支持概述
    15. 使用自定义平台支持插件
    16. 调试 ActionScript 3.0
    17. 启用自定义平台支持
  8. 导出和发布
    1. 如何从 Animate CC 导出文件
    2. OAM 发布
    3. 导出 SVG 文件
    4. 使用 Animate 导出图形和视频
    5. 发布 AS3 文档
    6. 导出移动应用程序和游戏引擎的动画
    7. 导出声音
    8. 最佳做法 - 移动设备内容创建技巧
    9. 最佳做法 - 视频惯例
    10. 最佳做法 - SWF 应用程序创作指南
    11. 最佳做法 - 构造 FLA 文件
    12. 在 Animate 中优化 FLA 文件的最佳做法
    13. ActionScript 发布设置
    14. 指定 Animate 的发布设置
    15. 导出放映文件
    16. 导出图像和动画 GIF
    17. HTML 发布模板
    18. 使用 Adobe Premiere Pro 和 After Effects
    19. 快速分享和发布动画
  9. 故障排除
    1. 已修复的问题
    2. 已知问题

 

阅读本文可了解如何导出图像和动画 GIF。

Animate 引入了导出图像和导出动画 GIF 功能，允许您采用用户友好的交互方式将资源导出为 .png、jpeg、静态及动画 GIF 格式。

在准备用于 Web 和其他联机介质的图像时，通常需要在图像显示品质和图像文件大小之间进行折衷。

您可以使用“导出图像”对话框中的优化功能，预览具有不同文件格式和不同文件属性的优化图像。当预览图像以选择最适合自己需要的设置组合时，您可以同时查看图像的多个版本并修改优化设置。也可以指定透明度和杂边，选择用于控制仿色的选项，以及将图像大小调整到指定的像素尺寸或原始大小的指定百分比。

使用“导出图像”命令存储优化的文件时，可选择为图像生成 HTML 文件。此文件包含在 Web 浏览器中显示图像所需的所有信息。

在 Animate 中，可以使用“另存为”命令将图像另存为 GIF、JPEG 或 PNG 文件。根据文件格式的不同，可以指定图像品质、背景透明度或杂边、颜色显示以及下载方法。但是，您在文件中添加的任何 Web 功能，如链接和动画，均不会保留。

也可以使用 Animate 图像处理器以 JPEG 格式存储文件夹中图像的副本。您可以使用图像处理器来调整图像的大小，并将其颜色配置文件转换为 Web 标准 sRGB。

导出图像

可使用“导出图像”对话框（“文件”>“导出”>“导出图像”和“文件”>“导出”>“导出动画 GIF”）选择优化选项和预览经过优化的图稿。

A. 显示选项 B. 优化弹出菜单 C. 预设选项 D. 图像大小选项 E. 动画选项 F. 预览 G. 工具栏 

在对话框中预览图像

单击图像区域顶部的选项卡以选择显示选项：

原稿

显示没有优化的图像。

优化后

显示应用了当前优化设置的图像。

两栏式

并排显示图像的两个版本。

如果在“导出图像”对话框中无法看到整个图稿，可使用手形工具让其他区域进入视图。可以使用缩放工具来放大或缩小视图。

  • 选择手形工具（或按住空格健），然后在视图区域内拖移以平移图像。
  • 选择缩放工具 ,在视图内单击可进行放大；按住 Alt 键 (Windows) 或 Option 键 (Mac OS) 并在视图内单击可进行缩小。

    也可以键入放大率百分比，或在对话框底部选取一个放大率百分比。

查看优化的图像信息和下载时间

在“导出图像”对话框中，各图像下方的注释区域会提供优化信息。原稿图像的注释显示文件名和文件大小。优化图像的注释显示当前优化选项、优化文件的大小以及使用选中的调制解调器速度时的估计下载时间。可以在“预览”弹出菜单中选取一个调制解调器速度。

使用不同的灰度系数值预览图像

计算机显示器的灰度系数值影响图像在 Web 浏览器中显示的明暗程度。您可以预览图像在不同灰度系数值系统中的显示效果，并对图像做出灰度系数调整以进行补偿。激活预览选项不会影响最终的图像输出。

  • 可通过使用“导出图像”对话框的“预览”弹出菜单来选取以下选项之一：

显示器颜色

不调整图像灰度系数。“显示器颜色”是默认设置。

旧版 Macintosh（无色彩管理）

模拟 Mac OS 10.5 及更早版本使用的默认灰度系数 1.8。

Windows（无色彩管理）

模拟 Windows 和 Mac OS 10.6 及后续版本使用的默认灰度系数 2.2。

使用文档配置文件

调整灰度系数，以便与颜色管理文档中任何附加的文档颜色配置文件相匹配。

针对 Web 优化图像

  1. 选择“文件”>“导出图像”或“文件”>“导出动画 GIF”。

  2. 单击对话框顶部的选项卡选择其中一个显示选项：“优化”或“两栏式”。

  3. （可选）如果图像包含多个切片，请选择要优化的一个或多个切片。

  4. 从“预设”菜单中选择一个预设优化设置，或设置各个优化选项。可用选项随所选择的文件格式而有所不同。

  5. 对优化设置进行微调，直至您对图像品质和文件大小的平衡点满意为止。如果图像包含多个切片，请确保优化所有切片。

    注意:

    要将优化的预览恢复为原始版本，请选择该预览，然后从“预设”菜单中选择“原稿”。

  6. 要确保在优化图像中看到的颜色能够在不同的浏览器中看起来相同，可将图像颜色转换为 sRGB。

  7. 有以下选项可供选择：

    无

    未存储元数据（JPEG 文件中的 EXIF 版权声明除外）。生成最小的文件大小。

    版权所有

    保存版权声明、权利使用条款、版权状态以及版权信息 URL。

    版权与联系信息

    保存所有版权信息以及以下信息：作者、作者职称、电子邮件、地址、国家/地区、州/省、城市、邮政编码、电话及网站。

    全部除相机信息外的所有信息

    存储所有元数据，有关相机设置的 EXIF 数据（例如快门速度、日期和时间、焦距、曝光度补偿、测光图案和闪光灯的使用）除外。

    全部

    将所有元数据存储在文件中。

  8. 单击“保存”。

  9. 在“将优化结果另存为”对话框中，执行以下操作，然后单击“保存”：

    1. 输入一个文件名，并为生成的文件选择位置。

    2. 选择“格式”选项，以指定要保存的文件类型：HTML 文件和图像文件、仅限图像文件或仅限 HTML 文件。

    3. （可选）为 HTML 和图像文件设置输出设置。

    4. 如果图像包含多个切片，请从“切片”菜单中选择一个切片存储选项：“所有切片”或“选中的切片”。

      注意:

      要将优化设置复位到上次存储的版本，请按 Alt 键 (Windows) 或 Option 键 (Mac OS)，然后单击“复位”。要在下次打开“存储为 Web 所用格式”对话框时保留相同设置，请按 Alt/Option 键并单击“记住”。

      5. 要查看在 Illustrator 中将文件存储为 Web 所用格式的视频，请访问 www.adobe.com/go/vid0063_cn。

存储或删除优化预设

可以将优化设置存储为一个命名的组，然后将这些设置应用于其 它图像。所存储的设置与预定义的命名设置一起显示在“预设”弹出菜单中。如果编辑命名的组或预定义的组，则“预设”菜单将显示“未命名”一词。

  1. 根据需要设置优化选项，然后从“优化”调板菜单中选择“存储设置”。

  2. 命名这些设置，然后将其存储在相应的文件夹中：

    Photoshop

    (Windows XP) Document and Settings\[用户名]\Application Data\Adobe\AdobePhotoshop CS5\Optimized Settings

    (Windows Vista) Users\[用户名]\AppData\Roaming\Adobe\Adobe Photoshop CS5\Optimized Settings

    (Mac OS) Users/[用户名]/Library/Preferences/AdobePhotoshop CS5Settings/Optimized Settings

    Illustrator

    (Windows XP) Document and Settings\[用户名]\Application Data\Adobe\AdobeIllustrator CS5 Settings\[语言]\Save for Web Settings\Optimize

    (Windows Vista) Users\[用户名]\AppData\Roaming\Adobe\AdobeIllustrator CS5 Settings\[语言]\Save for Web Settings\Optimize

    (Mac OS) Users/[用户名]/Library/ApplicationSupport/Adobe/Adobe Illustrator CS5/[语言]/Save for Web Settings/Optimize

    注意:

    如果将这些设置存储在其他位置，则无法在“预设”弹出菜单中使用它们。

  3. 要删除某个预设，请从“预设”菜单中选择该预设，然后从“优化”菜单中选择“删除设置”。

将 Web 图形压缩到特定文件大小

  1. 选择“文件”>“导出”>“导出图像”或“文件”>“导出”>“导出动画 GIF”。

  2. 单击“导出图像”或“导出动画 GIF”对话框顶部的选项卡选择其中一个显示选项：“优化”或“两栏式”。 

  3. （可选）选择要优化的切片，以及要使用的文件格式。

  4. 从“优化”菜单（在“预设”菜单的右边）中选择“优化到文件大小”。

  5. 输入所需的文件大小。

  6. 选择“起点”选项：

    当前设置

    使用当前文件格式。

    自动选择 GIF/JPEG

    根据图像内容自动选择最佳格式。

  7. 选择一个“使用”选项，指定是要将指定文件大小仅应用于当前切片、应用于图像中的每个切片，还是应用于所有切片。单击“确定”。

在优化的同时调整图稿大小

在“导出图像”对话框中，可将图像大小调整为指定的像素尺寸或原始大小的某一比例。

  1. 单击“导出图像”对话框中的“图像大小”选项卡。

  2. 设置任一附加选项：

    约束比例

    保持像素宽度与像素高度当前比例不变。

    注意:

    对于 SWF 和 SVG 文件格式，除“剪切到画板”外，“图像大小”调板中的其他任何功能均不适用。

  3. 输入新的像素尺寸，或者指定调整图像大小的百分比，然后单击“应用”。

在 Web 浏览器中预览优化的图像

通过“导出图像”对话框（“文件”>“导出”>“导出图像”或“文件”>“导出”>“导出动画 GIF”），可以在系统中安装的任一 Web 浏览器中预览优化的图像。浏览器预览显示的图像带有题注，其中列出了图像的文件类型、像素尺寸、文件大小、压缩规格和其他 HTML 信息。

  • 要在默认 Web 浏览器中预览图像，请单击“导出图像”对话框底部的浏览器图标。
  • 在“浏览器”对话框中，可以查找计算机中的所有浏览器，并设置用来预览图像的默认浏览器。

更多帮助主题

图像和动画 GIF 的优化选项

导出图像和动画 GIF 的输出设置

 

 

更快、更轻松地获得帮助

新用户？

快速链接

查看您的所有计划 管理您的计划
查看快速链接
隐藏快速链接

法律声明    |    在线隐私政策

Copyright © 2024 Adobe。保留所有权利。