|
|
|
本教程通過介紹一個比較典型的網絡廣告條動畫(banner)設計的流程。來體現AE在應用中的多樣性!我們開始進入了解。
一. 任務描述：
對方提供了一個他們已有的平面文件(.PSD格式)，要求在不改變他們平面廣告風格的基礎上做動畫設計，時長大約十秒即可。規格是按照網站的要求：638 x83 px(對于他們的"設計"和"創意"我不做任何評價，這都是客戶已經定好的，在這個設計過程中，我只考慮motion design的問題)
一般來說，我認為在接到設計任務之后，首先應該對設計任務進行分析-------這比埋頭苦干更重要，磨刀不誤砍柴功嘛。
二.設計分析
設計分析中，包括素材源的分析和設計預想分析。
首先是素材源分析：
圖1
如上圖，我拿到的是一個包含了多個圖層及樣式的PSD文件，鑒于客戶要求，風格和元素不能改變，尺寸也被規定好了，所以我可以發揮的余地是非常小的，在有限的畫面中如何表現產品以及吸引眼球，是我做整個運動設計的重心。
因為我打算用After Effects來完成設計，因此，首先對素材源進行合理化的處理：精減圖層的數量，為圖層設置便于識別的名稱。(將psd導入AE之后我們就能明白合理的名稱是多么重要)
設計預想分析：
因為banner的高度只有83PX，所以，在有限的空間內，想要有力的表現產品，必須考慮細節;同時，作為一個廣告條，如何能夠吸引目光，就需要動作的透視，位移變化要強烈，而這種變化最好能有強烈的節奏感(比如快慢鏡頭的運用)。
從客戶的要求和我對產品的表現方法來看，以下元素是必須出現的。
企業名稱 產品 產品名稱 廣告詞
元素出場流程我安排如下：(其實也就是簡單的分鏡)
①企業名稱 --> ②產品細節 --> ③產品+名稱 --> ④產品細節(換個角度) --> ⑤產品+廣告詞 --> ⑥產品+名稱(重復記憶)
圖2
三.設計過程及重點動作分析
第一個鏡頭：企業名稱做放大動作，造成上升感。(這個動作太簡單了，應該不要教程吧?―――時間軸上兩個點，前一個小元素略小，后一個點元素略大，就可以生成縮放動畫:)
第二個鏡頭：重點是酒瓶的運動。
圖3
上圖中，高亮區域是廣告條的實際范圍。(暗色部分都是最后看不到的)酒瓶在這個過程中， 快速從右下角飛向中間(從小到大)，然后轉變成超慢動作(形成視覺停留)，用來強化產品上的細節。(參見圖4)
圖4
酒瓶下方的白霧也是一個圖層，當酒瓶出現時，白霧層做微微放大動作，透明漸變出現。
為了讓動作效果更真實和更強烈，背景層可以與前面物體做反方向運動。
企業名稱 在酒瓶出現時就縮小消失了。
第三個鏡頭：產品名稱的出現+全局的產品。
圖5
這一步描述的是從產品特定到全局+產品名稱的過程。
圖6
這個過程中：
首先是產品(酒瓶)從中間快速移動到左邊，并同步縮小。
酒瓶周圍(酒瓶下面的層)迅速出現裝飾物，與酒瓶的"縮小"動作相反，裝飾物是"放大"，兩種反方向的動作會形成"合力"，使鏡頭的力度增強。(參見圖6)
同時產品名稱(logo)從右邊出現，縮小+徑向模糊。(參見圖7)
兩者出現之后，動作迅速由外轉慢，形成慢鏡頭。(慢鏡頭是提供信息瀏覽的主要方法)
圖7
圖7是關于logo字效出現的方法。(汗~ 我用的都是沒什么技術含量的方法和濾鏡，大家忍忍，權當照顧初學者)
還有，背景上看起來很絢的那一些霧狀物，就是之前那個"白霧層"，我讓它根據需要移來移去，加放大縮小而已，依然沒什么技術含量。汗~ 我覺得實現一個效果如果有多種方法的話，我肯定會選那種最簡單的方法。有時候，視覺特效玩的就是障眼法，只要能騙過眼睛，方法越簡單越好。
第四個鏡頭：從全局+展品再次回到產品局部
圖8
從大體來看，運動分兩個方向：
1、酒瓶及其裝飾物從左向右移動，并做Scale調整(放大)，動作與之前的酒瓶運動幾乎一樣，唯一不同是加了一點Rotation的變化(傾斜)
2、原來鏡頭中的產品名稱字樣，和背景一起，做反方向運動。
以上兩個動作，都配合 effect/blur/motion blur濾鏡，加強速度感。
圖8
之前的整個移動+模糊過程控制在不到半秒，也就是12幀以內，應該是極快速度，然后瞬即轉成極慢鏡頭，所有物體保持幾乎無法注意到的微距移動，(但不要靜止)
這時候體現的是產品細節，我們來為背景加一道光芒閃耀的效果。
這里會用到一個外掛插件 Light Factor。主要會有三個參數變化
Brightness,光暈亮度 (從 0變成97，意味著光芒從無到有)
Scale光芒大小(控制大小的變化，以生成閃爍的效果)
Light source光暈放射中心(跟著瓶子反方向微微移動，形成背光閃耀的效果)
第五個鏡頭：從細節返回產品全局+廣告詞
圖9
為了避免重復效果，這次使用元素先拉近(放大，拉出屏幕范圍)，再縮小進入。這次將產品挪到右邊，文字出現在左邊。
還得再說明一下，瓶子背后的那個光芒四射，其實也是PSD圖層，不是什么高級濾鏡，嘿嘿嘿。
第六個鏡頭：再次轉換至產品名稱(重復強化記憶)
圖10
這個鏡頭轉換中，將"中國一定贏"的廣告語透視翻轉成產品名稱"西鳳酒"，會用到兩個概念：3D 圖層和濾鏡Conner pin
圖11
首先來看3D圖層，點擊3D圖層開關，這樣可以把一個層從2維層轉成3維層，注意原來的中心點，變成了三維坐標。
同時，在Transform里新增了x、y、z三個軸向的rotation。
效果如圖12：
圖12
為了讓透視效果更加強烈，我們可以將 旋轉中心點的位置放到右邊來
點擊pan behind tool (鋼筆工具左邊再左邊，快鍵是Y)，來拖動中心點。見圖13。
圖13
這樣，文字基本上就可以做到水平翻轉的效果了，但是似乎還不夠"撲面而來"，所以再添加一個濾鏡：Conner Pin，見圖14。
圖14
Conner pin是一個系統自帶的濾鏡,它的作用我覺得有點像PS里的"任意變換"通過改變Conner pin的四個角，可以加強 3D 透視的變化效果，使文字旋轉更加立體和逼真。(參見圖14)
這樣，文字基本上就可以做到水平翻轉的效果了，但是似乎還不夠"撲面而來"，所以再添加一個濾鏡：Conner Pin，見圖14。
當廣告詞翻轉到與視線垂直成一線的時候，產品名稱再進進入。從視覺上看，就像是"廣告詞翻轉變成了產品名稱"(產品名稱進入的方法見"第三個鏡頭")
再看一次效果
圖15
分了六個鏡頭，基本上描述完了整個動畫設計過程。
這個"教程"里的濾鏡、動畫、效果基本上都用的是最簡單方法，同時，由于對方提供的是PSD的文件，我在做PSD文件的整理時，順便把一些可能的效果都在PS里做好，這樣進入AE之后效果上就可以偷懶，而把重點放在對于動作的設計上，而動作設計主要就是改變position、scale和rotation, 相對來說是比較容易的。
我們分層看，每個層的運動都是簡單的。
但是當所有的層整合起來以后，畫面是否還能流暢呢?主要是考慮的問題是層級的關系和動作的配合：哪個元素先運動?哪個后運動? 哪個物體的運動可以帶動別的? 哪個物體對別的物體可以產生反作用力? 哪些物體是重的?哪些物體是輕的等等，這些物與物的關系的處理上要下更多的功夫，最后的動作才會流暢。
回頭來看，很容易發現這個小動畫的動作設計一直是這樣循環的：慢動作(信息傳達) ------> 快動作(轉場) ------> 再慢動作，再快……….
而一般我們做影像設計，會根據音樂的節奏來設計動作，但這個banner的設計中沒有音樂的配合，所以在動作設計(Motion design) 上的難度會增加，最好要多試了幾次，找找感覺。
四.輸出交稿
這部分沒什么太過說的，由于動畫最后要在網上使用，所以輸出成SWF或者FLV是必須的，我試了兩種方法。
1.)我們可以點擊 File/export/adobe flash(swf) 來得到swf文件。
經我測試，生成的文件較小，大約500多K，但覺得效果一般，運動也有點卡，圖層邊緣也有毛刺(畢竟swf還是表現矢量動畫更好一些。)
2.)所以我用了另一個方法：首先將片子輸出成AVI (LOSSLESS)，然后再將AVI導入flash cs3，(導入時選擇 fl8格式的中等質量)，可以得到一個性價比還不錯的質量。
然后再輸出成swf，我通常選JPG質量80%左右，最后生成的文件大約 600多K，還能接受，如果再大的話，可能就需要做下載條了。
|
|
發表留言請先登錄！
|