將已完成的插畫製作成部分動態化的循環動畫。

 

可以透過製作過程，學習基礎的CLIP STUDIO PAINT動畫功能。

這篇講座推薦給想簡單地挑戰製作動畫的人參考。

 

 

在講座中，將使用以下的作品範例進行解說。

先決定好進行動態化可以讓插畫印象更加突出的元件，之後就能開始作業。

添加燈光和符號等效果也能成功地打造臨場感。

 

範例作品描繪的是在黑暗的房間中，放鬆地聽著音樂的女孩。

將以下元件動態化可以傳達出時間的推移：眼睛、來自窗外的光、音符、雨、百葉窗的拉繩。

 

在本講座中使用的插圖和完成的動畫檔案可於下方的網址進行下載。

請活用於確認文章裡說明的功能吧。

插圖檔案

動畫檔案

 

將插圖變成動畫的流程如下。

眨眼會使用多張圖像製作膠片動畫，來自窗外的光和百葉窗則將以數字指定主畫格，以進行動態化。

 

雖然講座使用的是平板電腦版的CLIP STUDIO PAINT，但是在電腦和智慧手機版上也能以幾乎相同的操作製作動畫。

CLIP STUDIO PAINT在不同裝置上的基礎使用方法，請參考以下頁面。

 

「學習Win／mac版的基本操作和功能」

「【平板電腦版】學習CLIP STUDIO PAINT的基本操作」

「【智慧型手機版】學習CLIP STUDIO PAINT的基本操作」

[1]整理圖層

為了讓動畫製作更加順利，要先整理插圖的圖層。

 

為元件區分會動以及不會動的部分，將它們的[圖層]面板分開。

如果插圖的線稿和上色邊界分明，分離線稿和上色會更容易作業。

若不清楚圖層是否該分開，就先大致將人物與背景分離即可。

 

範例的圖層架構如下。

為了讓製作膠片動畫的差異畫格更加順利，要將人物和背景區分為「線稿」與「上色」圖層。

 

將「來自窗外的光」圖層的不透明度設為50％，圖層模式設定為[加亮顏色(發光)]。幫主畫格設定不透明度來呈現光線的變化。

[2]眨眼

製作讓角色眼睛上下閉合眨眼的動畫。

將元件剪下

首先將插圖中臉上的眼睛剪下，和不會動的部分進行區隔。

 

在[圖層]面板上選擇「人物-線稿」圖層和「人物-上色」圖層。

想選擇多個圖層時，請勾選縮圖左側的勾選框。

從[選擇範圍]工具中選擇[選擇筆]輔助工具。

使用[選擇筆]，可以像是使用畫筆描繪般，更改筆刷的尺寸來指定選擇範圍。

 

製作能覆蓋雙眼形狀的選擇範圍。

使用[選擇橡皮擦]輔助工具擦除[選擇筆]塗抹過多的範圍。

確保線稿和上色兩方都在選擇範圍之內。

確認選擇範圍涵蓋雙眼的形狀後，按下[選擇範圍桌面啟動器]中的[剪下＋貼上]。

在[圖層]面板上，建立了從「人物-線稿」圖層和「人物-上色」圖層上剪下的眼睛形狀圖層。

圖層製作完成後，解除選擇範圍。

 

將線稿和上色圖層整合至圖層資料夾

為了將多個圖層作為一個圖像（膠片）使用於膠片動畫，需要把它們整合至1個圖層資料夾中。

 

新建圖層資料夾，保存剪下眼睛的線稿和上色的2個圖層。

將圖層資料夾命名為「a」，並將圖層名稱分別更改為「人物-線稿的複製」→「眼睛-線稿」、「人物-上色的複製」→「眼白」。

將「a」資料夾放在「人物-線稿」之前一個的位置上。

 

補畫剪下的部分

隱藏「a」資料夾後，「人物-上色」圖層上畫有眼睛的部分將被切除變為空白。

為了讓眨眼時未上色的地方不要變為空白，在「人物-上色」圖層上補畫皮膚和頭髮。

 

在選擇「人物-上色」圖層的狀態下，以[吸管]工具的[從圖層獲取顏色]輔助工具吸取描繪色，並使用筆刷補畫皮膚和頭髮。

將會動的部分和不會動的部分分開，製作眨眼動畫的準備就完成了。

 

膠片動畫的製作方法

製作膠片動畫前，需要先準備作為差異畫格使用的多張圖像（膠片）。

 

接著補畫2張圖像，將3張圖像變成眨眼的動畫。

