在本講座中，將要介紹繪製一張一張的圖來製作動畫的步驟。

接下來要使用像是繪製在紙張或膠片上般的傳統手法，製作如下的小動畫。

這個講座解說的並不是動畫本身的相關技巧，而是CLIP STUDIO PAINT的軟體功能。

 

※在下述的講座中有解說關於中割、物體的運動曲線等內容。若是想要學習動畫的相關技巧，請瀏覽以下的講座。

 

※如果想要製作其他種類的動畫，請參考這邊的文章。

分歧點：你想要做的是什麼樣的動畫呢？

 

在本講座中，會以下述流程來製作動畫。

[1]將構思化為分鏡

[2]新建畫布

[3]在膠片上繪製角色

[4]調整切換膠片的時機

[5]使用透光桌功能進行中割

[6]繪製背景

[7]配合角色的動作幫背景加上運鏡

[8]寫出影片

 

[1]將構思化為分鏡

以「我想要製作這種東西！」的構思作為基礎，製作動畫設計圖的草稿。

設定內容：畫面中的角色所佔據的大小、角色要如何動作、攝影機如何運鏡（如果有運鏡的話）……等等。

如果要利用運鏡來移動背景的話，必須按照分鏡來建立新的畫布。

因此，若在建立動畫畫布前先打好分鏡，能讓作業流程變順暢。

 

這一次要來製作由下往上移動的角色動畫，要用攝影機的運鏡來追隨背景的變化。

 

[2]新建畫布

①從[檔案]選單中選擇[新建]，在顯示的[新建]對話方塊上選擇動畫，設定下方的項目。

 

本講座計畫製作能以FullHD尺寸上傳至Youtube的動畫。

 

・[基準尺寸]：從[預設]中選擇[1920x1080(192dpi)有餘白]。

・[作畫尺寸]：為了讓高度變成2倍，以[指定倍率]將[高度]設定為「2.00」。

・[基準點]…設定[基準點]之後，就能針對[作畫畫格]設定[基準畫格]的位置。這次想要從下方開始進行攝影，為了方便辨識，將[基準點]設定在下方。

 

※上述的[基準尺寸]是適用於Youtube的設定。

在建立[新建]時，適合用來[寫出動畫]的設定會依要發布的媒體、服務而異。

先確認過想要投稿的服務推薦的規格（例如：YouTube、Twitter、Instagram等），再設定基準尺寸、播放時間應該會比較好。

 

・[畫面更新率]：「8」fps…此設定表示每1秒可以顯示8畫格的膠片。

・[播放時間]：「24」畫格數…畫面更新率為8fps，表示能夠製作3秒的動畫。

 

②設定結束後，點選[OK]。

 

這樣就會建立畫布。

在[時間軸]面板上建立「時間軸 1」，[圖層]面板上會建立收納圖層「1」的[動畫資料夾]，圖層「1」就會作為膠片被指定至「時間軸 1」的所有畫格上。

 

在[圖層]面板上，收納在[動畫資料夾]內的圖層，可以作為[動畫膠片]指定至[時間軸]面板上。

 

　關於畫面更新率【EX】

在本講座中是使用CLIP STUDIO PAINT PRO版也能製作的設定，「以8fps用24畫格製作的3秒動畫」。

 

若使用沒有播放時間限制的EX版，依畫面更新率的不同，可以製作出時間更長且動作更流暢的動畫。

將[畫面更新率]設定為「30」fps，並同樣製作3秒動畫的話，[播放時間]就會變成「90」。

・以8fps用24畫格製作的3秒動畫

 

・以30fps用90畫格製作的3秒動畫

畫面更新率的數值越大，代表每1秒能顯示的圖畫張數越多，切換圖畫的時機也能設定得越詳細。

 

[3]在膠片上繪製角色

■1.在膠片「1」上繪製圖像

 

在膠片「1」上繪製角色的第一張圖。

 

【POINT】[紙張]顏色設定

在[圖層]面板上點兩下[紙張]的縮圖後，就會顯示[顏色設定]對話方塊，可以將顏色從初始設定的白色變更成自己喜歡的顏色。

因為想用較淡的顏色繪製角色，所以將紙張的顏色變更成偏暗的灰色。

 

 

 

■2.繼續建立膠片，繪製圖畫

 

