使用手冊 取消

匯出影像和 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 文件中使用網頁字體
    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 for Desktop 的發佈功能
    8. ActionScript 發佈設定
    9. 最佳作法 - 在應用程式中組織 ActionScript
    10. 如何搭配使用 ActionScript 與 Animate
    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 動畫格式。

在製作網頁或其他線上媒體使用的影像時，通常需要在影像的顯示品質和檔案大小之間進行取捨。

您可以使用「匯出影像」對話方塊中的最佳化功能，預覽不同檔案格式和不同檔案特質的最佳化影像。您可以同時檢視影像的多重版本，並在預覽影像時修改最佳化的設定，以選取符合您需要的最佳設定組合；也可以指定透明度和修邊、選取控制混色的選項，以及將影像重新調整為指定的像素尺寸或原始尺寸的指定百分比。

當您使用「匯出影像」命令儲存最佳化的檔案時，可以選擇產生影像的 HTML 檔案。這個檔案包含在網頁瀏覽器中顯示影像的所有必要資訊。

在 Animate 中，您可以使用「另存新檔」命令將影像儲存成 GIF、JPEG 或 PNG 檔案。依照不同的檔案格式，您可以指定影像品質、背景透明度或邊緣調合、色彩顯示和下載方法；但是，已加入到檔案的所有網頁功能 (例如連結和動畫) 將不會保留。

您也可以使用 Animate 的「影像處理器」，以 JPEG 格式為整個資料夾的影像儲存拷貝。您可以使用「影像處理器」重新調整影像大小，並將影像的色彩描述檔轉換為 Web 標準 sRGB。

匯出影像

使用「匯出影像」對話方塊 (「檔案 > 匯出 > 匯出影像」，以及「檔案 > 匯出 > 匯出 GIF 動畫」) 可選取最佳化選項，以及預覽最佳化的圖案。

A. 顯示選項 B. 「最佳化」彈出式選單 C. 預設集選項 D. 影像大小選項 E. 「動畫」選項 F. 預覽 G. 工具列 

在對話方塊中預覽影像

請按一下影像區域頂端的索引標籤，選取顯示選項：

原稿

顯示未經最佳化的影像。

最佳化

顯示已套用目前最佳化設定的影像。

2 欄式

並列顯示 2 種不同版本的影像。

如果在「匯出影像」對話方塊中無法看見整個圖案，可以使用「手形」工具將別的區域移到檢視中。使用「縮放」工具可放大或縮小檢視。

  • 請選取「手形」工具 (或按住空白鍵) 並在檢視區域中，即可平移影像。
  • 選取「縮放」工具 ，並在檢視中按一下，即可放大顯示；按住 Alt 鍵 (Windows) 或 Option 鍵 (Mac OS) 並在檢視中按一下，則可縮小顯示。

    您也可以鍵入縮放比率，或是選擇對話方塊下方的其中一項。

檢視最佳化影像資訊和下載時間

在「匯出影像」對話方塊中，每個影像下方的附註區域都會提供最佳化資訊。原始影像的註解中會顯示檔案名稱和檔案大小。最佳化影像的附註會顯示目前的最佳化選項、最佳化檔案的大小，以及選用的數據機速度的預估下載時間。您可以在「預覽」彈出式選單中選擇數據機的速度。

預覽不同 Gamma 值的影像

電腦螢幕的 Gamma 值影響影像在瀏覽器中看起來的亮度。您可以依不同的 Gamma 值預覽您的影像在系統中的模樣，並對影像調整 Gamma 以進行補償。啟動預覽選項並不會影響到最終的影像輸出。

  • 使用「匯出影像」對話方塊中的「預覽」彈出式選單，選擇下列其中一個選項。

螢幕色彩

不調整影像 Gamma 值。螢幕色彩為預設設定。

舊版 Macintosh (無色彩管理)

模擬由 Mac OS 10.5 及更舊版本所使用的預設 1.8 Gamma。

