AE12秒網站廣告條設計實例

      【火星時代專稿，未經授權不得轉載】  

        大家好，我是田飛，湖南大學設計藝術學院2006級碩士研究生，從1999年以來先後在陝西、深圳、浙江、湖南、北京等地從事平麵設計、網頁設計、市場營銷等工作。 

　　很榮幸被火星邀請寫教程，我不是很擅長對技術方麵進行描述，加上這個動畫的技術含量比較低，所以，這個教程可能更像是我自己的工作流程而不是真正意義的教程。看得不入眼的話就忍忍吧，少拍兩磚 ：） 

　　本文主要介紹一個比較典型的網絡廣告條動畫(banner)設計的流程。

　　首先看動畫的效果。

效果圖

#p#e#

　　一. 任務描述：

　　對方提供了一個他們已有的平麵文件(.PSD格式)，要求在不改變他們平麵廣告風格的基礎上做動畫設計，時長大約十秒即可。規格是按照網站的要求：638 x83 px（對於他們的“設計”和“創意”我不做任何評價，這都是客戶已經定好的，在這個設計過程中，我隻考慮motion design的問題）

　　一般來說，我認為在接到設計任務之後，首先應該對設計任務進行分析-------這比埋頭苦幹更重要，磨刀不誤砍柴功嘛。

　　二．設計分析

　　設計分析中，包括素材源的分析和設計預想分析。

　　首先是素材源分析：

　　如上圖，我拿到的是一個包含了多個圖層及樣式的PSD文件，鑒於客戶要求，風格和元素不能改變，尺寸也被規定好了，所以我可以發揮的餘地是非常小的，在有限的畫麵中如何表現產品以及吸引眼球，是我做整個運動設計的重心。

　　因為我打算用After Effects來完成設計，因此，首先對素材源進行合理化的處理：精減圖層的數量，為圖層設置便於識別的名稱。(將psd導入AE之後我們就能明白合理的名稱是多麼重要)

#p#e#

　　設計預想分析：

　　因為banner的高度隻有83PX，所以，在有限的空間內，想要有力的表現產品，必須考慮細節；同時，作為一個廣告條，如何能夠吸引目光，就需要動作的透視，位移變化要強烈，而這種變化最好能有強烈的節奏感（比如快慢鏡頭的運用）。

　　從客戶的要求和我對產品的表現方法來看，以下元素是必須出現的。

　　企業名稱

　　產品

　　產品名稱

　　廣告詞

　　元素出場流程我安排如下：（其實也就是簡單的分鏡）

　　①企業名稱 --> ②產品細節 --> ③產品+名稱 --> ④產品細節(換個角度) --> ⑤產品+廣告詞 --> ⑥產品+名稱(重複記憶)

#p#e#

　　三．設計過程及重點動作分析

　　第一個鏡頭：企業名稱做放大動作，造成上升感。（這個動作太簡單了，應該不要教程吧？―――時間軸上兩個點，前一個小元素略小，後一個點元素略大，就可以生成縮放動畫:）

　　第二個鏡頭：重點是酒瓶的運動。

　　上圖中，高亮區域是廣告條的實際範圍。（暗色部分都是最後看不到的）酒瓶在這個過程中， 快速從右下角飛向中間（從小到大），然後轉變成超慢動作（形成視覺停留），用來強化產品上的細節。(參見下圖)

#p#e#

　　酒瓶下方的白霧也是一個圖層，當酒瓶出現時，白霧層做微微放大動作，透明漸變出現。

　　為了讓動作效果更真實和更強烈，背景層可以與前麵物體做反方向運動。

　　企業名稱 在酒瓶出現時就縮小消失了。

#p#e#

第三個鏡頭：產品名稱的出現+全局的產品。

這一步描述的是從產品特定到全局+產品名稱的過程。

#p#e#

　　這個過程中：

　　首先是產品（酒瓶）從中間快速移動到左邊，並同步縮小。

　　酒瓶周圍(酒瓶下麵的層)迅速出現裝飾物，與酒瓶的“縮小”動作相反，裝飾物是“放大”，兩種反方向的動作會形成“合力”，使鏡頭的力度增強。（參見上圖）

　　同時產品名稱（logo）從右邊出現，縮小+徑向模糊。（參見下圖）

　　兩者出現之後，動作迅速由外轉慢，形成慢鏡頭。（慢鏡頭是提供信息瀏覽的主要方法）

#p#e#

　　上圖是關於logo字效出現的方法。（汗~ 我用的都是沒什麼技術含量的方法和濾鏡，大家忍忍，權當照顧初學者）

　　還有，背景上看起來很絢的那一些霧狀物，就是之前那個“白霧層”，我讓它根據需要移來移去，加放大縮小而已，依然沒什麼技術含量。汗~ 我覺得實現一個效果如果有多種方法的話，我肯定會選那種最簡單的方法。有時候，視覺特效玩的就是障眼法，隻要能騙過眼睛，方法越簡單越好。

#p#e#

　　第四個鏡頭：從全局+展品再次回到產品局部

　　從大體來看，運動分兩個方向：

　　1、酒瓶及其裝飾物從左向右移動，並做Scale調整(放大)，動作與之前的酒瓶運動幾乎一樣，唯一不同是加了一點Rotation的變化(傾斜)

　　2、原來鏡頭中的產品名稱字樣，和背景一起，做反方向運動。