為了繪製第二張圖，必須建立膠片「2」。

在[時間軸]面板上選擇想要指定的畫格，點選[新建動畫膠片]即可建立・指定膠片。

 

因為希望每2個畫格能顯示一張膠片，選擇第「3」畫格並點選[新建動畫膠片]。

 

建立膠片「2」，就能繼續畫下去。

 

在[圖層]面板上選擇被指定為膠片的圖層後，[時間軸]面板上會選擇被指定的畫格，畫布上也會顯示所選擇的膠片，它會成為編輯對象膠片。

 

在膠片「2」上畫好圖後，用相同的步驟繼續建立膠片來繪製圖畫。

 

【POINT】

使用[一併指定膠片]命令同間隔地一併指定膠片，就能有效率地建立、指定膠片。

①使用[動畫]選單→[軌道編輯]→[一併指定膠片]來指定膠片，②接著以[動畫]選單→[軌道編輯]→[建立對應的所有膠片]來一併建立膠片。

關於詳細的步驟，請瀏覽以下的文章。

 

【POINT】使用鍵盤捷徑來移動膠片很方便！

在鍵盤捷徑上設定[選擇上一膠片]、[選擇下一膠片]這兩個命令後，只要按下按鍵就可以移動至指定在前後膠片上的圖層進行描繪。

 

①從[檔案]選單中選擇[設定捷徑]。

※在mac・平板電腦版上，需在[CLIP STUDIO PAINT]選單中選擇[設定捷徑]。

※智慧型手機版則選擇[選單]按鈕→[應用程式設定]→[捷徑設定]。

 

②幫下述項目設定容易操作的按鍵。這邊如下進行了設定。

[動畫]選單→[軌道編輯]→[選擇上一膠片]： ;

[動畫]選單→[軌道編輯]→[選擇下一膠片]： :

 

③點選[OK]，結束對話方塊。這樣就鍵盤捷徑的設定就完成了。

 

　描圖紙功能

在[時間軸]面板上點選[使描圖紙有效]後，會顯示出選擇中膠片的前後膠片，可以一邊參考前後的圖畫一邊進行繪製。

▲前一張膠片會以藍色顯示，後一張膠片會以黃綠色顯示。

 

從[動畫]選單→[顯示動畫膠片]→[描圖紙設定]，可以設定描圖紙的顯示顏色和顯示張數（要顯示到後面幾張膠片為止）。

 

活用[選擇下一膠片]、[使描圖紙有效]等功能，在所有的動畫膠片上繪製圖畫吧！

 

 

 

■4.設定動畫的反復

 

在[時間軸]面板上指定膠片，一張動畫膠片就能使用在反復的動畫上。

以這次的製作範例來說，只要再一次指定想要反復的動畫膠片，就可以在動畫上反復進行相同的動作。

 

右鍵點選想要追加指定膠片的第「7」畫格，並指定已經畫有圖案的膠片「1」。

第「9」畫格、第「11」畫格也同樣指定膠片。

 

第「7」畫格以後的動畫就會重複描繪在膠片「1」～「3」的動畫。

 

 

 

■5.播放動畫進行確認

 

在所有的膠片上畫好角色圖像之後，播放動畫確認動作。

 

點選[時間軸]面板的[播放/停止]。

 

動畫會以指定的畫格數進行播放。

再點選一次[播放/停止]，就會停止播放。

 

如果有想要詳細調整流暢度的場景或不需要的膠片，會在下一個章節進行調整。

 

[4]調整切換膠片的時機

目前為止繪製的動畫使用8fps的時間軸，在每2畫格上指定膠片，因此四張圖每張都會以1/4秒的時間顯示。

在希望動作更流暢的場景上詳細地指定膠片，想要省略的場景則減少膠片數量，照這種方式進行調整的話，就能幫動畫的疏密製造出差異。

 

這邊要解說在[時間軸]面板上調整指定膠片的方法。

 

 

 

＜移動指定膠片＞

在[時間軸]面板上點選想要選擇的膠片上最初的畫格，就能選擇膠片。

拖拽選擇的膠片就能移動指定的畫格。

 

　追加、刪除膠片

＜追加膠片＞

在[時間軸]面板上選擇想要追加膠片的畫格。

