《AE教學》簡單技巧輕鬆學!熱搜排行奪冠的美劇『怪奇物語』開頭動畫!

在本篇教學中你可以學到的有:

1. 文字材質的接合

2. Shape路徑的筆畫動態

3.包含有人提問的↓

它等同於Shape路徑的筆畫動態,所以在這篇文章中會一起說明。

※原作動態上還有些吃邊的效果,例如文字G的左側邊邊、交接後超過的部分處理,這部分本篇文章並不會講到。

 


哈囉!

應該有很多人喜歡看連續劇,無論是哪種連續劇,他們都會有自己的標題或開頭動畫,沒有開頭動畫也好歹有標準字…

 

這次要來學習的是怪奇物語的片頭~

 

雖然它應該是用3D CG,不過在AE內也可嘗試看看類似的效果。

怪奇物語的片頭在設計上非常用心,字體使用ITC Benguiat,加大了S和R,以及更多的曲線。

在風格依據上實際採用Kodalith透明印刷膠片來拍攝、模擬80年代的風格,當時必須使用攝影台,一格一格的拍攝出動畫。團隊藉此還原實際會呈現的邊緣模糊、抖動、鏡頭光暈和紋理,而這些甚至都是”錯誤的”行為,在當時會被認為不專業、不可以犯的錯誤,他們卻將這些作為怪奇物語片頭的風格和特色。

最後,再將這些參考應用在CG上。

 


 

1. 文字材質的接合

那麼在AE裡……

 

 

新建專案和COMP,用文字工具輸入”ZU”(或你想要輸入的文字啦…英文數字字體較好)。

 

然後將文字轉成形狀圖層Shapes。

 

它就會自動將文字創建成Shape,每個文字都會是獨立的群組。

 

接著,由於文字本身只是要作為Alpha用,主體是材質,所以將兩個文字分開來。

CTRL+D複製一個後,分別將Z和U刪除;一個留Z,一個留U。

 

CTRL+ALT+SHIFT+Y創建一個空圖層,這個圖層要拿來做為文字Shape和材質的位移參考。

 

目前還沒有加入材質,所以先將文字的Position綁定空圖層Z的座標。

這邊要注意的是,因為空圖層預設的路徑位置是COMP的中心,文字的座標並非在COMP中心,所以要先將空圖層Z的座標更改為和文字的座標一樣,

這裡的文字是928.0,676.0,空圖層也必須是這個數值,才可以將文字綁定它。

 

然後Z和U都這樣做~

並且設定好路徑動畫:

讓Z從左邊向右靠、U從右邊向左靠,然後彼此靠攏、合併在一起。

 

稍微設定一下動態的曲線:

 

然後加入材質~

 

這邊是用Fractal Noise做為材質,你也可以匯入自己的素材來代替。

 

 

將它挪到Z Shape的下層,並讓它吃Alpha。

這邊Mask遮罩其實沒什麼意義,只是想拿來對之後的位置…(略)

 

兩個都這樣做會是這樣:

不過你會看見他們的交界、重疊處會有點明顯的分隔差異,

那是因為材質吃到的位置並沒有連貫在一起,所以剛才的遮罩就能派上用場。

 

兩個文字重疊時,藉由遮罩來調整材質位置,讓兩邊文字的材質都是連貫的,重疊在一起時才不會有太大的分隔。

 

 

現在看起來就好很多了:

噢!這裡的混合模式我選擇Lighten。

 

 

這裡將全部圖層(除了一開始的文字圖層)都轉變成3D Layer,然後加入攝影機。

再創建一個空圖層,取名為Camera,也轉為3D Layer,讓攝影機去綁定它。

接著打開攝影機的控制,開啟焦距模糊,並設定一下焦點。

 

這裡我將全部都Pre-Compose起來,並命名一下。

並用Tint來加入紅色色調,以及光暈效果。數值如上。

 

 

上圖你會看到我有兩個TITLE COMP,另一個的作用是要來做更誇大的鏡頭光暈。

數值如上。

這樣文字周遭又包覆了一層紅色光暈。

 

再複製一個一樣的,拉到最底層,取名為BG LIGHT,要用同樣的方法製作背景:

 

不過這邊會將它模糊~

 

基本上OK,只需要額外調整色彩、畫面顆粒等等的大致就完成,不過這樣的內容似乎太空洞了。

