一個喜歡 分享、學習、創作 的 動畫社群!

MOTION 101-2 動態設計的歷史與演化

Accent_motion101_2_01.jpg

原文出處 / 作者:henry.

今天要跟大家說說簡單的動態視覺設計的歷史背景。不知道動態視覺設計是什麼請先看這篇:動態視覺設計到底是什麼東西?又為什麼設計?

 

動態視覺設計的起源可以說是隨著電影誕生的,在二十世紀中開始被大量運用在呈現電影 Logo 與導演`演員與劇組姓名的介紹,片商資訊等等的『片頭動畫』。早期是以簡單的字卡形式呈現,簡單的黑底白字甚至完全沒有動畫,演變到當代電影剛播放時常常看到的那種很多名字飛來飛去的開頭動畫,它的功用除了告訴大家這部電影是哪些人做的,也會運用動態設計在開頭動畫裡去為電影劇情或整體氣氛做鋪陳。這樣一個簡單傳達資訊的訴求,隨著時代科技演變也就變成越來越華麗的設計啦。片頭動畫也從簡單的字體與圖形動畫組合,演變成一個個 3D 字型後面打雷閃電然後有超強的眩光在字體周圍閃爍之類的超級不知道在幹嘛的酷炫玩意兒們。


*電影 《無間警探》True Detective 的片頭動態設計

 

想知道更多電影片頭的歷史與資訊,可以上 Art of Title 這個專門介紹片頭動畫的網站逛逛。

說到電影片頭,最有名的動態設計始祖之一是索爾·巴斯(Saul Bass),他可是幫希區考克做過無數片頭的御用動態設計師噢。知名的風格是利用非常原始幾何圖形`搭配狂野派的簡單剪影圖騰搭配動態做出栩栩如生的作品。他的設計風格在現代人的審美觀來看可是一點也不退流行的經典作。


*索爾·巴斯(Saul Bass) 為希區考克創作的《驚魂記》Psycho 片頭動畫

從五零年代後期電視電影業的興起,奠定了動態視覺設計發光發熱的基礎。電視廣告業開始大量使用字體和圖像的設計,電視台也開始運用動態視覺設計做他們的形象動畫。但是科技不發達的情況下,設計的過程不僅費時費力,設備取得更是難上加難的貴以至於當時的動態視覺設計並不是那麼的引人注意。直至九零年代後期,動態視覺設計才因為電腦的普遍而開始正式起飛。(有多貴?曾經聽過教授說他年輕時在動畫公司打雜掃地,每天等到八點設計師們都離開公司,他都會偷溜去使用一台一百多萬台幣的電腦練習簡單的動畫軟體,聽說那個軟體後來叫做 After Effects… 什麼?你現在這台兩萬塊的筆電就可以用了嗎?)

2015 年的今天,高中畢業的學生都可以用他自己的筆電,運算出電影等級的動畫呢,精緻的程度我想連 Saul Bass 看了都會從墳墓裡跳出來…

 

如此快速的發展與轉變,也淺移默化的成為了動態視覺設計會大量被運用的推手,因為透過電腦與網路資訊的幫助,大大降低了動態視覺設計的門檻,個人電腦的配備越來越好,網路上軟體與教學資訊更是隨手可的,漸漸設計師不僅可以用低成本的預算創造高質感的作品,也可以確保在預算之內達到準確傳達產品資訊的效果。

說故事的本質使得動態視覺設計可以被運用在各種領域裡,最常見的大概是以下幾種:電視電影,廣告,形象包裝,網站,電影片頭動畫,動畫電影,電玩,動畫產業,互動作品,大型現場活動,各類現場即時演出…。從電影分鏡,鏡位設計,到電玩的故事動畫,大到活動演出的投影,小到手機 APP 的按鈕動畫。動態視覺設計在現在這個影像的時代,可以說是無所不在。


*動態設計在電影《鋼鐵人》 裡被運用在未來科技的使用者介面 (FUI)上

 

多無所不在?話說小弟做過的案子,從漫威(Marvel)公司的品牌動畫,索尼的電玩動畫,到女生的衛生棉條廣告都有… (我還記得接案的第一天,監製就買了三盒各式各樣的衛生棉條擺在我桌上。我要一個個打開研究它們展開後的形狀跟吸水性… 誰知道原來它們都香香的,有一兩個禮拜整個辦公室都是小綿綿地味道…一直到辦公室搬家前一天,好幾個人的電話話筒上都還綁著展開的小棉條,據說是因為講電話時會很香哦… 你也可以試試看…)


編:再複習一下,《What is Motion Design ?》中也有提到 MG 的歷史