點選[時間軸]面板的[新建動畫膠片]後，就會追加動畫膠片、指定膠片。

 

 

 

＜刪除膠片＞

在[時間軸]面板上點選選擇膠片。

點擊右鍵，在顯示的選單中點選[刪除]後，即可刪除指定膠片。

※[圖層]面板本身的圖層不會被刪除，僅會刪除指定到時間軸上的部分。

 

　插入、刪除畫格

如果追加、刪除膠片的話，指定在時間軸上的膠片數量會改變，但播放時間會維持原樣。

因此將發生這種狀況：在膠片「2」和「3」的之間再增加一張膠片時「2」的時間會變短；刪除膠片「4」時「3」的時間會變長。

 

想要維持已指定的動畫膠片的時機來插入、刪除膠片的話，可以使用下方的功能。

 

 

 

＜插入畫格＞

在[時間軸]面板上，右鍵點選想要插入畫格的位置，顯示選單。

點選[插入畫格]。

 

在[插入畫格]對話方塊上，輸入想要插入的畫格數並點選[OK]。

 

以右鍵點選的位置為起點，插入畫格。

插入的畫格數會接在指定膠片的後方進行延長，同時追加播放時間。

 

若還想再追加一張膠片的話，選擇已插入的畫格，並點選[新建動畫膠片]。

 

※DEBUT版・PRO版有畫格數的限制，播放時間最多為24畫格。超越上限的話會無法插入畫格。

 

 

 

＜刪除畫格＞

在[時間軸]面板上右鍵點選想要刪除的畫格，顯示選單。

點選[刪除畫格]。

 

在[刪除畫格]對話方塊上，輸入想要刪除的畫格數，點選[OK]。

 

以右鍵點選的膠片為起點，刪除畫格。

已刪除畫格的指定膠片也會跟著被刪除，播放時間會配合被刪除的畫格數變短。

 

【POINT】使用右鍵拖拽來輸入畫格數

在製作動畫所需的[時間軸]面板上，能以滑鼠方便地活用「右鍵拖拽」。

①在[時間軸]面板上右鍵拖拽想要[插入畫格]、[刪除畫格]的畫格數，就會出現選單。

 

②點選[插入畫格]或[刪除畫格]。

顯示在[插入畫格]、[刪除畫格]對話方塊中的[畫格數]項目中，會輸入右鍵拖拽所選擇的畫格數。

 

【POINT】

在後續追加、刪除膠片後，膠片名稱就不再是播放出來的順序。

使用下述方法能依照撥放的順序變更為易於辨認的膠片名稱。

 

[5]使用透光桌功能進行中割

【POINT】什麼是中割？

為了讓製作的動畫播放起來的動作更加流暢，必須要增加在1秒內顯示的圖像張數。

在已經畫好的膠片與膠片之間，追加中間的圖來連接動作的步驟稱為「中割」。

 

只要進行中割的工程，就可以讓動畫的動作更加流暢，但是必須繪製的圖畫張數會增加。

如果想要獨立製作播放時間較長的動畫，必須衡量作畫所需的成本跟動畫流暢度再開始製作。

 

這次要進行中割，讓動畫每1秒會顯示8張圖（8fps）。

只要從每1秒顯示4張圖補畫到8張圖，就可以讓動畫更加流暢。

 

 

 

使用[動畫膠片]面板的[透光桌]功能，來進行中割的作業。

 

在[動畫膠片]面板上，可以讀取膠片或其他圖像檔案來登記至透光桌，一邊參考一邊進行繪製。

[描圖紙]功能能參照的膠片僅有編輯目標前後的膠片，但是[透光桌]功能不只其他位置上的膠片，連外來的檔案也能參照。

還能在不更動實際膠片的前提下，變更登記至透光桌的圖像位置或大小顯示。

 

 

 

■1.在膠片之間建立中割用的膠片

 

①在[時間軸]面板上選擇想要追加膠片的畫格。

 

②點選[時間軸]面板上的[新建動畫膠片]。

 

膠片「1」和膠片「2」之間會建立膠片「1a」。

 

 

 

■2.將膠片登記至透光桌

 

使用透光桌功能在下面兩張膠片的中間進行中割。

※依現在的描圖紙功能，膠片「1」會以藍色顯示，膠片「2」會以黃綠色顯示。

 