而且指淵還少了個6。

 

2. Shape路徑的筆畫動態

我們開啟AI,輸入文字 “6”:

 

然後到Typekit找一些字體,這邊要找的是很細的字體。

如果你沒有這個功能,那請更新至CC以上。

 

這個網站可以選擇一些關鍵類別,例如你要搜尋細部的字體,

那我這邊找到了這個,有Hairline型的字體。

點選右邊的SYNC即可同步到你的電腦裡,ADOBE也能及時載入這個字體。

 

將文字改為這個Lato Hairline型:

 

 

這邊其實只是要參考這個字體而已,比起用即時描圖抓路徑,我這邊選擇自己用鋼筆工具畫路徑:

自己用鋼筆工具畫好的路徑。

 

這樣做是因為AE、AI內無法將文字轉變成單條線,而我不想讓文字有外框。

 

將這個AI匯入進AE:

 

 

然後轉變成向量Shape:

 

打開裡面的項目,

將線條的寬度改為20。

 

然後將Path 1和2個別加入Trim Paths。

 

 

然後選擇圓形Path的左邊節點,讓它設為起始點。

 

設定Trim Paths的結束點,

讓它有畫出來的動畫。

 

像這樣:

 

不過處理到圓形的那個筆畫會發現,它開始畫時是向右上方筆畫前進,而不是繼續往下:

 

 

我要讓它接著第一筆畫繼續往下畫,可以這樣設定:

將Start和End都設為100%,再將End數值從100%降為0%。

 

而第一筆畫的結束點要和圓形筆畫的開始點銜接在一起:

頭尾的沙漏屬性可以選擇關鍵影格後按F9,中間的圓形關鍵影格可以按住CTRL單點它們,或是右鍵關鍵影格來選擇屬性。

 

大致處理一下:

 

範例:

原作文字有點鋸齒邊緣…最後才發現,哈。

那要增加鋸齒邊緣的效果,就是將文字加入Roughen Edges效果,然後Pre-Compose後(一定要這麼做)再去綁定各自的空圖層位移。

沒有Pre-Compose的話Roughen Edges效果是吃不到位移的哦!

 

 

原作非常精緻,這邊也只能做個大概,像是邊緣的鋸齒也不會是用Roughen Edges來製作,整體當然也不會是AE。AE哭哭。

但有更多的嘗試與學習才能精進自己,對吧!

 


 

那麼這個又要怎麼做呢?

 

首先畫一條線(Shape):

 

你會看見Shape內的屬性是這樣:

因為畫的是線條,所以沒有填色(Fill),只有Stroke。

 

然後加入Offset Paths。

你會發現原本的單條線段變成了封閉的線段。(如上圖)

 

Round Join選項可以讓你的封閉面改為半圓形。

 

 

這時再加入Trim Paths:

 

雖然在上面怪奇物語的教學中知道,這個Trim Path可以讓路徑做移動,

不過你會發現,它是將線條做動態,而不是以我們用鋼筆畫的路徑作為依據:

 

Shape的參數也是有圖層關係的,我們將Trim和Offset交換一下。

 

就能以路徑當作依據來讓線條做動態囉~

 

簡單設定一下Start和End的結尾:

 

這邊在附贈一個簡單的表達式:

因為我們只單純做關鍵影格,它只會跑那麼一次,要讓它循環,手動就要Key很多關鍵影格,很麻煩,

所以可以按住ALT點小時鐘,打開表達式控制,輸入:loopOut(“pingpong”) ←紅字部分。

它能讓關鍵影格來回循環,而另一種 loopOut(“Cycle”)則是頭尾循環。還有更多的循環語法…(略)。

 

那成品就會像這樣:

 

不過,我不想讓它是頭尾交錯的循環,

所以可以在頭尾再設立關鍵影格:

並且將頭設為0.5%,尾設為99.5%。

 

因為若是100%,Start和End都為100%的話會是什麼東西都沒有,這樣在循環到頭跟尾的畫面時會有閃爍感(因為紅線消失而閃一下)。

成品會像這樣:

 

 


 

以上就是這次的AE小教室,喜歡的話也請分享出去,

我們下次見~

 

 

非經授權請勿轉載本網站原創內容,盜用必究

若想得到更多教學資訊,歡迎加入六指淵學生社團


《立即分享》
Loading Facebook Comments ...