如果這麼冗長又無聊的歷史課文你都唸的到這邊,那下一篇出來時一定要記得看哦…

今天就到這邊拉,我們下堂課見!

關於作者 henry.

目前任職於美國老字號 Motion 設計公司 Imaginary Forces。 參與《冰與火之歌:權力遊戲》第六季前導片設計、《英雄聯盟》電競全球形象設計、 《VINYL 唱片啟示錄》片頭設計、《曼哈頓計畫》視覺概念設計、Marvel 漫威電影公司開頭動畫、Sony Entertainment 及 Ubisoft 的多款遊戲動態設計。

在江湖裡屬「概念設計」一派,右手使 wacom 筆、左手以一套「 左右腦互搏之術」縱橫天下,幼時熟習美術及程式語言起家,少年離鄉背井,赴美拜師學藝,轉戰動態視覺動畫(Motion Design)的行列,學成之後赴紐約任職小小設計工部九品官。人言 “黯然销魂者,唯别而已矣”, 於離家以後鬱鬱寡歡,自此黯然銷魂般徘徊於曼哈頓室井之中。henry 個人官網

 

看完 Henry 精闢簡鍊的分析之後,你(妳)是不是對 Motion Graphics (要記得加 s 喔!)有了不同以往的更多認識呢?更棒的是,等一下(5/1)晚上 10:00 henry 將會越洋線上實況專訪他的 Motion 啟蒙老師 - SCAD(沙凡納設計學院)的動態設計系教授 Duff Yong,想要知道國外的月亮是不是比較圓?想對留美學習 MG 有更多瞭解?究竟美國的 Motion Design 系在教什麼台灣沒有教的?不斷演化中的Motion產業未來又會怎麼變?不管要不要出國,如何充實自己,保有國際競爭力?Professor Duff Yong 十五年的經驗,不藏私,全分享!喜歡 MG 的朋友千~ 萬~ 不要錯過啦!

【實況網址連結】

Accent_motion101_2_02.jpg

-感謝 The Accent Studio | 好有格設計 授權轉載-

MOTION 101-1 動態視覺設計到底是?

motion101_1_02.jpg

原文出處  / 作者:henry.

動態視覺設計原名 Motion Design, Motion Graphics Design, Broadcast Design… 大家常用各種詞彙稱呼它。到頭來大家都說就是一句話『會動的平面設計』。但是真的這麼簡單嗎?那麼那些畫電影分鏡的動態設計師怎麼說?那些幾乎是視覺特效的作品又怎麼說?

 

大學剛畢業時對自己主修的 Motion Media Design 其實都還是懵懵懂懂,在工作多年以後才總結出個結論 — 舉凡是在「時間」這個象限裡的設計,都算是動態視覺設計。 也因為這個觀念的興起,現在西方社會已經極少使用 Motion Graphics Design 來稱呼這個行業了,大部份都改稱Motion Design,因為真的不是只是『會動的平面設計』而已。

 

為什麼說的那麼哲學呢,因為… 就像平面設計,它本身就是一個概念性的東西,平面設計可以用來設計路邊發的市議員候選人傳單,也可以用來設計政治人物充滿謊言又擋住你家採光的超大型看板,嗯,好像是同一種東西?沒錯,他們都是平的『畫面』,可以用來概括性的描述所有平面媒材上的設計。

 


Motion Plus Design 製作的影片《What is Motion Design ?》中文版

 

簡單來說, 今天我們在一個畫面上畫個圓型,就可以說它是平面設計,因為圓型在畫面上是二度空間的存在。如果我們限定圓型必須在五秒鐘內,從畫面的左邊移動到畫面的右邊,看似簡單,但因為出現了「時間」這個要素而變得有無限多種可能。利用動態視覺設計的原理,我們可以讓圓型用上下跳躍的方式移動到右邊的定點,製造一種喜悅跳躍的動態 ; 又或是用快速衝刺然後到右邊定點前緊急剎車的方式移動,去塑造緊張的氛圍。使用更多能給這個圓型個性的方式,將它從一點移動到另一點,這樣的思維就是動態視覺設計。簡單來說就是在元素裡帶入動態,再利用動態去表達想傳達給觀眾的「資訊」。

 

許多人會問,這樣的事情不是動畫師在做的嗎? 動畫跟動態其實是前者與後者的關係。設計,是一種塑造與傳達資訊的手段,而動畫師的工作,就是要透過動態視覺設計去「設計」角色動作所要傳達的資訊,角色的一舉一動都是動畫師說故事的媒介。一般人在講動畫時多半是指角色的動畫,相對而言動態視覺設計則是指在創造動畫之前那觀念性的思維,這樣的思維可以被套用在任何物件上,從簡單的幾何圖形到文字、圖像,這些都可以透過動態視覺設計被賦予生命的元素。總而言之,動態視覺設計並不只是讓東西動起來,而是『為什麼要讓東西動起來』。動態只是最後的產品,動態視覺設計則是在描述帶入動態前的思考方式。

 


