Animate CC 匯入Photoshop 素材

Animate CC 匯入Photoshop 素材

更新於 發佈於 閱讀時間約 6 分鐘

以影像點陣圖為動畫素材時,除了一般的影像之外,還可以藉由Photoshop處理出去背景的影像素材,以及包含半透明效果的影像素材,也都是動畫中常需要的專業素材準備。

1.挖剪造型影像

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

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

raw-image

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

raw-image

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

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

raw-image

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

2.處理去背景影像

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

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

raw-image

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

raw-image

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

raw-image

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

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

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

raw-image

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

raw-image

4.直接匯入Photoshop原始PSD檔

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

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

raw-image

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

raw-image

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

raw-image

範例檔案下載

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

avatar-img
哩老師的沙龍
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
留言
avatar-img
留言分享你的想法!
哩老師的沙龍 的其他內容
動畫素材除了使用Animate CC工具繪製之外,搭配匯入自Illustrator繪製較精細的動畫素材,也是專業與必要的方式。而在搭配匯入自Illustrator繪製素材製作動畫時的各種方式與技巧,也是動畫素材準備的重點內容。 1.直接拷貝貼上illustrator素材 您可以在 Illustrat
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍
動畫素材除了使用Animate CC工具繪製之外,搭配匯入自Illustrator繪製較精細的動畫素材,也是專業與必要的方式。而在搭配匯入自Illustrator繪製素材製作動畫時的各種方式與技巧,也是動畫素材準備的重點內容。 1.直接拷貝貼上illustrator素材 您可以在 Illustrat
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