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
留言分享你的想法!
avatar-img
哩老師的沙龍
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
哩老師的沙龍的其他內容
2020/02/05
動畫素材除了使用Animate CC工具繪製之外,搭配匯入自Illustrator繪製較精細的動畫素材,也是專業與必要的方式。而在搭配匯入自Illustrator繪製素材製作動畫時的各種方式與技巧,也是動畫素材準備的重點內容。 1.直接拷貝貼上illustrator素材 您可以在 Illustrat
Thumbnail
2020/02/05
動畫素材除了使用Animate CC工具繪製之外,搭配匯入自Illustrator繪製較精細的動畫素材,也是專業與必要的方式。而在搭配匯入自Illustrator繪製素材製作動畫時的各種方式與技巧,也是動畫素材準備的重點內容。 1.直接拷貝貼上illustrator素材 您可以在 Illustrat
Thumbnail
2020/02/05
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
Thumbnail
2020/02/05
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
Thumbnail
2020/02/05
使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍
Thumbnail
2020/02/05
使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
STEP1. 在PHOTOSHOP中開啟範例,使用『魔術橡皮擦』工具直接點取背景來去除背景,由圖層控制版上設定『透明鎖定』,在執行『編輯 > 填滿 > 黑色』將影像填滿黑色。 STEP2. 依序使用矩型選取工具框選影像並拷貝,至ILLUSTRATOR貼上,點取影像執行『視窗 > 影像描圖』,開啟
Thumbnail
STEP1. 在PHOTOSHOP中開啟範例,使用『魔術橡皮擦』工具直接點取背景來去除背景,由圖層控制版上設定『透明鎖定』,在執行『編輯 > 填滿 > 黑色』將影像填滿黑色。 STEP2. 依序使用矩型選取工具框選影像並拷貝,至ILLUSTRATOR貼上,點取影像執行『視窗 > 影像描圖』,開啟
Thumbnail
由不同場景的圖,藉由去背景處理與局部變形,重新處理組合成一完整的合成場景。 Step1. 開啟範例練習檔,分別為三個不同場景的影像,要合成為同一個場景圖。 Step2. 首先在第一張場景圖之中,使用魔術橡皮擦工具,設定容許度:30、勾選「連續的」,在天空背景處按下滑鼠,清除天空背景。 Step
Thumbnail
由不同場景的圖,藉由去背景處理與局部變形,重新處理組合成一完整的合成場景。 Step1. 開啟範例練習檔,分別為三個不同場景的影像,要合成為同一個場景圖。 Step2. 首先在第一張場景圖之中,使用魔術橡皮擦工具,設定容許度:30、勾選「連續的」,在天空背景處按下滑鼠,清除天空背景。 Step
Thumbnail
在影像合成上使用遮色片編輯,除了他的隨時可編輯性之外,建立的遮色片還能夠使用濾鏡來更改遮色片的邊緣效果,其中遮色片加上高斯模糊,讓遮色片邊緣模糊而成為可即時控制的邊緣羽化效果,是影像合成中很重要的技法。 Step1. 開啟範例練習檔,檔案中的圖層1影像內容,目的可以與背景影像搭配,而圖層1上的影像
Thumbnail
在影像合成上使用遮色片編輯,除了他的隨時可編輯性之外,建立的遮色片還能夠使用濾鏡來更改遮色片的邊緣效果,其中遮色片加上高斯模糊,讓遮色片邊緣模糊而成為可即時控制的邊緣羽化效果,是影像合成中很重要的技法。 Step1. 開啟範例練習檔,檔案中的圖層1影像內容,目的可以與背景影像搭配,而圖層1上的影像
Thumbnail
藉由不同影像素材間的影像去背,重新組合處理與編輯,完成由各自獨立影像合成的效果。 Step1. 開啟範例練習檔,分別為三個不同場景的影像,要合成為同一個場景圖。 Step2. 使用筆形工具建立影像輪廓路徑,按下『載入路徑作為選取範圍』按鈕,將路徑轉換選取範圍,執行「編輯」→「拷貝」。 Step
Thumbnail
藉由不同影像素材間的影像去背,重新組合處理與編輯,完成由各自獨立影像合成的效果。 Step1. 開啟範例練習檔,分別為三個不同場景的影像,要合成為同一個場景圖。 Step2. 使用筆形工具建立影像輪廓路徑,按下『載入路徑作為選取範圍』按鈕,將路徑轉換選取範圍,執行「編輯」→「拷貝」。 Step
Thumbnail
利用色版與選取範圍,替去背影像加上周圍圓點效果。 Step1. 開啟範例練習檔,按住【Ctrl】滑鼠在影像圖層的縮圖上按一下,建立影像輪廓的選取範圍。 Step2. 執行「選取」→「修改」→「擴張」,設定擴張選取範圍10像素,在「色版」浮動視窗上,按下「儲存選取範圍為色版」按鈕,建立「Alpha
Thumbnail
利用色版與選取範圍,替去背影像加上周圍圓點效果。 Step1. 開啟範例練習檔,按住【Ctrl】滑鼠在影像圖層的縮圖上按一下,建立影像輪廓的選取範圍。 Step2. 執行「選取」→「修改」→「擴張」,設定擴張選取範圍10像素,在「色版」浮動視窗上,按下「儲存選取範圍為色版」按鈕,建立「Alpha
Thumbnail
影像中的紋理要很自然的合成到另一影像之中,可以利用由色板上找到影像細節的選取範圍,再利用選取範圍製造出特殊效果。 Step1. 開啟範例練習檔,在材質素材圖的色版浮動視窗上,一一檢視每個分色色版,檢視發現在紅色分色版上有較佳的紋理,所以請點取紅色分色版。 在紅色色版上按下滑鼠右鍵,選擇執行「複製
Thumbnail
影像中的紋理要很自然的合成到另一影像之中,可以利用由色板上找到影像細節的選取範圍,再利用選取範圍製造出特殊效果。 Step1. 開啟範例練習檔,在材質素材圖的色版浮動視窗上,一一檢視每個分色色版,檢視發現在紅色分色版上有較佳的紋理,所以請點取紅色分色版。 在紅色色版上按下滑鼠右鍵,選擇執行「複製
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News