iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 3

Motion Graphic 製作的基本流程

不論是設計師在上機繪製前、工程師在實作開發前,都需要先完成設計、規劃好Spec,才能在製作上更加順利。因此,在開始做實作 Web Motion 前,需先從 Motion Graphic 設計與規劃開始,而 Motion Graphic 基本上有以下四點流程:

  • 概念發想
  • 分鏡草稿與動態腳本
  • 彩色分鏡稿
  • 動態製作

一、概念發想

概念發想的訂定是賦予作品靈魂的重要步驟,決定作品主題與後續走向。
基本上都會從觀摩作品開始進行靈感發想,像是 Behence、Pinterest 平台都能利用關鍵字找到很多設計師的作品(當然也能利用強大的Google搜尋!),透過觀察這些作品、分析時間軸上的畫面變化,進行發想構思,決定作品概念方向後,就能開始設計畫面與動態囉!

二、分鏡草稿與動態腳本

Motion Graphic 是帶入時間軸概念的設計,把每一個畫面依照時間安排串接起來,因此分鏡腳本就是要進行畫面的安排與設計。在開始製作概念草稿時,建議把滑鼠放掉、拿起紙筆來畫畫吧!排除工具與技術的限制,才能避免受到工具的使用限制而阻礙想法的落實。這裡不用擔心美醜問題,在草稿階段就是利用線條去繪製圖像,能夠把停留在腦袋裡的概念清楚呈現,除了能確認概念的可行性外,才能更好的開展後續流程。

大略規劃好分鏡後,就可以開始進行動態腳本的規劃。動態腳本通常是把剛剛分鏡的草圖加上時間軸,把畫面轉換的設計移併納入進來,構思如何從A轉換到B,是利用控制透明度進行淡入淡出變化?利用位移變化產生A離開與B進入?或是大小變化讓A縮小消失、B放大出現?

不同的效果會產生不同的感覺,就看作者希望用哪種方式呈現囉!
備註:若需要更精細完整的動態腳本,這邊也可以使用軟體製作。

三、彩色分鏡稿 & 四、動態製作

分鏡與動態腳本都規劃完成後,就可以開始著手進行畫面與元件繪製,最後加入時間元素,進行動態效果製作。

以上是 Motion Graphic 的基本流程,依照設計團隊、設計師的習慣與需求會拓展出更多細節,下一篇會介紹基本的動態效果,透過這些動態特效與時間不同組合,就能製作出多種不同感覺的作品。


上一篇
讓我們從 Motion 設計開始
下一篇
Motion 效果基本項目
系列文
動起來吧!Web Motion 動態特效網頁學習日記30

1 則留言

0
liawyudye
iT邦新手 5 級 ‧ 2021-09-20 15:08:29

喜歡你用Motion Graphic切入寫動態!
好奇~網頁在設計的時候,真的會照這個Motion Graphic的流程走嗎?

謝謝你!如果設計越完整實作成果也會與設計更加符合,當然這邊也要看專案的大小去做選擇,如果動態效果是網頁的重點,我認為利用這樣的流程去製作會更加順利~

我要留言

立即登入留言