①在[時間軸]面板上選擇想要中割的膠片「1a」。

 

②從[視窗]選單中選擇[動畫膠片]面板來顯示。

 

目前選擇的編輯對象膠片會顯示在面板的上方。

下方會顯示[膠片固有透光桌]。可以在透光桌上登記想要作為膠片當成作畫參考的圖像或其他膠片。

 

③在選擇膠片「1a」的狀態下，將[圖層]面板的圖層「1」（膠片「1」）拖拽到[動畫膠片]面板下方的[膠片固有透光桌]上。

※此時，在[圖層]面板點選圖層「1」之後，編輯對象的膠片就會切換為「1」。必須要先按住[圖層]面板的圖層「1」，在維持不放的狀態下「拖拽並置放」到[動畫膠片]面板的透光桌上。

 

在膠片「1a」的[膠片固有透光桌]上登記了膠片「1」。

 

④接著用同樣的方法，將圖層「2」登記到「1a」的透光桌。

 

這樣就登記了兩張圖層。登記的所有圖層都用50%的不透明度顯示。

 

 

 

■3.操作已登記至透光桌的膠片

 

選擇登記在透光桌的膠片後，選擇的工具會自動切換成[透光桌]輔助工具，並在畫布上顯示節點。

 

①選擇透光桌的膠片「1」。

 

②使用[透光桌]輔助工具來移動・旋轉，讓膠片和顯示的膠片「2」重疊。

 

③選擇[動畫]選單→[透光桌]→[將畫布移動至中央位置]。

 

④在顯示的[將畫布移動至中央位置]對話方塊上，輸入從「0」到「100」的數值來進行調整。

 

設定為「50」就可以選擇透光桌上「1」和「2」的正中間位置。

 

⑤點選[OK]。

「1a」畫布會移動到「1」和「2」的正中間位置。

 

【POINT】

選擇登記在透光桌上的膠片，並在[動畫膠片]面板右上的[顯示方法]中將設定從[彩色]變更為[混合]就能變更圖層顏色。

 

變更顏色後，還可以在[顯示方法]中選擇[變更圖層顏色]，幫各個膠片設定不一樣的圖層顏色。

 

跟描圖紙一樣，把前一個膠片變更為藍色，下一個膠片變更為黃綠色。

 

 

 

■4.繪製中割

 

①選擇編輯對象膠片後，即可在「1a」上進行描繪。

 

②像是重疊「1」「2」一樣畫在膠片「1a」上。

 

③點選[動畫膠片]面板左上的[重置透光桌上圖層位置]，登記在透光桌上的圖層位置就會被重置。

 

在膠片「1」和膠片「2」之間的膠片「1a」上完成了中割。

 

④接著用同樣的步驟，在想要追加中割的畫格上利用[新建動畫膠片]來追加膠片，並活用[動畫膠片]面板來進行中割。

 

※關於[動畫膠片]面板的詳細使用方法請參照下方的綜合導覽手冊。

 

這樣就完成所有的中割了。

到目前為止的步驟如下圖所示。

▲中割前→中割後

 

在這個步驟中，可以幫角色上色，也能添加細節。

幫時間軸上所有被指定的膠片依序上色或添加修飾。

 

想使用複數圖層來進行上色跟修飾的話，請參照下方的步驟。

 

[6]繪製背景

接下來繪製讓角色活動的空間。

 

①點選[圖層]面板上動畫資料夾左邊的三角形按鈕來關閉資料夾。

 

②點選[新點陣圖層]，建立圖層。將圖層名稱更改成容易辨認的「背景」。

 

③拖拽圖層，將它移動到角色圖層的下方。

 

④繪製背景。

 

[7]配合角色的動作幫背景加上運鏡

把「背景」收納到[2D攝影機資料夾]，就可以加上運鏡。

 

 

 

■1.建立2D攝影機資料夾

 

①選擇[動畫]選單→[動畫用新圖層]→[2D攝影機資料夾]。

 

建立2D攝影機資料夾「攝影機 1」。

 

②把「背景」圖層資料夾拖拽至「攝影機 1」資料夾中收納起來。

 

③選擇[操作]工具→[物件]輔助工具。

在選擇「攝影機 1」資料夾的狀態下，會配合基準畫格的框顯示節點。

