Animate CC繪製漸層球與光動畫素材

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

使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。

STEP1.
為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍,建立群組完成3D球。

raw-image

STEP2.
選擇填色為黑白放射狀漸層,繪製正圓形(勿繪製橢圓)無邊框黑白漸層,點取要成為影子的圓至顏色控制版上設定左側顏色為黑色、右側顏色為黑色Alpha:0%。使用變形工具壓扁成扁圓影子狀,建立群組完成影子,移至漸層球下方並更改排列順序至最下方,完成球與影子。

raw-image

STEP3.
執行『檢視 > 尺規』顯示尺規並建立二參考線做為圓形平台寬度參考,使用一般橢圓工具繪製一扁長型黑色無邊框橢圓(勿使用物件繪製模式與群組),並垂直向下複製出第二個橢圓,再於二橢圓間繪製同寬度的一般黑色無邊框長方形。向上移動下方橢圓型至與長方形銜接,注意左右下角接合,滑鼠按一下空白處完成二填色物件重疊接合。

raw-image

STEP4.
點取下方接合後物件,選擇填色為黑白線性漸層,並至顏色控制版上新增第三個顏色點,設定顏色依序為灰白灰,建立群組完成圓形平台下半部。點取上方橢圓設定填色為黑白線性漸層。

raw-image

STEP5.
使用漸層變形工具調整上方橢圓物件漸層為左上灰、右下淺灰的線性漸層,建立上方橢圓群組,向下移動組裝完成圓形平台。選取球與影子更改排列順序至最上方,並移動至平台上,將球與平台一起移動至場景右下角,再複製影子並放大後置於平台之下。

raw-image

STEP6.
使用鋼筆工具設定邊框為紅色繪製做為聚光的三角形線框,再使用油漆桶工具設定填色為黑至白線性漸層,在線框中到入漸層,使用選取工具按二下全選三角形外框並刪除外框。

raw-image

STEP7.
選取三角形黑白線性漸層物件,由顏色控制版上設定右側顏色點為白色、Alpha:0之透明,再使用漸層變形工具調整三角形內漸層成左上至右下透明,建立群組完成聚光。

raw-image

STEP8.
選取聚光群組物件使用變形工具調整尺寸,並複製出另一個聚光於右側,以及再複製平台與陰影排列場景。

raw-image

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

留言
avatar-img
留言分享你的想法!
avatar-img
哩老師的沙龍
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
哩老師的沙龍的其他內容
2020/02/05
1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型,逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫,全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫    製作方式:依序在要設定內容的時間點上插入關鍵影格,設定更改內容即可。 (2)
Thumbnail
2020/02/05
1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型,逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫,全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫    製作方式:依序在要設定內容的時間點上插入關鍵影格,設定更改內容即可。 (2)
Thumbnail
2020/02/05
要構成動畫的二大元素『時間』與『動畫內容』,在Animate中都是仰賴時間軸控制版,動畫內容即是以圖層來構成,而動畫時間的控制就得仰賴時間軸上的『影格』,來進行動畫設計製作與記錄。 1.時間軸 Adobe Animate CC 中的「時間軸」會隨著時間的經過,在圖層與影格中組織並控制文件內容。就像影
Thumbnail
2020/02/05
要構成動畫的二大元素『時間』與『動畫內容』,在Animate中都是仰賴時間軸控制版,動畫內容即是以圖層來構成,而動畫時間的控制就得仰賴時間軸上的『影格』,來進行動畫設計製作與記錄。 1.時間軸 Adobe Animate CC 中的「時間軸」會隨著時間的經過,在圖層與影格中組織並控制文件內容。就像影
Thumbnail
2020/02/05
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
Thumbnail
2020/02/05
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
STEP1. 首先依序建立要成為貼圖的四個符號,點取要製作立體球的白色半圓,執行『物件 > 3D > 迴轉』,設定角度依序為-20 、-25、-10,按下『較多選項』設定光源,新增第二個光並加大環境光:90%、反白大小:100%、漸變階數:256,按下確定完成3D球。 STEP2. 複製球成二
Thumbnail
STEP1. 首先依序建立要成為貼圖的四個符號,點取要製作立體球的白色半圓,執行『物件 > 3D > 迴轉』,設定角度依序為-20 、-25、-10,按下『較多選項』設定光源,新增第二個光並加大環境光:90%、反白大小:100%、漸變階數:256,按下確定完成3D球。 STEP2. 複製球成二
Thumbnail
STEP1. 繪製35x340與35x210px矩型,對齊置中二物件。選取外側大長方形執行『效果 > 風格化 >圓角』設定圓角半徑:15px。 STEP2. 分別填入適當的漸層顏色完成魔術棒並組成群組,移動略微旋轉魔術棒角度,使用漸層工具調整背景漸層的中央位置。 STEP3. 繪製一圓形並填入
Thumbnail
STEP1. 繪製35x340與35x210px矩型,對齊置中二物件。選取外側大長方形執行『效果 > 風格化 >圓角』設定圓角半徑:15px。 STEP2. 分別填入適當的漸層顏色完成魔術棒並組成群組,移動略微旋轉魔術棒角度,使用漸層工具調整背景漸層的中央位置。 STEP3. 繪製一圓形並填入
Thumbnail
Step1. 開啟範例練習檔,若無法見到參考線請執行 [ 檢視 > 顯示 > 參考線 ] 顯示參考線。使用矩型選取工具,依參考線建立矩型選取區。執行 [ 編輯 > 定義圖樣 ]將選取區內的內容定義為圖樣。 Step2. 開啟欲製作拼圖的圖檔,切換到色版控制版新增Alpha 1,使用油漆桶工具,選
Thumbnail
Step1. 開啟範例練習檔,若無法見到參考線請執行 [ 檢視 > 顯示 > 參考線 ] 顯示參考線。使用矩型選取工具,依參考線建立矩型選取區。執行 [ 編輯 > 定義圖樣 ]將選取區內的內容定義為圖樣。 Step2. 開啟欲製作拼圖的圖檔,切換到色版控制版新增Alpha 1,使用油漆桶工具,選
Thumbnail
Step1. 開啟範例練習檔,圖層資料夾Set1為使用矩型工具與線段工具繪製之紙張紋路,為練習方便在路徑控制版中已包含本範例所需的物件形狀路徑,均由繪圖工具組繪製,也可自行繪製。 設定前景色為#FEBD63,新增圖層1,使用矩型繪圖工具、繪圖方式選擇填滿像素,繪製5*5像素之小正方形於左下角,並
Thumbnail
Step1. 開啟範例練習檔,圖層資料夾Set1為使用矩型工具與線段工具繪製之紙張紋路,為練習方便在路徑控制版中已包含本範例所需的物件形狀路徑,均由繪圖工具組繪製,也可自行繪製。 設定前景色為#FEBD63,新增圖層1,使用矩型繪圖工具、繪圖方式選擇填滿像素,繪製5*5像素之小正方形於左下角,並
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News