關於2D MG:
相信很多設計師對於2D 向量動畫相當熟悉，但卻有時候看到別人的向量動畫卻又不知道別人是怎麼做出來的。今天就帶大家從 0 開始，帶大家了解其中一種做2D Motion Graphic 的流程，在帶出基本觀念與Skill。當然這是我自己Study與實作後統整的一套流程，相信業界一定有更多的方式來做出專業的MG。總之，本文介紹的方法學起來以後已可用在MG動畫或UI轉場設計上。
先看一下本系列文章的學習重點，也就是這張架構圖。滑鼠移上即可放大。
這系列文章主要帶大家了解的流程架構內容有：
- 概念創作 -手繪草稿與動態分鏡
- 打線稿 – 草稿進入Illustrator 製作Path元件
- 進AE – Path元件匯入After Effects
- Keying動畫 – 在After Effect 製作動態
- 微調動畫 -調整Ease與Keyframe 曲線 (Graph Editor)
- 匯出動畫 – 從After Effect匯出動畫
並且會讓大家知道，每個步驟可用的方法以及現在主流工具有哪些。
當然這領域有很多種作出MG的方法與風格，不同的風格通常是透過特定的方法去製作，用的工具也會有所不同。以應用的角度來考慮這邊將主要介紹2D向量MG。
概述各流程:
接下來將會把各個流程快速的說明，之後會將每個步驟仔細的再次分文介紹。
- 概念創作 -手繪草稿與動態分鏡
主要是將設計師的想法透過最快速的方式來呈現，所以手繪的方式來設定角色與場景是最快的方式。而有了最初的想法，也可以開始製作分鏡圖，透過工具可以將分鏡圖做出Frame by Frame Animation，如下面的影片介紹：
Frame by Frame Animation
2. 打線稿 – 草稿進入Illustrator 製作Path元件
簡單的說就是把關鍵的幾個轉場會出現的角色，根據手稿進行向量描圖，既然是向量工具，當然就是AI – Adobe Illustrator ，這邊比的是你對Path的掌控程度，越厲害的人，可以越快速地拉出漂亮弧度的線稿、可以預先埋下要進AE做動態的錨點。
若不熟的人也可以參考此篇文章：
3.進AE – Path元件匯入After Effects
4.Keying動畫 – 在After Effect 製作動態
Key動畫的時候，插入關鍵影格的時間點很重要，但更重要的是任何動態的元素，在開始動的時候，會有一個準備動作，稱為 Anticipation，中文翻譯為 預期、準備，也就是說，讓看到動畫的人可以知道有個預期心理，先注意到它，然後開始動作。 有了這樣的動作，就會讓動態看起來自然。 這是非常重要的觀念!
所以請大家務必把下面的影片看完：
5. 微調動畫 -調整Ease與Keyframe 曲線 (Graph Editor)
這步驟能讓原本呆滯的動畫，起死回生，會這麼說你一定要自己在AE裡面的時間軸設定完關鍵影格的動作以後，按下下圖時間軸左上角的按鈕 曲線編輯器 Graph Editor，按下以後，時間軸會把所選的關鍵影格，變成曲線。
而這樣的曲線工具，可以讓動作變得順暢有活力，不同的曲線造型，也有不同律動的生命力，等待你自己去挖掘。當然不同的情況所需要的曲線造型會有所不同。下面的圖所示範的曲線說明；適合UI轉場的Path變形。
這邊有個很重要的發現，自然的生活中，除非是機器，不然它的動作，一定不會是線性或很規矩地曲線。 這樣你知道曲線編輯工具的重要性了吧! 這就是給動畫生命很重要的關鍵之一!!
6. 匯出動畫 – 從After Effect匯出動畫
最後終於到了要匯出的時候，不同的需求要匯出的格式也不同。我們的任務主要是把逐格的圖片轉到Unity3D製作成過場特效Transition。因此選擇去背的逐格圖片。
也可參考這篇：
AE製作的動畫無縫串接到unity-3d中-AE Animation to U3D Sprite
這邊就沒什麼特別要說明的重點，看目標媒體所需要的格式了。
最後用一支超過兩百萬訂閱的YouTuber的動畫師成長歷程讓大家反思一下，自己是怎麼學習設計呢?
另外也分享本土設計師，透過專案自我學習，相信也是每個過來人都有的心得，文章充滿乾貨，有空一定要看看喔。
人稱彰化林思翰！《OH MG! 奔跑吧！魔炫少女》道盡 MG 人的心聲
結論:
剛好這次專案有需求透過2D MG的方式來產生UI Transition，再進到Unity3D裡面整合成順暢的轉場效果。因此好好的花時間學習了2D Motion Graphic 一種可以實戰的流程。
也像是其他設計師的心路歷程一樣，為了要做出專案，會不停地找尋資料，讓自己成長。所以接下來分享的，也會是自己摸索學習而來的知識。希望對後來要做2D Motion Graphic的人可以快速啟動；看完本文章順著這流程一套學下來，就會是即戰力。
如上面文章所談，其實MG領域很廣很深，不同風格手法，會用到不同工具與流程。未來會持續把這幾個流程中細節的步驟，獨立介紹，讓大家有更深入的感想也期待大家一起交流。
最後跟大家分享一個MotionDesignSchool上面的免費課程 :