　　以上兩個動作，都配合 effect/blur/motion blur濾鏡，加強速度感。

#p#e#

　　之前的整個移動+模糊過程控製在不到半秒，也就是12幀以內，應該是極快速度，然後瞬即轉成極慢鏡頭，所有物體保持幾乎無法注意到的微距移動，（但不要靜止）

　　這時候體現的是產品細節，我們來為背景加一道光芒閃耀的效果。

　　這裏會用到一個外掛插件 Light Factor。主要會有三個參數變化

　　Brightness,光暈亮度  (從 0變成97，意味著光芒從無到有)

　　Scale光芒大小（控製大小的變化，以生成閃爍的效果）

　　Light source光暈放射中心（跟著瓶子反方向微微移動，形成背光閃耀的效果）

#p#e#

　　第五個鏡頭：從細節返回產品全局+廣告詞

　　為了避免重複效果，這次使用元素先拉近(放大，拉出屏幕範圍)，再縮小進入。這次將產品挪到右邊，文字出現在左邊。

　　還得再說明一下，瓶子背後的那個光芒四射，其實也是PSD圖層，不是什麼高級濾鏡，嘿嘿嘿。

#p#e#

　　第六個鏡頭：再次轉換至產品名稱（重複強化記憶）

這個鏡頭轉換中，將“中國一定贏”的廣告語 透視翻轉成產品名稱“西鳳酒”，會用到兩個概念： 3D 圖層 和 濾鏡Conner pin

首先來看 3D圖層，點擊3D圖層開關，這樣可以把一個層從2維層轉成3維層，注意原來的中心點，變成了三維坐標。

#p#e#

　　同時，在Transform裏新增了x、y、z三個軸向的rotation。

　　效果如下圖：

　　為了讓透視效果更加強烈，我們可以將 旋轉中心點的位置放到右邊來

　　點擊pan behind tool （鋼筆工具左邊再左邊，快鍵是Y），來拖動中心點。見下圖。

#p#e#

　　這樣，文字基本上就可以做到水平翻轉的效果了，但是似乎還不夠“撲麵而來”，所以再添加一個濾鏡：Conner Pin，見下圖。

#p#e#

　　Conner pin是一個係統自帶的濾鏡,它的作用我覺得有點像PS裏的“任意變換”通過改變Conner pin的四個角，可以加強 3D 透視的變化效果，使文字旋轉更加立體和逼真。（參見上圖）

#p#e#

　　當廣告詞翻轉到與視線垂直成一線的時候，產品名稱再進進入。從視覺上看，就像是“廣告詞翻轉變成了產品名稱”（產品名稱進入的方法見“第三個鏡頭”）

　　再看一次效果

　　分了六個鏡頭，基本上描述完了整個動畫設計過程。

　　這個“教程”裏的濾鏡、動畫、效果基本上都用的是最簡單方法，同時，由於對方提供的是PSD的文件，我在做PSD文件的整理時，順便把一些可能的效果都在PS裏做好，這樣進入AE之後效果上就可以偷懶，而把重點放在對於動作的設計上，而動作設計主要就是改變position、scale和rotation, 相對來說是比較容易的。

　　我們分層看，每個層的運動都是簡單的。

　　但是當所有的層整合起來以後，畫麵是否還能流暢呢？主要是考慮的問題是層級的關係和動作的配合：哪個元素先運動？哪個後運動？ 哪個物體的運動可以帶動別的？ 哪個物體對別的物體可以產生反作用力？ 哪些物體是重的？哪些物體是輕的等等，這些物與物的關係的處理上要下更多的功夫，最後的動作才會流暢。

　　回頭來看，很容易發現這個小動畫的動作設計一直是這樣循環的：慢動作(信息傳達) ------> 快動作(轉場) ------> 再慢動作，再快………. 
而一般我們做影像設計，會根據音樂的節奏來設計動作，但這個banner的設計中沒有音樂的配合，所以在動作設計(Motion design) 上的難度會增加，最好要多試了幾次，找找感覺。

#p#e#

　　四．輸出交稿

　　這部分沒什麼太過說的，由於動畫最後要在網上使用，所以輸出成SWF或者FLV是必須的，我試了兩種方法。

　　1.）我們可以點擊 File/export/adobe flash(swf) 來得到swf文件。

　　經我測試，生成的文件較小，大約500多K，但覺得效果一般，運動也有點卡，圖層邊緣也有毛刺（畢竟swf還是表現矢量動畫更好一些。）

　　2.）所以我用了另一個方法：首先將片子輸出成AVI (LOSSLESS)，然後再將AVI導入flash cs3，（導入時選擇 fl8格式的中等質量），可以得到一個性價比還不錯的質量。

　　然後再輸出成swf，我通常選JPG質量80%左右，最後生成的文件大約 600多K，還能接受，如果再大的話，可能就需要做下載條了。

　　如果客戶有要求要加一些URL廣告鏈接什麼的，也在FLASH裏完成好了。

　　完成基本動畫用了兩上小時，細節的反複調試又用了一個多小時。

　　有興趣看更多的話，可以上俺的blog看原文：http://nwgale.com/blog/?p=62

　　文章由 田飛@[不周風] 寫於2008年8月，首發於 火星時代，轉載請注明。

　　 本文僅為提供更多信息，不代表火星時代同意其觀點或描述。