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

更新 發佈閱讀 3 分鐘

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

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

留言
avatar-img
哩老師的沙龍
30會員
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
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
Thumbnail
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
STEP1. 繪製35x340與35x210px矩型,對齊置中二物件。選取外側大長方形執行『效果 > 風格化 >圓角』設定圓角半徑:15px。 STEP2. 分別填入適當的漸層顏色完成魔術棒並組成群組,移動略微旋轉魔術棒角度,使用漸層工具調整背景漸層的中央位置。 STEP3. 繪製一圓形並填入
Thumbnail
STEP1. 繪製35x340與35x210px矩型,對齊置中二物件。選取外側大長方形執行『效果 > 風格化 >圓角』設定圓角半徑:15px。 STEP2. 分別填入適當的漸層顏色完成魔術棒並組成群組,移動略微旋轉魔術棒角度,使用漸層工具調整背景漸層的中央位置。 STEP3. 繪製一圓形並填入
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
Step1. 開啟範例練習檔,圖層資料夾Set1為使用矩型工具與線段工具繪製之紙張紋路,為練習方便在路徑控制版中已包含本範例所需的物件形狀路徑,均由繪圖工具組繪製,也可自行繪製。 設定前景色為#FEBD63,新增圖層1,使用矩型繪圖工具、繪圖方式選擇填滿像素,繪製5*5像素之小正方形於左下角,並
Thumbnail
Step1. 開啟範例練習檔,圖層資料夾Set1為使用矩型工具與線段工具繪製之紙張紋路,為練習方便在路徑控制版中已包含本範例所需的物件形狀路徑,均由繪圖工具組繪製,也可自行繪製。 設定前景色為#FEBD63,新增圖層1,使用矩型繪圖工具、繪圖方式選擇填滿像素,繪製5*5像素之小正方形於左下角,並
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
STEP1. 首先依序建立要成為貼圖的四個符號,點取要製作立體球的白色半圓,執行『物件 > 3D > 迴轉』,設定角度依序為-20 、-25、-10,按下『較多選項』設定光源,新增第二個光並加大環境光:90%、反白大小:100%、漸變階數:256,按下確定完成3D球。 STEP2. 複製球成二
Thumbnail
STEP1. 首先依序建立要成為貼圖的四個符號,點取要製作立體球的白色半圓,執行『物件 > 3D > 迴轉』,設定角度依序為-20 、-25、-10,按下『較多選項』設定光源,新增第二個光並加大環境光:90%、反白大小:100%、漸變階數:256,按下確定完成3D球。 STEP2. 複製球成二
Thumbnail
Step1. 開啟範例練習檔,若無法見到參考線請執行 [ 檢視 > 顯示 > 參考線 ] 顯示參考線。使用矩型選取工具,依參考線建立矩型選取區。執行 [ 編輯 > 定義圖樣 ]將選取區內的內容定義為圖樣。 Step2. 開啟欲製作拼圖的圖檔,切換到色版控制版新增Alpha 1,使用油漆桶工具,選
Thumbnail
Step1. 開啟範例練習檔,若無法見到參考線請執行 [ 檢視 > 顯示 > 參考線 ] 顯示參考線。使用矩型選取工具,依參考線建立矩型選取區。執行 [ 編輯 > 定義圖樣 ]將選取區內的內容定義為圖樣。 Step2. 開啟欲製作拼圖的圖檔,切換到色版控制版新增Alpha 1,使用油漆桶工具,選
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News