之前畫的天竺鼠車車的動圖，出乎意料的還滿受到喜歡的樣子w，如果有愉悅到大家就太好了，那也藉由這個機會分享一下這小品動畫的製作紀錄，我想對於一些想做這類動圖的新手應該也會有所幫助
首先一開始就確定要模仿《頭文字D》的漫畫風格，考慮到筆觸和網點的部份，同時又是個小動畫，張數不會很多，便毫不猶豫的採用 CLIP STUDIO PAINT 來製作
實際 CLIP STUDIO PAINT 的工作界面
在實際作畫之前，必須要考慮到製作的便利性，將畫面中的物件按照空間關係有邏輯的分層來畫，以這次的畫面內容來講，我把各個物件拆層5層，由下往上分別是A層是天空飛舞的屑屑、B層是遠景的樹叢、C層是前面的道路、D層是車車、E層是狀聲字
分層的示意圖，這裡用了顏色讓大家在看的時候更好去作區別
最初開始作畫的是C層的道路，用了3張1K作循環，以最低限度來講，要讓路面感覺有動起來，至少也要3張才行，這裡在作畫時，要注意的是那些筆觸般的線條，要順著道路旋轉的方向性來畫，而且3張的筆觸線條要避免重覆畫在同一個位置，這樣才能把動態感表現出來
但是3張的資訊量其實是不足的，沒辦法把道路旋轉的方向性去表現出來，所以在觀看時，有可能感受到道路是順時針轉，也有可能會覺得是逆時針轉
如果要明確的表現出方向性，就必須4張以上作循環才可以，不過這裡為了省工，用3張呼嚨過去就行了，方向性的問題留到給下一步用遠景的樹叢來解決就行了
C層的道路，用了3張1K作循環，看起來是順時針轉，還是逆時針轉呢？
再來作畫的就是B層遠景的樹叢，一開始先畫了正常版面的長度，然後再用複製貼上至頭尾連接起來，並用網格變形作透視大小的微調，最後就變成一長條的樹叢了，之後的每一張作畫都是拿這長條的樹叢去調整的，在調整時把握一下間隔和透視就行了，這裡我有輔助性的畫了藍線，就是為了能夠幫助我在調整時有個依據
把B層的遠景樹叢整個呈現出來就是這樣的感覺
樹叢用了8張1K作循環，有了這樣的高密度的資訊量，移動的方向性和速度感就能很好的表現出來
B層的遠景樹叢，用了8張1K作循環，明確的呈現出方向性了
這時把C層的道路和B層遠景的樹叢合在一起觀看時，就可以一定程度的將道路往後旋轉的感覺暗示出來了！
C層的道路和B層遠景的樹叢合在一起
道路往後旋轉的表現解決完之後，就可以加上可愛的天竺鼠車車啦
車車是D層，用3張1K作循環就足夠了，車體的部份為了表現動態感，採用同描振動（同トレスブレ）的方式來作就夠了，也就是先畫好第一張原畫，後面的兩張都是照著第一張來描就好了，因為3張的線條會有微妙的差別，播放起來時就會有抖抖的感覺，藉此就能表現出車車是在運作的了
另外輪胎上的筆觸線條也跟C層道路上的筆觸線條原理是一樣的，順著輪胎旋轉的方向性來畫，也要注意3張不要畫在重覆的地方，就樣就能夠表現出輪胎旋轉的感覺了
D層的車車，用了3張1K作循環
為了讓背景更豐富一點，跟漫畫一樣，天空的部份也加上不明覺厲飛舞的屑屑
飛舞的屑屑是A層，也就是位於畫面中最底下的一層，用了8張1K作循環，作畫的時候稍微意識到飄動時曲線般的感覺就行了
A層的天空飛舞屑屑，用了8張1K作循環
最後畫龍點睛的便是漫畫那特有的狀聲字表現哩
狀聲字位於畫面最上方的E層，用了3張1K作循環，一樣也是採用同描振動（同トレスブレ）的方式來作，只不過為了加大晃動感，再把3張稍微分別錯位調整一下就行了
E層的狀聲字，用了3張1K作循環
如此一來，這5層的作畫就都完成了，分別有用到3張1K和8張1K，而2D動畫一秒是24K，而3和8的最小公倍數是24，所以整個動態的循環可以剛剛好在1秒鐘整呈現出來
那將目前全部的作畫圖層合起看就像這樣子↓
全部的作畫圖層示意
最後，為了能夠表現的更加漫畫感，就利用 CLIP STUDIO PAINT 內建素材庫的網點，直接快速的貼上就行了，數位的網點真的很方便呢
全部網點都完工之後，就可以直接輸出動畫 GIF 來觀看啦
CLIP STUDIO PAINT 內建素材庫的網點示意
另外，這裡也順便說一下，雖然 CLIP STUDIO PAINT 可以直接輸出 GIF 動圖，但是在輸出設定的視窗裡並沒有任何針對畫質最佳化的選項，所以生出來的檔案其實是能有更進一步瘦身的空間在的
我個人會利用 Photoshop 來作最佳化，直接把 GIF 動圖丟進 Photoshop 內，然後去上排選單 "檔案" → "轉存" → "儲存為網頁用" ，就能利用這個功能，在保持畫質幾乎不變的同時，更進一步的對 GIF 動圖作最佳化
在作最佳化調整時，只要注意圖中我打紅勾的選項就行了，以這種黑白圖來講，這樣的設定會是最適合了
Photoshop 的 "儲存為網頁用" 功能面板
像以這個動圖為例子，CLIP STUDIO PAINT 直接輸出的 GIF 動圖為 6.4 MB ， 經由 Photoshop 最佳化後，變成了2.2 MB ，快差了3倍
檔案大小示意，右為 CLIP STUDIO PAINT 直接輸出，左為經由 Photoshop 最佳化後
以上就是這次的製作心得紀錄啦，希望能幫助到大家，我要來看天竺鼠車車哩～～～88
達人
