哩老師的沙龍

Animate CC 設計漸層文字動畫素材

哩老師

2020/02/05閱讀時間約 1 分鐘

建立文字打散後的漸層編輯應用，設定製作出文字倒影與陰影素材，進而隨後表現其動畫效果。

STEP1.
在深色背景上建立白色文字並打散二次成圖像，各向上、下複製出另二份文字圖像共三份。

首先選取第二份文字，使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層)，調整漸層顏色為左：黑Alpha=50%、右：黑Alpha=0%。

再使用漸層變形工具旋轉漸層方向與調整漸層範圍成上方透明。

STEP2.
選取第三份文字，執行『修改 > 變形 > 垂直翻轉』成向下顛倒。

繼續為第三份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層)，調整漸層顏色為左：白Alpha=50%、右：白Alpha=0%，再使用漸層變形工具旋轉漸層方向成下方透明。

STEP3.
依序個別群組三組文字，上下靠齊影子與倒影，複選二物件使用變形工具同時左右傾斜二物件。

最後移入第一份文字（更改排列順序:移至最上層）排列完成即可。

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

即將進入廣告，捲動後可繼續閱讀

為什麼會看到廣告

#動畫素材準備

哩老師的沙龍Animate CC 網頁動畫與JS互動動畫基礎哩老師的沙龍Animate CC 網頁動畫與JS互動動畫素材準備

哩老師的沙龍

29會員

161內容數

藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!

留言0

查看全部

發表第一個留言支持創作者！

哩老師的沙龍的其他內容

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

使用橢圓、矩型、鋼筆工具建立物件基本造型，搭配物件重疊合併的編輯，以及漸層填色技巧，完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色，選擇填色為黑白放射狀漸層，繪製正圓形無邊框黑白漸層，再使用漸層變形工具調整漸層中心至圓內左上角，放大漸層範圍

#動畫基礎 #動畫素材準備

Animate CC繪製水中世界動畫素材

使用鉛筆、鋼筆工具繪製線稿後，藉由完善的修整筆畫功能整理好所有需要的線稿，最後使用油漆桶、墨水瓶填色，搭配物件管理與編輯，完成漸層背景、石頭、水中魚與海草。 STEP1. 使用鋼筆工具與直接選取工具繪製調整出基本構成筆畫，使用『轉換錨點工具』轉換轉折角成平滑曲線，再使用鉛筆工具繪製其他黑線稿（選擇

#動畫基礎 #動畫素材準備

Animate CC 變形浮動視窗與重複變形

在變形操作時若需要固定變形數值，就需要在變形浮動視窗上才能輸入固定變形數值，且可以搭配『重製選取範圍並變形』按鈕，進行多次的重複變形。 1.重複縮放繪製矩形框(一般矩形工具繪製請群組)，選取並至【變形】控制板上(視窗>變形)按下限制鎖定按鈕(等寬高)，再輸入欲放大的寬度值，並直接按下變形控制版右下

Animate CC繪圖與物件重疊編輯

無群組或是非基本矩形、非基本橢圓等繪圖物件，在物件重疊時隨即自動進行圖案間編輯處理，包括填色與外框筆畫間均會互相作用。 1.填色圖案之間相加當繪製彼此重疊且無筆畫的填色相同形狀時，重疊的形狀將自動合併在一起。 2. 填色圖案之間上減下當您繪製彼此重疊無筆畫的不同填色形狀時，最上層的形狀會截掉一

Animate CC 繪圖物件選取

選取工具最主要是提供選取物件的方式，包括『選取工具』、『選取細部工具』、『套索工具』，均主要針對尚未群組或非基本工具所繪製圖案進行細部編輯，並有完整的局部編輯功能。若是基本矩形、基本橢圓、群組物件則均需打散才可進行局部編輯。 1. 選取工具-選取填色 (1)使用選取工具直接點取填色內容即可選取到填色

Animate CC 繪製線段與形狀

1.繪製線段若要一次繪製一條直線線段，請使用「線段」工具，接著請設定呈現線段顏色的筆畫顏色，在場景上直接按下滑鼠左鍵拖曳後放開，即可完成線段繪製。 ★操作技巧： (1)在拖曳繪製線段的同時（未放開滑鼠前），若按住【Shift】鍵，即可繪製出水平、垂直或45 度角的直線線段。 (2)使用選取工具選

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

使用橢圓、矩型、鋼筆工具建立物件基本造型，搭配物件重疊合併的編輯，以及漸層填色技巧，完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色，選擇填色為黑白放射狀漸層，繪製正圓形無邊框黑白漸層，再使用漸層變形工具調整漸層中心至圓內左上角，放大漸層範圍

#動畫基礎 #動畫素材準備

Animate CC繪製水中世界動畫素材

使用鉛筆、鋼筆工具繪製線稿後，藉由完善的修整筆畫功能整理好所有需要的線稿，最後使用油漆桶、墨水瓶填色，搭配物件管理與編輯，完成漸層背景、石頭、水中魚與海草。 STEP1. 使用鋼筆工具與直接選取工具繪製調整出基本構成筆畫，使用『轉換錨點工具』轉換轉折角成平滑曲線，再使用鉛筆工具繪製其他黑線稿（選擇

#動畫基礎 #動畫素材準備

Animate CC 變形浮動視窗與重複變形