Windows (無色彩管理)

模擬由 Windows 及 Mac OS 10.6 與更新版本所使用的預設 2.2 Gamma。

使用文件描述檔

將 Gamma 值調整為符合色彩管理文件中附加的任何文件色彩描述檔。

最佳化網頁影像

  1. 選擇「檔案 > 匯出影像」或「檔案 > 匯出 GIF 動畫」。

  2. 按一下對話方塊頂端的索引標籤，選取顯示選項：「最佳化」或「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) 並按一下「重設」。若要在下次開啟「儲存為網頁用」對話方塊時保持相同的設定，請按住 Alt/Option 鍵並按一下「記憶」。

      5. 如需在 Illustrator 中儲存檔案以供網頁使用的影片教學課程，請參閱 www.adobe.com/go/vid0063_tw。

儲存或刪除最佳化預設集

您可以將最佳化設定儲存為命名的組合，然後將這些設定套用到其他影像中。儲存的設定會與預先定義的命名設定一起顯示在「預設集」彈出式選單中。如果編輯命名的組合或預先定義的組合，「預設集」選單中會顯示「未命名」。

  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. 如果要刪除預設集，請從「預設集」選單中選取預設集，並從「最佳化」選單中選取「刪除設定」。

將網頁圖像壓縮為特定檔案大小

  1. 選擇「檔案 > 匯出 > 匯出影像」或「檔案 > 匯出 > 匯出 GIF 動畫」。

  2. 按一下「匯出影像」或「匯出 GIF 動畫」對話方塊頂端的索引標籤，選取顯示選項：「最佳化」或「2 欄式」。 

  3. (選擇性) 選取要最佳化的切片以及要使用的檔案格式。

  4. 從「最佳化」選單 (在「預設集」選單的右方) 選取「檔案大小最佳化」。

  5. 輸入所要的檔案大小。

  6. 選取「開始」選項：

    目前設定

    使用目前的檔案格式。

    自動選取 GIF/JPEG

    根據影像內容自動選取最適合的格式。

  7. 選取「使用」選項，以指定將指定的檔案大小套用到目前的切片、每一個影像中的切片、或是所有切片。按一下「確定」。

在最佳化時重新調整圖稿尺寸

在「匯出影像」對話方塊中，您可以將影像重新調整為指定的像素尺寸，或是重新調整為原始大小的某個百分比。

  1. 按一下「匯出影像」對話方塊中的「影像大小」索引標籤。

  2. 設定任何其他選項：

    強制等比例

    維持目前像素寬度與像素高度的比例。

    註解：

    「影像尺寸」浮動視窗中的功能除了「剪裁至工作區域」以外，都無法用於 SWF 和 SVG 檔案格式。

  3. 輸入新的像素尺寸，或指定重新調整影像尺寸的百分比，然後按一下「套用」。

在網頁瀏覽器中預覽最佳化的影像

您可以透過「匯出影像」對話方塊 (「檔案 > 匯出 > 匯出影像」或「檔案 > 匯出 > 匯出 GIF 動畫」)，在系統上安裝的任何網頁瀏覽器中預覽最佳化影像。瀏覽器預覽顯示影像時會附註解，列出影像的檔案類型、像素尺寸、檔案大小、壓縮規格及其他 HTML 資訊。

  • 若要在預設網頁瀏覽器中預覽影像，請按一下「匯出影像」對話方塊底部的瀏覽器圖示。
  • 您可以在「瀏覽器」對話方塊中尋找電腦上的所有瀏覽器，並且設定用來預覽影像的預設瀏覽器。

更多說明主題

影像和 GIF 動畫的最佳化選項

匯出影像和 GIF 動畫的輸出設定

 

 

更快、更輕鬆地獲得協助

新的使用者？

快速連結

檢視您的所有計劃 管理您的計劃
檢視快速連結
隱藏快速連結

法律注意事項    |    線上隱私政策