「a」為張開眼睛、「b」為半闔眼、「c」為閉眼，將其分別指定為膠片。

在[時間軸]面板上進行膠片的操作。

 

時間軸

先從[視窗]選單中選擇[時間軸]，顯示[時間軸]

面板。

按下[新建時間軸]建立時間軸。

顯示[新建時間軸]對話方塊後，將[畫面更新率]設定為[8]，[播放時間]設定為「24」畫格。

時間軸準備完成。

在[時間軸]面板中，[圖層]面板上的各個圖層將變成軌道。

【POINT】

畫面更新率是「1秒的動畫由幾張膠片構成」的單位。

範例中1秒使用8個畫格，以共24畫格的長度設定而成，總長度為3秒。

關於畫面更新率的詳細解說請參照下方的文章。

 

動畫資料夾

接著將想製作動態的圖層保存到動畫資料夾中。

放入動畫資料夾內後，圖層在時間軸上將被視為膠片。

 

點選時間軸上的[新建動畫資料夾]按鈕，[時間軸]面板與[圖層]面板上將新建立動畫資料夾。

將[圖層]面板上的動畫資料夾名稱變更為「眨眼」，並把排列的順序放到「來自窗外的光」的下一個圖層。

將分離眼睛元件的「a」資料夾保存到「眨眼」動畫資料夾之中。

保存於動畫資料夾的「a」資料夾，會被自動視為膠片，指定於時間軸上的第「1」個畫格。

若時間軸上未指定膠片，請前往[環境設定]對話方塊的[動畫]，將[追加圖層時追加指定膠片]設為開啟。

 

Ver2.1 以下版本的膠片指定

※如果使用的是Ver2.1以下版本，則請在動畫資料夾中儲存「a」資料夾，並依照下列步驟指定膠片。

以畫格指定要顯示膠片的時間點。

 

若想在[時間軸]面板上選擇畫格，需要按下上方[畫格數]的數字。選擇中的畫格將顯示為紅色。

在[時間軸]面板上選擇❶「眨眼」軌道和❷畫格「1」，按下❸[指定膠片]按鈕。

在[選擇圖層]對話框中選擇「a」後，按下[OK]。

畫格上將登記膠片，軌道上會顯示膠片的縮圖。

 

建立新膠片

接續膠片「a」後，繼續製作膠片「b」和「c」。

 

在選擇「眨眼」軌道的狀態下選擇「1」，按兩下[新建動畫膠片]按鈕。

膠片「b」和「c」將接續在膠片「a」之後，成為畫格「2」、「3」。

若動畫資料夾內有指定的圖層資料夾，會配合圖層的構造建立新的膠片。

 

在[圖層]面板上，可以確認膠片「b」和「c」的結構與膠片「a」相同。

【POINT】

操作[時間軸]面板上的[放大/縮小]按鈕，可以更改畫格的寬度。如果選擇畫格時不方便，請進行放大來調整寬度。

 

描圖紙

接著確認[時間軸]面板上的[使描圖紙有效]選項是否已開啟。

開啟後，選擇中畫格的前後畫格膠片，在畫布上會呈現半透明的狀態。

 

選擇畫格「2」時，前一個畫格「1」指定的膠片「a」會顯示為半透明。

為了在畫布上顯示前後各兩個畫格的膠片，在此更改描圖紙的設定。

選擇[動畫]選單→[顯示動畫膠片]→[描圖紙設定]。

將[顯示張數]的[前畫格]和[後畫格]都更改為「2」。

編輯畫格「3」的膠片「c」時，描圖紙上會顯示畫格「1」的膠片「a」。

 

差異部分的作畫

一邊在描圖紙上確認「a」張開的眼睛，一邊在動畫膠片「c」的「眼睛-線稿」圖層上描畫闔上的眼睛。

 

將線稿的描繪顏色設定為黑色。

繼續將「a」和「c」之間的動作，描繪至膠片「b」上。

 

描繪眼睛配合眼球弧度半閉的模樣，在「眼睛-線稿」圖層上描畫立體的眼睛線條，在「眼白」圖層上塗上眼白。

 

眼白的描繪顏色在膠片「a」的眼白圖層之上，以[從圖層獲取顏色]輔助工具來吸取顏色。

這樣動畫所需的3張膠片就完成了。

 

調整眨眼的時機

在[時間軸]面板上調整眨眼的時機。

將「眨眼」軌道的膠片依序排成

 

畫格「1」：膠片「a」

畫格「2」：膠片「c」

畫格「3」：膠片「b」

畫格「4」：膠片「a」

 

