哈囉!
我將向您展示如何製作一個簡單的動畫,而無需過度剪切或切割您的繪圖。我將動畫化大部分環境,這將營造動畫的氛圍,同時不讓動畫過程本身過於繁重。
最終圖像將會是這樣:
我將展示如何動畫化燈光、陰影和高光。
我還將展示一個簡單的眼睛動畫和一些攝影機動畫。
我們將使用 關鍵影格,我會向您展示一些使用它們的技巧和竅門!
這些動畫非常容易製作,並且適用於 Clip Studio Paint 的 PRO 和 EX 版本。
本教程我將使用 CLIP STUDIO PAINT PRO,如果您有 EX 版本也可以使用。
這將是一個詳細的工作流程,對於長度我提前致歉。
讓我們開始吧!
準備工作
首先,拿起您要動畫化的繪圖。
現在,想像或草擬您想要做的事情,在這個案例中;
⭐ 我希望蘑菇發光,也許會釋放一些魔法孢子。
⭐ 我希望立體音響發光。
⭐ 而且我希望他眨眼。
非常簡單的動畫!但您必須記住,光線會產生陰影。
因此我們還需要添加:
⭐ 陰影動畫
⭐ 以及可能的高光動畫
讓我們開始動畫化吧!
時間軸
打開您想要動畫化的繪圖。
然後我們前往「時間軸」,如果您找不到您的時間軸,它在 視窗 > 時間軸
現在點擊 [新建時間軸]
我使用的設定是每秒 8 影格和 24 播放時間
影格率 是每秒會有多少張圖像,而 播放時間 則決定了您想要的動畫長度。
您可以計算 [播放時間\/影格率 = 秒數],所以 24 播放時間 \/ 8 影格率 等於 3 秒。
影格率越高,動畫就越流暢。
提醒:Clip Studio Paint PRO 的最大播放時間為 24 個,超過此數將無法實現。如果您想要更長的播放時間,我建議您使用 EX 版本。
讓我們開始動畫化吧!
>> 關鍵影格動畫
我將主要使用關鍵影格動畫來完成此操作。
快速說明什麼是關鍵影格動畫:
現代或數位關鍵影格是指我們創建一個起始點和終點,而無需製作任何中間影格。
如果您從左邊開始一個關鍵影格,然後再製作一個向右邊的關鍵影格——您不需要製作任何中間影格。它會自動為您完成。
關鍵影格之間距離越遠,動畫將越慢。
關鍵影格之間距離越近,動畫將越快。
光線動畫 – 平滑補間
在您的繪圖上方建立一個 [新點陣圖層] > 將其重新命名為「發光蘑菇」。
現在取得您的 [漸層] 工具 > [前景到透明] > 按住鍵盤上的 [ALT] 鍵以使用吸管工具,並取得您想要的「光」的顏色。
或者取得任何您想要用作「光」的工具。
可以是普通的軟筆刷,也可以是裝飾筆刷。
然後點擊並拖曳您的漸層工具。
您可以使用任何您想要的漸層 形狀,我選擇 [圓形]
將您的混合模式更改為發光減淡
提示:顏色減淡、加法、加法(發光)、覆蓋、柔光和強光也適用。
現在在您的時間軸區域,請確保您在「發光蘑菇」圖層上,點擊 [啟用此圖層上的關鍵影格]
提示:當您無法在圖層上繪畫或擦除任何東西時,您就知道該圖層已準備好進行關鍵影格操作。此外,圖層名稱旁邊會出現「變形」。
⭐ 點擊 + 展開,然後點擊\/選擇 [不透明度]
同時檢查您的 關鍵影格補間,確保您選擇的是 平滑補間
現在,在您的時間軸最開始處,影格 1 > 右鍵點擊 > [新增關鍵影格]
⭐這將設定我們時間軸的最開始,發光蘑菇的不透明度為 100%
然後我們移到可能在 影格 7,您也可以透過 移動圖層標籤上的不透明度滑桿來新增一個不透明度關鍵影格
繼續添加您想要的關鍵影格動畫,這是我最終的成果
影格 1、13 和 24 的 不透明度為 100%
影格 7 和 18 的 不透明度為 23%
提示:您可以將最後一個關鍵影格拖曳到最末端,使動畫無縫播放。
我將在「關鍵影格循環」中進一步解釋。
現在我們的圖片看起來像這樣:
>> 關鍵影格循環
通常製作循環動畫的訣竅是 確保您的第一個動作與最後一個動作相同。
在這個案例中,我們正在使用關鍵影格,所以我們需要 確保我們的第一個和最後一個關鍵影格是相同的。
我會多次提到「將您的結束關鍵影格拖曳到時間軸的末端」,這是為了 幫助您創建一個無縫或循環動畫。
請看時間軸中的第一個關鍵影格,它位於 0 和 1 之間。
如果我們想要製作一個循環,最好也對最後一個關鍵影格進行相同的操作。
這是您沒有將最後一個關鍵影格拖曳到時間軸最末端時的差異。
它很微妙,但在結束時會停留一幀。
但是當我們將時間軸最末端的關鍵影格拖出時
它會移動得更流暢,因為它們的值是相同的
⭐ 確保影格 1 和影格 24 的關鍵影格值相同
在影格 1,我們得到第一個關鍵影格的後半部分
然後在影格 24,我們得到相同關鍵影格的前半部分
當動畫循環播放時,動畫看起來將會是無縫的
如果您很難抓取您拖曳到最末端的關鍵影格,請使用 圖形編輯器 並選擇該關鍵影格。
您可以將它拖曳到您想要的位置,也可以刪除它。
> 編輯:新增更多效果
總結:這是我們最終的成果:
那其他的蘑菇呢?
您應該也為它們建立新圖層並再次動畫化嗎?
不!我們仍然可以編輯這個「發光蘑菇」圖層!
但是如果您隨意點擊,它就不會讓您這樣做。
🚫 您無法編輯此圖層,因為它目前用於關鍵影格。
如果您想在此圖層上繪圖,則必須停用 [啟用此圖層上的關鍵影格]。
點擊圖示以停用它。
別擔心!
我們只是停用了關鍵影格,一旦我們再次啟用它,關鍵影格將再次出現。
請記住不要刪除圖層!
並且不要將其合併到任何其他圖層中 - 如果您將其與其他圖層合併,關鍵影格將會消失
取得您的 [漸層] 工具或任何您想要添加更多發光效果的工具
完成後,返回到 時間軸標籤 > 點擊 [啟用此圖層上的關鍵影格]
您的關鍵影格仍然存在!
它現在看起來像這樣:
在我們繼續動畫化其餘部分之前,讓我們先快速討論一下關鍵影格補間。
>> 關鍵影格補間
關鍵影格補間決定了您的關鍵影格或動畫如何移動。
這就像賽璐珞動畫中的補間。
本教程我將使用兩種關鍵影格補間:平滑和保持。
以下是所有補間的差異:
⭐平滑 - 產生平滑的移動,它基本上以曲線移動 — 所以看起來有流暢感,這使得它移動得相當快,但仍然 平滑。
⭐線性 - 產生直接的移動。它沒有流暢感,並以相同的速度移動。這就像線性移動 - 直截了當。
⭐保持 - 它逐關鍵影格移動。它會保持該關鍵影格直到下一個關鍵影格,然後再下一個。
此外,您的關鍵影格會根據您使用的補間類型而改變顏色
平滑是 紫色,線性是 綠色,保持是 黃色
光線動畫 – 保持補間
這次我們使用「保持」補間來處理立體音響的燈光動畫。
建立一個 [新點陣圖層] > 隨您喜好重新命名。
*我將其命名為「喇叭」——我搞錯了!這是一個手提音響 \/ 立體音響。
拿出您的筆刷,我使用了 [軟筆刷],並在我想發光的區域周圍塗上顏色。
將您圖層的 混合模式更改為「加法(發光)」
提示:您也可以使用「加法」、「發光減淡」和「顏色減淡」。
現在點擊 [啟用此圖層上的關鍵影格],這樣我們就可以動畫化立體音響的燈光了。
請將 關鍵影格補間 從平滑更改為保持。
現在我們將在 影格 1 上添加一個關鍵影格,請確保您在 不透明度 上。
這很微妙,但當您點擊變形菜單時,會出現 顏色變化
在影格 1 放置一個 關鍵影格;不透明度 100%
然後在影格 14,將 不透明度更改為 0%
影格 15 的 不透明度為 100%
影格 16 的 不透明度為 0%
隨您喜好重複多次
當您播放時,它看起來像這樣
保持補間會保持該關鍵影格的值直到下一個關鍵影格
不像平滑補間會 平滑地 更改關鍵影格的值直到下一個關鍵影格
> 編輯:色調校正
假設您不喜歡這個顏色 — 通常我們只會去 編輯 > 色調校正 > 色相\/飽和度\/亮度,但是在這個 關鍵影格圖層上,我們無法繪圖或進行色調校正。
如果我們想在這個圖層上進行色調校正,我們必須停用 [啟用此圖層上的關鍵影格]
然後我們可以使用 編輯 > 色調校正 > 色相\/飽和度\/亮度 來編輯顏色
當您點擊 [啟用此圖層上的關鍵影格] 時,關鍵影格仍然存在。
現在它看起來像這樣:
動畫化陰影
讓我們來動畫化一些陰影吧!
這是角色身後的陰影,隨著他面前的光線發光,他的陰影會根據他面前光線的大小而變大或變小。
在您的發光圖層下建立一個 [新點陣圖層]
將其重新命名為「陰影」> 將該圖層設定為 正片疊底
為了這個例子,我將其設為紅色,這樣它看起來可見,但我之後將其更改為灰色。
再次強調,確保您的 圖層 處於 正片疊底混合模式。
接下來,讓我們使用遮罩。點擊 [建立圖層遮罩]。
這將隱藏我們不希望顯示的區域,而無需完全刪除它。
然後只需使用您的 [橡皮擦] 來隱藏您不希望角色受影響的區域。
如果您看不到正在擦除的內容,請 右鍵點擊(遮罩圖層圖示)> 顯示遮罩區域
繼續擦除,我得到了這個結果:
我遮罩了整個角色以確保萬無一失。
要移除「顯示遮罩區域」;右鍵點擊(遮罩圖層圖示)> 顯示遮罩區域
這將停用它。
現在讓我們開始動畫化
確保您在 陰影圖層 上,在 時間軸標籤 > 點擊 [啟用此圖層上的關鍵影格]
確保將您的關鍵影格補間更改回 平滑
現在展開 陰影圖層,點擊 > 圖示
確保您在 位置 上
前往 [操作工具] 或按下鍵盤上的 O 鍵
變形點應該會出現在您的螢幕上
在 影格 1,當光線很大時
點擊並將圖像稍微向遠離角色的方向拖曳 - 對角線地
複製 該關鍵影格並在光線較大時 貼上;影格 13 和影格 24
然後當光線變小時;影格 7,將陰影向下拖曳 – 對角線方向。
複製並將該關鍵影格貼上到光線較小的另一個影格;影格 19
完成後。它看起來會像這樣:
> 編輯:重新製作遮罩
仔細看陰影 — 您可以看到它與後面的石頭和角色的下巴重疊了
與上次的光線動畫編輯相同,在選取陰影圖層的情況下,停用 [啟用此圖層上的關鍵影格]
然後我們可以重新製作我們的遮罩
我還想進行的另一個編輯是使陰影平滑。
右鍵點擊遮罩 > [啟用遮罩] (或取消選取)
然後 [Alt] 點擊圖層的 眼睛圖示 以暫時隔離它
我只是使用我的模糊筆刷來平滑陰影
然後再次 [Alt] 點擊 陰影圖層的 眼睛圖示,陰影圖層就不再隔離了。
右鍵點擊遮罩 > 點擊 [啟用遮罩]
然後我們點擊 [啟用此圖層上的關鍵影格],我們的關鍵影格仍然存在,當我們播放時...
效果:飛舞和淡出的閃光
我們將在這裡使用多種變形:位置和不透明度
接下來,讓我們製作一些閃光!
建立一個 [新點陣圖層] > 將其命名為「閃光」> 將混合模式設定為 加法(發光)
現在拿出您的閃光筆刷
我使用了這個筆刷:
然後添加一些閃光
接下來,讓我們來動畫化它。
點擊 [啟用此圖層上的關鍵影格]
確保您在 平滑補間
在 影格 1 – 光線較大,在 不透明度 – 100% 不透明度 上新增一個關鍵影格。
在 影格 13 和 24,光線較大時,也做同樣的操作。
然後當光線變小時,影格 7 – 在 不透明度 – 0% 不透明度 上新增一個關鍵影格。
在 影格 19,光線較小時,也做同樣的操作。
它應該會像這樣:
接下來,讓我們處理移動,讓閃光向上移動
點擊 > 圖示展開 閃光圖層
確保您在 位置 上
在 影格 1,光線較大,向上拖曳閃光
稍微拖曳一下,想像它就像是浮動動畫的中間點 確保您在 [操作工具] 上,才能拖曳閃光圖層
將相同的關鍵影格添加到最後一幀,影格 24 – 但這次,務必將最後一個關鍵影格拖曳到時間軸的末端,如果您想創建循環,這將使動畫更加流暢和無縫
現在當光線較暗時,影格 7 – 向上拖曳您的閃光
請記住,這也是不透明度為 0% 的影格 – 基本上我們正在創建一個動畫,它在向上移動時會消失
影格 8,閃光向下移動。
複製影格 7 和影格 8 的關鍵影格,然後 貼上 到 影格 17 和 影格 18
這個過程和結果看起來像這樣:
基本上我們所做的是 關鍵影格 1 和 24 是 動作的中間點
關鍵影格 7 和 17 是 閃光向上移動
關鍵影格 8 和 18 是 閃光回到起始位置
現在動畫看起來像這樣:
> 編輯:新增更多閃光
這與 [編輯:新增更多效果] 相同。
請確保您在 閃光圖層 上,並停用 [啟用此圖層上的關鍵影格]
然後只需添加您的閃光
完成後,只需點擊 [啟用此圖層上的關鍵影格],關鍵影格仍然存在。
現在我們的動畫看起來像這樣:
請記住,您仍然可以回去修改您的關鍵影格。
範例:您想要編輯閃光,因為它們移動得太快、太高了。
確保選取了「位置」,並且您正在您想要編輯的關鍵影格上 -- 隨您喜好拖曳您的閃光
> 編輯:遮罩部分閃光
這與 [編輯:重新製作遮罩] 相同。
注意一些閃光如何從蘑菇處過低,有些則進入了角色。
與其刪除這些閃光,不如我們遮罩它們,使它們不顯示在該區域。
再次停用您的關鍵影格,點擊 [啟用此圖層上的關鍵影格],這樣我們就可以停用它並處理我們的遮罩。
點擊 [建立圖層遮罩],建立後 > 右鍵點擊該遮罩 > 顯示遮罩區域
[顯示遮罩區域] - 這樣您就可以看到您正在擦除的內容
然後我們可以隱藏該區域的閃光,拿起您的橡皮擦 並開始擦除\/隱藏您不希望有閃光的部分。
完成後,停用 [顯示遮罩區域] 並再次啟用 [啟用此圖層上的關鍵影格]
關鍵影格仍然存在,遮罩也在那裡
高光動畫
這是角色上的高光,也許還有背景元素上的一些硬光。
建立一個 [新點陣圖層] > 將其重新命名為「高光」> 將 混合模式設定為 [發光減淡]
提示:您可以使用顏色減淡、加法,甚至是加法(發光)
然後拿出您的筆刷,建立一些高光。
我使用 [軟筆刷],不透明度為 80-100%,來回切換。
⭐ 提示:如果您想為角色製作高光的快捷方式 — 記得我們為陰影動畫製作的那個遮罩嗎?我們可以利用它。
按住 [CTRL] 然後 點擊該遮罩 — 結果是我們選擇了白色區域,所以讓我們反轉它來選擇角色。
點擊 [反轉選取區域] > 然後開始添加您的高光
要為環境或岩石添加高光,我使用了套索工具。
使用您的 套索工具 製作選取範圍 > 然後使用您的筆刷上色
— 如果需要,可以使用模糊筆刷柔化邊緣
完成高光後,讓我們來動畫化它
點擊 [啟用此圖層上的關鍵影格]
確保您在 不透明度 – 使動畫與發光蘑菇相同
影格 1、13、24 – 100% 不透明度
影格 7 和 19 – 27% 不透明度(或更低)
完成後,動畫現在看起來像這樣:
眼睛動畫
對於這個眼睛動畫,我只會使用兩張圖像\/影格;
⭐ 眼睛張開
⭐ 眼睛閉合
主要是因為這是一個 3 秒的動畫,非常短且不明顯,而且我的角色眼睛很小。
首先,我需要分離我的眼睛並重繪缺失的區域。
我使用 套索工具 將 眼睛複製並貼上到另一個圖層。
然後 回到主要插畫圖層,使用您的筆刷 開始用角色的膚色在眼睛上繪畫
然後建立一個 [新點陣圖層] 並 繪製閉上的眼睛
現在我們有了 眼睛張開 和 眼睛閉合
如果您喜歡,可以隨意添加更多中間動作\/影格。
您可以使用 關鍵影格 來動畫化,甚至可以使用 動畫賽璐珞片。
讓我們兩者都試試看!
> 眼睛動畫 – 動畫賽璐珞片 [複製與貼上]
動畫賽璐珞片是逐影格繪製 以創建動畫。
就像 翻頁動畫!
我們將複製並貼上到賽璐珞片
建立一個 [新動畫資料夾] > 將其重新命名為 EYES_ANIM_CEL
確保您位於 時間軸的開頭,然後點擊 [新建動畫賽璐珞片]
一個標記為 1 的空圖層將會出現
在我們開始複製和貼上之前,請前往 [檔案] > [偏好設定] > [動畫]
更改您的 如何貼上到賽璐珞片 — 確保它位於 貼上到選定圖層
完成後點擊「確定」!
這將使我們的複製和貼上更加容易
複製 - 將您的「眼睛張開」圖層設為可見 > 取得您的套索工具並選取 > 按 CTRL C 複製
貼上 - 前往您的動畫資料夾 > 賽璐珞片 1 > 將其貼上到那裡
對下一個賽璐珞片也執行相同的操作;眼睛閉合
(請確保您位於動畫資料夾中)
選取您的影格 > 建立一個 [新建動畫賽璐珞片] > 一個標記為 2 的新 賽璐珞片 將會出現
複製 - 眼睛閉合
貼上 - 到賽璐珞片 2
我希望他繼續眨眼,所以讓我們將相同的動畫放在下一個影格上。
讓我們為下一個動畫分配這些賽璐珞片
請確保您位於沒有賽璐珞片的下一個影格
前往 [動畫] > [編輯軌道] > [分配多個賽璐珞片]
對於這個例子,這些設定是沒問題的
如果您想知道這些設定的含義,我建議您查看下面的連結
當您點擊確定後;賽璐珞片 1 和 2 的副本將會出現
我們基本上將賽璐珞片 1 和 2 指定給下一個影格顯示
對於動畫的結尾,我希望他的 眼睛睜開,所以點擊 [將賽璐珞片分配給影格]
選擇圖層 1 – 也就是我們的眼睛睜開,然後點擊 確定
我們就完成了使用賽璐珞片製作的小眼睛動畫
> 眼睛動畫 – 關鍵影格
如果您想使用關鍵影格,基本上就是調整 眼睛張開 和 眼睛閉合 圖層的 不透明度
為了保持整潔,請將您的「眼睛張開」和「眼睛閉合」圖層放入一個資料夾中
單獨選取您的 眼睛張開 和 眼睛閉合 圖層,然後點擊 [啟用此圖層上的關鍵影格]。
此外,將您的關鍵影格補間更改為保持
您可以使用任何您想要的關鍵影格補間,我只是在製作眼睛動畫時偏好「保持」,以確保影格之間不會有任何變化
選擇您想要開始眨眼的影格,我將前往 影格 15
在兩者上新增關鍵影格:
眼睛閉合 – 0% 不透明度
眼睛張開 - 100% 不透明度
下一個影格,影格 16
眼睛閉合 – 100% 不透明度
眼睛張開 – 0% 不透明度
您可以隨您想要讓角色眨眼的次數重複此操作,或者只需選取關鍵影格 > 右鍵點擊 > 複製 > 移動到下一個空影格 > 右鍵點擊 > 貼上
確保您對另一隻眼睛也執行相同的操作。
完成後,它看起來像這樣:
我們的動畫看起來像這樣:
攝影機動畫
此步驟是可選的!
我們將添加一個 2D 攝影機,這是 您的 攝影機!
您可以使用它來放大縮小、旋轉和平移您的動畫,我們將使用關鍵影格來操縱它。
要添加攝影機,請前往 [動畫] > [新建動畫圖層] > [2D 攝影機資料夾]
您的圖層標籤中將會出現一個 標記為「攝影機 1」的資料夾 > 將您的所有圖層,基本上是所有動畫圖層都放上去。
您可以展開 時間軸中的攝影機變形,或者您可以使用 操作 > 物件工具屬性
我只打算做一些簡單的,像是攝影機晃動,但不會太過極端。
在 [縮放比例] 上,我將其放大 3 個值 — 使其變為 97.0
由於您更改了值,會出現一個關鍵影格,您可以刪除該縮放關鍵影格,因為我們不會動畫化縮放。
然後點擊 [位置] > 將變形框拖曳到螢幕右下角,遠離我的角色。
一旦您移動了攝影機,就應該添加一個關鍵影格。
複製該關鍵影格,點擊 該關鍵影格並 按住 [ALT] 然後 拖曳 到您想要的影格,我將其拖曳到影格 24。
然後將該結束關鍵影格拖曳到時間軸的最末端。
對於中間的動畫,前往影格 13
確保您在 操作工具 > 物件 > 點擊變形框並將其稍微向上拖曳 — 與我們的上一個關鍵影格呈對角線。
攝影機的移動是這樣放置的,以便與陰影在相同方向上對角線上下移動的動作相輔相成
當您播放時,它看起來像這樣;
您看到的藍色方塊是攝影機的移動。
如果您想看看攝影機的視角是什麼樣子
前往您的 [操作工具] > 在 [物件] 下 > 查看工具屬性
顯示模式:
我們預設為 顯示場景導線
您可以將其更改為 顯示攝影機視野
現在我們看到了攝影機所看到的一切!
匯出動畫
我們終於要匯出作品了!
您可以將其匯出為任何您想要的格式,這個例子中我選擇 GIF
前往 [檔案] > [匯出動畫] > [動畫 GIF]
根據您的需求或時間軸內容填寫匯出設定。
對於匯出選項;抖動
抖動是顏色的漸變。
⭐ 啟用抖動,您將獲得漸變或平滑的色彩陰影
⭐ 停用抖動,您將獲得不同色調的色塊
結尾語
感謝您閱讀到這裡!!
最終動畫看起來像這樣:
攝影機是可選的,沒有攝影機看起來像這樣:
看起來仍然很棒!
這是使用相同技術的另一個範例
⭐ 動畫光線和高光
⭐ 一些閃光\/飛塵
⭐ 陰影不透明度
⭐ 眼睛眨動
⭐ 攝影機晃動
如何使用關鍵影格製作簡單的落葉動畫:
[範例,8fps 24 影格]
1. 繪製彎曲的樹葉 — 畫得像它正在墜落的過程中。
2. 點擊 [啟用此圖層上的關鍵影格]
3. 在動畫中間添加一個旋轉和位置關鍵影格 — 影格 13
——— 您添加該關鍵影格是為了讓您知道「該」場景\/位置是您動畫的中間 — 我們特意將其繪製為動作的中間。
4. 前往影格 1,旋轉並定位您的樹葉,使其看起來像是從上方飄落。
*先旋轉,然後在獲得所需的旋轉後再調整位置會更容易
5. 前往影格 24,旋轉並定位您的樹葉,使其看起來像是離開場景。
6. 如果有些樹葉從側面出現,而您不想調整關鍵影格 (因為這也會改變動畫的速度), 請使用遮罩 — 就像我們在 「動畫化陰影」 和 「效果:飛舞和淡出的閃光」 中所做的那樣。
這就是我製作樹葉的方式!
即使您沒有動畫化臉部,環境和攝影機的簡單動畫也能真正設定插畫的基調和情感。
這看起來很長,但實際上非常容易!
只需玩弄不透明度,並拖曳來拖曳去。
這是一個簡單的動畫,能為您的插畫添加更多故事和 更多感受。
光線和陰影是非常強大的元素,您應該好好利用!
希望這對您有所幫助!
也希望這對您使用和編輯關鍵影格有所幫助!
感謝您的閱讀!
留言