在變形操作時若需要固定變形數值，就需要在變形浮動視窗上才能輸入固定變形數值，且可以搭配『重製選取範圍並變形』按鈕，進行多次的重複變形。 1.重複縮放繪製矩形框(一般矩形工具繪製請群組)，選取並至【變形】控制板上(視窗>變形)按下限制鎖定按鈕(等寬高)，再輸入欲放大的寬度值，並直接按下變形控制版右下

Animate CC繪圖與物件重疊編輯

無群組或是非基本矩形、非基本橢圓等繪圖物件，在物件重疊時隨即自動進行圖案間編輯處理，包括填色與外框筆畫間均會互相作用。 1.填色圖案之間相加當繪製彼此重疊且無筆畫的填色相同形狀時，重疊的形狀將自動合併在一起。 2. 填色圖案之間上減下當您繪製彼此重疊無筆畫的不同填色形狀時，最上層的形狀會截掉一

Animate CC 繪圖物件選取

選取工具最主要是提供選取物件的方式，包括『選取工具』、『選取細部工具』、『套索工具』，均主要針對尚未群組或非基本工具所繪製圖案進行細部編輯，並有完整的局部編輯功能。若是基本矩形、基本橢圓、群組物件則均需打散才可進行局部編輯。 1. 選取工具-選取填色 (1)使用選取工具直接點取填色內容即可選取到填色

Animate CC 繪製線段與形狀

1.繪製線段若要一次繪製一條直線線段，請使用「線段」工具，接著請設定呈現線段顏色的筆畫顏色，在場景上直接按下滑鼠左鍵拖曳後放開，即可完成線段繪製。 ★操作技巧： (1)在拖曳繪製線段的同時（未放開滑鼠前），若按住【Shift】鍵，即可繪製出水平、垂直或45 度角的直線線段。 (2)使用選取工具選

你可能也想看

Google News 追蹤

方格子 vocus 官方沙龍

「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！

這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～

#天天秋嗨嗨 #秋季旅遊 #秋季穿搭

MimiVsJames的美股投資分享

11/20 NVDA財報前Preview, 財報前股價波動走勢觀察

11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從

#美股 #美股投資 #投資理財

維持皮膚健康與活力｜6款超人氣保濕、舒緩敏感化妝水評比

Hi 大家好，我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。曾經，我的保養程序簡單到只包括清潔和隨意上乳液

#保養 #產品 #分享

lizEtude的沙龍

Animate 06

又到了一個月結束，暑假沒有想像中的用功，這一次畫的是引導線和元件腳色的圖層

#引導線 #圖層檢視 #Animate

lizEtude的沙龍

Animate 05

資源彎曲工具，終於要來做一隻會動的貓咪。

#資源彎曲工具 #Animate

lizEtude的沙龍

Animate 04

練習之路~~

#動畫 #animate #adobe

lizEtude的沙龍

Animate 03

電腦有點反應遲鈍，而且雲朵如果要加上模糊的濾鏡，就一定要重開軟體才看的到效果。

#圖片元件 #影片元件 #animate

lizEtude的沙龍

Animate 02

看了一些動畫學習者的心路過程，有些有文字的習慣，就是把自己的發想寫成部落格，或是寫一些學習的體驗。

#animate #學習 #部落格

瓶裝雪的沙龍

Unity Component | Animator Play and Transition

這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。

#Unity #unity #UnityAnimation

瓶裝雪的沙龍

Unity Animation | 3D Character and Animation

這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。

#Unity #UnityAnimation #Character

瓶裝雪的沙龍

Unity Animation | 高階程式參數控制

這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。

#Unity #unity #Animator

瓶裝雪的沙龍

Unity Animation | 簡易程式控制

這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。

#unity #Unity #Animation

方格子 vocus 官方沙龍

「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！

這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～

#天天秋嗨嗨 #秋季旅遊 #秋季穿搭

MimiVsJames的美股投資分享

11/20 NVDA財報前Preview, 財報前股價波動走勢觀察

11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從

#美股 #美股投資 #投資理財

維持皮膚健康與活力｜6款超人氣保濕、舒緩敏感化妝水評比

Hi 大家好，我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。曾經，我的保養程序簡單到只包括清潔和隨意上乳液

#保養 #產品 #分享

lizEtude的沙龍

Animate 06

又到了一個月結束，暑假沒有想像中的用功，這一次畫的是引導線和元件腳色的圖層

#引導線 #圖層檢視 #Animate

lizEtude的沙龍

Animate 05

資源彎曲工具，終於要來做一隻會動的貓咪。

#資源彎曲工具 #Animate

lizEtude的沙龍

Animate 04

練習之路~~

#動畫 #animate #adobe

lizEtude的沙龍

Animate 03

電腦有點反應遲鈍，而且雲朵如果要加上模糊的濾鏡，就一定要重開軟體才看的到效果。

#圖片元件 #影片元件 #animate

lizEtude的沙龍

Animate 02

看了一些動畫學習者的心路過程，有些有文字的習慣，就是把自己的發想寫成部落格，或是寫一些學習的體驗。

#animate #學習 #部落格

瓶裝雪的沙龍

Unity Component | Animator Play and Transition

這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。

#Unity #unity #UnityAnimation

瓶裝雪的沙龍

Unity Animation | 3D Character and Animation

這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。

#Unity #UnityAnimation #Character

瓶裝雪的沙龍

Unity Animation | 高階程式參數控制

這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。

#Unity #unity #Animator

瓶裝雪的沙龍

Unity Animation | 簡易程式控制

這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。

#unity #Unity #Animation