只要操作節點，就能進行[放大・縮小]、[旋轉]、[移動]等運鏡上的變形設定。

 

 

 

■2.追加主畫格

 

①選擇[時間軸]面板的第「1」畫格。

 

②使用[物件]輔助工具來操作2D攝影機的節點，[主畫格]就會被追加至選擇的畫格上。

 

※若要在不變更運鏡的狀態下追加主畫格的話，可以選擇想要追加的畫格，並在[時間軸]面板上點選[追加主畫格]。

 

想顯示在第「1」畫格上的背景運鏡會被追加為[主畫格]。

 

接著繼續移動攝影機。

移動攝影機後，可以設定接下來要取景的部分，以及攝影機到達該位置的時機。

把角色往上移動到目標位置的時機設定為第「16」畫格。

 

③在[時間軸]面板上選擇第「16」畫格。

 

④使用[物件]輔助工具來操作攝影機的節點，移動背景的運鏡。

 

第「16」畫格上就追加了[主畫格]。

有設定[主畫格]的第「1」畫格和第「16」畫格上會顯示攝影機的框，建立連接框與框的[軌跡]。

 

選擇畫格的運鏡會以藍色的框顯示，可以確認該畫格映照在攝影機上的範圍。

這樣就加上了取景背景的運鏡。

 

【POINT】2D攝影機的顯示方法

在[物件]工具的[工具屬性]面板上，可以變更取景在2D攝影機上範圍的顯示方法。

將顯示方法從[以邊框顯示範圍]變更為[顯示範圍內的圖像]後，畫布上就會顯示渲染了2D攝影機的狀態，可以確認實際寫出動畫時的運鏡。

※[顯示範圍內的圖像]不會顯示2D攝影機的框和軌跡。

 

 

 

■3.播放運鏡

 

在初始設定的狀態下，執行[時間軸]面板的[播放/停止]會移動2D攝影機的框，呈現出顯示在基準畫格上的部分。

雖然基準畫格中會正常播放2D攝影機資料夾外的角色，但不會播放2D攝影機資料夾裡的背景。

 

想在這裡確認實際的運鏡時，如下設定[播放設定]。

 

・[渲染2D攝影機]

從[動畫]選單選擇[播放設定]→[渲染2D攝影機]。

勾選[渲染2D攝影機]，會以實際映照在基準畫格中的運鏡來播放背景。

 

・[於播放開始前進行渲染]

使用[渲染2D攝影機]時，會一邊渲染處理2D攝影機一邊播放，流暢度會比實際播放的動畫低。

在[動畫]選單上勾選[播放設定]→[於播放開始前進行渲染]的話，會在處理渲染後再播放動畫，可以流暢地播放運鏡。

 

・[全畫格播放]

使用初始設定的[即時播放]，會以正確渲染畫面更新率的設定來播放動畫，因此系統處理上會變慢。

變更成[全畫格播放]的話，雖然播放起來會比實際的動畫稍微慢一點，但是能減輕渲染處理帶來的負擔。

 

・[速度優先]

在自動降低解析度的狀態下播放動畫。

 

勾選上述設定並執行[播放/停止]，會播放實際映照在運鏡上的背景。

不需要確認運鏡時，可以取消[渲染2D攝影機]的勾選。

▲左：有2D攝影機渲染的播放畫面，右：沒有經過渲染的播放畫面

 

[8]寫出影片

將製作的動畫寫出成影片。

 

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

 

②輸入檔案名稱，選擇保存位置、保存格式後點選[OK]。

雖然也能寫出為MP4、AVI任一個格式，但這次先以MP4格式進行寫出。

※AVI格式不適合在Mac上播放，MP4格式的泛用性比較高。

 

③顯示[影片寫出設定]對話方塊。

若有加上運鏡的話，要確認是否已勾選[套用2D攝影機]。

將[選項]的[畫面更新率]數值設定成和[新建]對話方塊上所選擇的畫面更新率一樣（這次設為「8」fps）。

※若更改成比較小的數值，播放時間不會改變，但是1秒內顯示的圖畫張數會變少。

 

④點選[OK]後就會寫出影片。

 

這樣就完成了3秒動畫！

※寫出成GIF動畫的完成範例。

 

影格動畫的製作方法講座到此結束。