執行[指定膠片]。

膠片的順序也可以透過移動縮圖來進行變更。

閉上眼睛時不放入半闔眼，張開眼睛時再放入半闔眼。

這樣闔眼的速度會比睜開眼睛時快，呈現出自然的眨眼效果。

 

點選[時間軸]面板的[播放/停止]，確認動作。

這樣就完成了眨眼的動畫。

 

[3]來自窗外的光

以來自光外的光的不透明度變化作為主畫格動畫。

主畫格有效化

在選擇[時間軸]面板的「來自窗外的光」的狀態下，開啟[將圖層的主畫格有效化]。

 

追加主畫格

主畫格可以使用[物件]輔助工具進行操作。

在[時間軸]面板上選擇畫格「1」，並在[工具屬性]面板上開啟[圖層不透明度]右側的選項，即可追加選擇中的主畫格。

若想在[時間軸]面板上確認不透明度的主畫格，點選軌道名稱左側的+按鈕，即可展開選項。

 

軌道上的菱形圖示代表此為主畫格。

 

設定主畫格

更改每個主畫格的不透明度數值，製作光線變化的動畫。

 

在選擇畫格「1」的狀態下，將[圖層不透明度]設定為「35」，畫格「5」設定為「15」、畫格「8」則設定為「35」。

 

複製主畫格

將它設定為會重複光線變化的動畫。

拖拽選擇[時間軸]面板中「來自窗外的光」軌道上的所有主畫格。

選擇中的主畫格上將覆蓋紅色框線。

以手指長按選擇的主畫格，選擇[複製]。

若使用PC，可以點選右鍵顯示關聯選單，或是選擇[動畫]選單→[軌道編輯]→[複製]。

長按「來自窗外的光」軌道上的畫格「9」，選擇[貼上]。

與先前相同，PC版可以選擇[動畫]選單→[軌道編輯]→[貼上]。

接著針對畫格「17」，同樣選擇[貼上]。

重複相同的動作三次，直到畫格「24」為止。

點選[時間軸]面板的[播放/停止]，確認動作。

這樣就完成來自窗外的光線動畫。

 

[4]其他背景動畫

其他的元件也能使用膠片動畫與主畫格動畫來進行動態化。

音符

為了呈現正在聽音樂的氛圍，要在人物的周圍追加音符效果。

 

新建動畫資料夾，將它移動到[圖層]面板的最上方。

把動畫資料夾命名為「音符」。

在「音符」軌道上選擇畫格「1」，按下[新建動畫膠片]按鈕。

之後會新建立的膠片，在[圖層]面板上把它的名稱變更為「a」。

音符的作畫使用了裝飾筆刷。

從CLIP STUDIO ASSETS上下載「Handdrawn note♪」筆刷。

 

選擇膠片「a」，將描繪顏色設為洋紅色，並在女孩的臉部周圍繪製音符。

接著要選擇主畫格「7」，再選取[新建動畫膠片]。

接續膠片「a」，將建立膠片「b」。

膠片「b」中也進行音符的描繪。

複製膠片，使它能在3秒之內重複2次。

 

拖拽選擇畫格「1」和「7」的膠片「a」與「b」，[複製]並[貼上]至畫格「13」。

按下播放按鈕確認音符的動態。

 

下雨

為窗外添加描繪，使它能呈現與音符膠片動畫一樣的效果。

將2張膠片放置於每4畫格之上，重複3次動作。

 

百葉窗拉繩

補畫百葉窗的拉繩，將它設定為會左右搖擺的主畫格動畫。

追加能讓其旋轉的主畫格動畫。

 

選擇[物件]輔助工具後，主畫格動畫的旋轉中心將呈現為十字。

拖拽十字，變更旋轉的中心位置。

在百葉窗的中心位置放上支點，作為旋轉的中心，在[工具屬性]面板上將[轉角]設定為主畫格。

這樣就完成了所有的動畫。

 

[5]寫出

寫出完成的動畫檔案。

 

由於GIF最多只能使用256種顏色，為了更清楚地呈現光線的明暗與漸層，這邊會將動畫寫出為影片格式檔案。

 

選擇[檔案]選單→[寫出動畫]→[影片]。

格式選擇[mp4]，這樣上傳至SNS時會更加方便。

 

將[影片寫出設定]上的畫面更新率設定為「8」。

【POINT】

配合時間軸的畫面更新率調整設定，可以讓製作中的預覽與動畫的動態一致。

 

將作品分享製SNS等上時，它會呈現為平順的循環動畫。