最常見的動態視覺設計是以簡單的圖形家讓動態來說故事。(《X戰警:第一戰》by Ash Throp)

 

這樣的思維使得大家對動態視覺設計的定義感到模糊不清。有些人會把它跟動畫、視覺特效、電影混為一談。事實便是如此,因為這裡提到的這些產品,個個都需要動態視覺的設計。從動畫的角色動作,特效裡的爆炸,到電影的分鏡圖。這些動態都是需要設計的過程,而每個設計過程都是從這些元素『為什麼而動?』的疑問出發。

 

motion101_1_05.png
在電影Gravity《 地心引力》裡的太空艙場景,是近年經典用設計過的鏡頭去說故事的例子。太空艙內的空間,鏡位,管線漂浮的位置,角色姿態跟角色衝擊過後失去意識的狀態,完整的創造一個抽象的子宮嬰兒畫面。( Product of Universal Pictures)

 

動態視覺設計因為有了「時間」的元素,成為了現代最俱有說服力的說故事媒介。因為人的感受是建立在時間裡的,是因為在時間裡經歷一切事物才會了解一切事物。在人的感官裡二維的畫面無法給予的刺激感與說服力,都因為時間的加入,而將動態影像塑造成比平面影像更俱有影響力的視覺經驗,有了空間,有了時間,才有故事。

 

說故事的本質使得動態視覺設計可以被運用在各種領域裡,最常見的大概是以下幾種:電視電影,廣告,電玩,藝術,互動藝術,形象包裝,展場,舞台…等等。從電影分鏡、鏡位設計、到電玩的故事動畫,大到活動演出的投影,小到手機APP的按鈕動畫。動態視覺設計在現今這個影像的時代,可以說是無孔不入、無所不在。

 


Universal Everything 幫 Nike做的互動裝置,將動態視覺設計的思維套入互動藝術,將人的肢體動作轉化成數位藝術的形式。 ( by Universal Everything)

 


科幻電影裡常見的高科技互動界面也都是動態視覺設計的一部分。(電影 Oblivion 《 遺落戰境》 by Gmunk)

 

動態視覺設計師就像是「時間的詩人」,時間的流動是我們觀看的框架,我們將四度空間當做畫布,物件的設計當做顏料,將時間快轉,停滯,慢速播放當作畫筆。這是一種用時間說故事的藝術,只有看得見二十四分之一影格裡些微變化的我們,才知道時間的美呢。

 

今天練肖為時間就到這邊,謝謝各位,下次將為大家帶來動態視覺設計的歷史背景和未來。

關於作者 henry.

目前任職於美國老字號 Motion 設計公司 Imaginary Forces。 參與《冰與火之歌:權力遊戲》第六季前導片設計、《英雄聯盟》電競全球形象設計、 《VINYL 唱片啟示錄》片頭設計、《曼哈頓計畫》視覺概念設計、Marvel 漫威電影公司開頭動畫、Sony Entertainment 及 Ubisoft 的多款遊戲動態設計。

在江湖裡屬「概念設計」一派,右手使 wacom 筆、左手以一套「 左右腦互搏之術」縱橫天下,幼時熟習美術及程式語言起家,少年離鄉背井,赴美拜師學藝,轉戰動態視覺動畫(Motion Design)的行列,學成之後赴紐約任職小小設計工部九品官。人言 “黯然销魂者,唯别而已矣”, 於離家以後鬱鬱寡歡,自此黯然銷魂般徘徊於曼哈頓室井之中。henry 個人官網

motion101_1_01.jpg

看完 Henry 精闢簡鍊的分析之後,你(妳)是不是對 Motion Graphics (要記得加 s 喔!)有了不同以往的更多認識呢?更棒的是, The Accent Studio | 好有格設計 越洋線上實況專訪他,想要對 Motion Graphics 最高殿堂的紐約業界有更多了解,或是想知道任何有關 MG 的知識、技巧、留學、工作問題的朋友,千~ 萬~ 不要錯過底下的專訪菁華啦!

-感謝 The Accent Studio | 好有格設計 授權轉載-

你這個冒牌設計師

You_are_an_Impostor_06.jpg

原文出處:SCHOOL of MOTION 
作者 Joey Korenman

