手繪的影格動畫

21,026 view
ClipStudioOfficial

ClipStudioOfficial

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

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

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


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

https://tips.clip-studio.com/zh-tw/articles/954
https://tips.clip-studio.com/zh-tw/series/117


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

分歧點:你想要做的是什麼樣的動畫呢?

https://tips.clip-studio.com/zh-tw/articles/2047#adbc6bca


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

[1]將構思化為分鏡

[2]新建畫布

[3]在膠片上繪製角色

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

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

[6]繪製背景

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

[8]寫出影片


[1]將構思化為分鏡

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

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

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

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


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


[2]新建畫布

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


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


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

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

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


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

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

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

https://support.google.com/youtube/answer/4603579
https://help.twitter.com/en/using-twitter/twitter-videos


・[畫面更新率]:「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】

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

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

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

https://tips.clip-studio.com/zh-tw/articles/2049#c9043414


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

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


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

※macOS版、iPad版則從[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】

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

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

https://tips.clip-studio.com/zh-tw/articles/2049#2ec0e0e6


[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」上完成了中割。


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


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

https://www.clip-studio.com/site/gd_en/csp/userguide/csp_userguide/577_animationcell_plt/577_animationcell_plt_function.htm


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

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

▲中割前→中割後


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

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


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

https://tips.clip-studio.com/zh-tw/articles/2049#1fba6a3b


[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動畫的完成範例。


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

留言

相關文章

最新

最新官方