Animate CC 匯入Photoshop 素材

1.挖剪造型影像

影像素材外觀除了是直角矩型外，還需要圓角矩型甚至是其他的外觀造型，此時就需要使用Photoshop的路徑與選取範圍來處理，並且需要正確的儲存出支援去背的PNG 24檔案格式，至Animate匯入後才能保持完美去背，再以去背影像素材製作動畫。

(1)在Photoshop先將影像尺寸處理至適當大小，再使用圓角矩型工具繪製路徑，至路徑控制版上將路徑轉換為選取範圍。

複製選取範圍內的影像並開啟新檔，依照Photoshop判讀的剪貼簿尺寸開啟新檔後貼上影像，完成挖剪圓角矩型影像的處理。

對於處理好的影像，先隱藏背景圖層並執行『檔案 轉存 儲存為網頁與裝置用』，設定檔案格式為PNG 24，即可儲存出背景透明之特殊輪廓造型影像，至Animate匯入影像後依然保持完整背景透明之特殊輪廓造型影像。回到Animate CC再以檔案匯入匯入至舞台，完成匯入即可。

(2)亦可使用自訂形狀工具繪製路徑，至路徑控制版上將路徑轉換為選取範圍，複製選取範圍內的影像並開啟新檔，依照Photoshop判讀的尺寸開啟新檔後貼上影像，完成挖剪特殊造型影像的處理。

對於處理好的影像，先隱藏背景圖層並執行『檔案 轉存 儲存為網頁與裝置用』，設定檔案格式為PNG 24，即可儲存出背景透明之特殊輪廓造型影像，至Animate匯入影像後依然保持完整背景透明之特殊輪廓造型影像。回到Animate CC再以檔案匯入匯入至舞台，完成匯入即可。

２.處理去背景影像

對於動畫影像素材，去除原影像的背景，是表現產品影像的必備處理，可以藉由photoshop的去背工具或是筆形工具描繪影像邊緣路徑來完成去除背景的處理，同樣需要儲存出PNG 24的檔案格式，匯入Animate CC後才能保持去背景影像邊緣完整。

(1)在Photoshop先將要去背景的影像尺寸處理至適當大小，若是背景為較相似顏色的影像，可以使用『魔術橡皮擦』工具，設定適合的『容許度』（去除影像顏色相近度，是影像狀況約設定10～30）後，直接在要去除的影像範圍上按下，即可依按下位置的顏色與容許度將背景去除。

(2)對於較複雜的影像背景，就需使用筆形工具來描繪影像輪廓路徑，再將路徑轉換為選取範圍後複製並開啟新檔案貼上，完成去背景處理（請先將要去背景的影像尺寸處理至適當大小）。

(3)對於處理好的影像，先隱藏背景圖層並執行『檔案 儲存為網頁與裝置用』，設定檔案格式為PNG 24，至Animate CC匯入影像後依然保持完整背景透明之影像。回到Animate CC再以檔案匯入匯入至舞台，完成匯入即可。

3.匯入包含半透明效果內容

在Photoshop中經常處理出來的半透明效果有『漸層』、『圖層樣式』效果、『遮色片』等，尤其是圖層樣式與遮色片二種素材，常是匯入Animate CC後較可能出錯的，因此需要分次儲存出確定的PNG24檔案格式與檔案大小，再匯入Animate CC之中。

(1)在Photoshop先將效果影像檔案尺寸處理至適當大小，再使用裁切工具裁切出僅包含主要效果內容即可，多餘的周圍背景勿保留，隱藏背景圖層並執行『檔案 儲存為網頁與裝置用』，設定檔案格式為PNG 24，至Flash匯入影像後依然保持完整半透明效果之影像。

(2)若是包含有圖層與大小不同的部分影像，請隱藏圖層依圖層內容分次裁切出僅包含主要效果內容即可，多餘的周圍背景勿保留，隱藏背景圖層並執行『檔案 儲存為網頁與裝置用』（裁切儲存後回復，再裁切儲存出其他圖層內容），設定檔案格式為PNG 24，至Flash匯入影像後依然保持完整半透明效果之影像。

4.直接匯入Photoshop原始PSD檔

Animate CC可以直接匯入 PSD 檔案並保留許多 Photoshop 功能，且在Animate CC中維持 PSD 檔案的影像品質和可編輯性，例如『文字』、『圖層順序』、『半透明效果』，唯『遮色片』建議套用遮色片；圖層樣式建議圖層合併（或是分圖層裁切個別存出）。

(1)在Photoshop先將有包含遮色片的圖層『套用遮色片』，對於含有圖層樣式的圖層請與空白圖層合併成一般圖層，避免以匯入PSD方式匯入後產生誤差。

(2)在Animate CC，執行『檔案 匯入＞匯入至舞台』選擇匯入的PSD檔，於匯入設定視窗上左側確認所要匯入的圖層，請複選透明背景的圖層並在右側選擇『將影像圖層匯入為：點陣圖影像包含可編輯圖層樣式的』、『影片片段註冊：中心』、『壓縮：不失真』。下方設定『將圖層轉換成：Animate圖層』、『將圖層放回原始位置』、『將舞台設成photoshop畫布大小』，按下確定完成匯入。

(3)匯入後即可檢視圖層順序、圖層名稱、檔案長寬尺寸大小與內容位置均保持與原photoshop內一致（圖層1為原來空白檔案可直接刪除），文字為可編輯文字，元件半透明效果均保持另外在元件庫之中是以整齊資料夾、影片片段元件、影像原始資源素材整理。

範例檔案下載

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果