有時候,腦袋中一個小小的聲音就會讓人信心崩潰,覺得自己根本是個渣。呃….我還記得我第一次「冒牌設計師妄想症」(Impostor Syndrome)發作。

我22歲時,得到一個可以剪接、設計以及製作我第一個全國電視廣告動畫的機會。那時候我覺得自己他媽的像是在做一支超級盃橄欖球賽廣告(編:美國最多人看的電視廣告時段,堪稱美國電視廣告人心目中的聖盃。),但事實是,它只是一個叫Danimals的兒童優格抽獎廣告。

我那時與一間紐約知名廣告公司的製片和藝術總監一起工作,這是我第一次真的完成整套作品,而且遠在德州的家人真的會在電視上看到(如果他們有看尼克或迪士尼頻道)。那時候,後面站著兩個業界大咖,坐在編輯台的我在想些什麼呢?

想這個:你他媽的到底在這裡衝啥小?
你根本不知道你在幹嘛,你只是假裝你是個剪接師!

為了證明我想的沒錯,老天決定讓藝術總監在酒醉摔角比賽後給我的臉出其不意的來個一拳(不過,這是另一個超長超怪的故事了),然後我竟然出包,送出29秒的廣告給合成室(注意:廣告應該要30秒才對),感謝老天,音效工程師喜歡我,偷偷跟我講讓我補救。

最後,這支廣告有我剪的片段和製作的圖像,並且播到全美,從此我的作品集裡多了一個全國廣告,我正式成為「真正的剪接師」。看看這支廣告在十多年後還是被推崇。

我的結論是什麼?
大家都在唬爛!!
沒有人知道他們真的在幹嘛!!!

你可能會嚇到,那些你生活中接觸的專業人士,像是:飛行員、醫生甚至是幫你安裝煙霧偵測器的師傅都可能觸發到這種「冒牌設計師妄想症」。很怪吧?是啊,但這也是你可利用的優勢。

You_are_an_Impostor_03.jpg
我不知道我在幹嘛...

所以,接下來讓我們來談談,當你覺得自己不是人們所想的那樣,在一群強者中你只不過是個惟命是從的工作人員,而且信心隨時都可能會崩潰,你可以怎麼做來幫助自己克服負面想法。

1. 開始動手,做個小東西然後完成它。

任何領域的成功者都是完成事情的人,尤其是Motion Graphics動態圖像界。他們可以從頭到尾完成為期3個月的專案這種苦差事。你喜歡嗎?如果你不是很確定,試試這個實驗:選一個字形,進你的After Effects,打你的名子,然後讓它在五秒內用一些漂亮的方法動。下面這個小品兩個小時就完成了,而我完全不覺得它丟臉。

JName.gif


你知道你剛剛做了什麼嗎?你讓圖像動起來了!也許你剛替你下支作品集做了開頭。誰會做這樣的事?動態圖像設計師!(Motion Designers) 是"真正的"動態圖像設計師喔,貨真價實。

Make it a habit of finishing stuff. 
把完成事情變成一種習慣,去做吧。

這個簡單練習讓你了解到「你就是你在做的」。當你重複執行再執行,你真的會開始覺得自己像個動態圖像設計師。不久後,5秒的專案會變30秒的廣告、2分鐘的影片,到那時候你的信心已經提升了不只一個層級。

2.你的工作不是要贏得一場動畫比賽,而是要讓人的生活更簡單。

我的意思是說:雖然你的客戶看似因為是他出錢,就擁有掌控最終成果的所有權力。事實上,藝術家才是那個可以控制自己命運的人。

想想看,一間小機構(或廣告經紀)需要有人為他們的品牌製作60秒影片。他們找到你和其他三個有可能適合的動態圖像設計師。但是,這個製片
1. 可能沒有設計和動畫專業。
2. 沒有每天看Motionographer
他們要選一個收了錢能完成專案的人,但他們卻沒有能力判斷誰是「最好的」藝術家。那麼,他們在找怎樣的人呢?

Clients look for “Who will let me sleep better at night?”
客戶在找可以讓他們晚上睡更好的人。

所以,你的工作不是下關鍵張(keyframe)或畫腳本,而是要讓客戶生活過的更容易些。就是這樣!所以在你向客戶證明僱用你就可以停止煩惱到底要怎麼把影片做出來的那幾秒,你就贏到案子了。不用擔心其他藝術家有更好的作品集或更懂得怎麼操作軟體,大多數客戶比起不知道會不會準時交件的搖滾明星,更想僱用值得信賴的人。

You_are_an_Impostor_04.jpg
客戶想睡成這樣~

那你怎麼讓客戶知道你會解決他們所有煩惱呢?首先,告訴他們你要做什麼。想像客戶問「所以你會對這個案子有興趣嗎?」.以下兩種回答:

方案A
「當然!你的預算多少?時程是什麼?這會超酷(插入酷炫MG流行元素),會讓它超屌!你們有什麼設計了嗎?」

方案B
「當然,我很樂意幫您解決問題,並且讓過程一切順利簡單。若我們決定合作,我會盡可能的符合您對專案管理的需求,緊迫盯人或放牛吃草,悉聽尊便。」

你可能以為製片真的會對你的寶貝創作比較感興趣,但事實上大多製片只希望專案能準時交件、合乎預算,一切盡善盡美。只要你對客戶做出以上保證,並交出超乎他們預期的作品,你就拿到門票了。

所以…如果你的工作只是向客戶重新保證一切都沒問題,你會確保專案都處理好,這樣不是比「超越所有競爭對手成為更好的動態圖像藝術家」這種壯舉大大容易得多呢?

3. 持續投資自己成為獨當一面的藝術家

雖然深入的訓練並不常是免費的,但也不代表一定得花大錢。這意味著,你永遠得犧牲一些生活上的事物來給自己變得更好的機會。

You_are_an_Impostor_02.jpg
永.遠.不.要.停.止.學.習

Wake up an hour earlier every day and do a one-hour speed project.
每天早起一小時
做一小時能完成的作品。

或許比較可能的是少睡一小時?你可以開始像傳說中那個靠北強的男人Beeple一樣,每天弄出一個(神)作品。你知道這會讓你產生多大的進步嗎?絕不誇大。這裡和前面提到的第一點剛好也有呼應,就是要把「完成事情」變成習慣,每天在Photoshop裡畫一格,在After effects裡動五秒,在Cinema 4D裡建個模。養成習慣後,你會快速看到自己驚人的進步。

Use the absolutely silly amount of free resources at your disposal.
隨興的使用多到不行的免費資源

我們的網站School of Motion有很多免費教學GreyScaleGorillaAfter Effects with MikeyLester Banks也都有。只要你不介意到處轉轉找出你想找的,幾乎什麼都有可能免費學。我曾經每天早上9:30-10:30都看教程。看一次性操作說明影片不是個很有效率的學習法,但當你看到一定程度的時候,腦中就會建立起技法的博物館,時不時會用到。像是「嘿!兩年前我隨機看到的Houdini教學影片,現在可以用在Cinema 4D的setup上耶。」

Invest in good, intense training.
投資在不錯且高強度的訓練

如果有預算又想加速學習,你有一些很酷的選擇。比較便宜的像Lynda.comDigital Tutors,有超多超棒超多種的內容。越有品質的課程也許會越貴,但我從這兩個網站都學到了非常多。你可以更進一步的去Gnomon WorkshopFXPHD看一些神人開的殺手級課程。這些網站更貴,但整體品質超棒。當然,你也可以直接攻頂,像Animation BootcampMograph Mentor,它們課成的強度真的真的很高,他們會把一袋又一袋的知識塞進你腦袋而且絕不手軟,如果你想在短時間內變超強,值得考慮看看。

投資時間和金錢在你的動態圖像教育上,你會慢慢發現… 嘿,剛剛Buck發的那個很屌的東西,不用研究"黑魔法"也可以做出來... 你剛學到的東西,他們也只是下去做,然後「做好做滿」。每當簾幕愈多拉開一點點,你愈會發現自己不再被好作品給嚇傻,而是可以看出它好在哪裡並學習起來。

總結一下

1. 當一個會完成事情的藝術家。
2. 你的工作是讓客戶睡得更好。
3. 投資你自己。

You_are_an_Impostor_05.jpg
這些建議已經聽到耳朵長繭啦...

沒錯,這些建議可能看起來沒屁用,但它們共同的目的都是強迫你開始邁開腳步,心理上或實際上擺脫莫名其妙覺得自己是冒牌動態圖像設計師的想法。當然,你可能還剛起步,才第一天打開Motionographer的首頁,但這也不代表你沒料。這代表你是個初學者,會有龐大且擴展中的社群要支持你和督促你。如果你已經是職業級,只是時不時覺得很悶,這些想法同樣也可以幫助你。

我想要補充一下,School of Motion的每一個人都承諾要幫你達到你所設定的任何目標。我們只是個年輕的公司,但我們的目標是成為你夢想中的動態圖像資料來源。如果你曾問過強大的網路卻找不到你想要的資料,告訴我們

So… hello there, Motion Designer. What can we do for you?
那… 嗨!你好,我是動態設計師,
有什麼能為您效勞呢?
編輯
Edit BY SHIH-YAO
 Back to top