Handmade line / AE 抖動手感文字與線條
AE 抖動手感文字與線條
最近樸實清爽的手感文青風大行其道，十分流行。今天就跟大家分享如何製作帶有2D抖動手感的線條效果啦。請跟著這個範例一起練習，了解如何在AE中將文字轉換成Shape Layer（形狀圖層）做出更多變化，以及如何為線條加入抖動感。
製作步驟：
1 加入文字
使用「文字工具」鍵入文字、選擇很細的字型。
2將文字轉換成Shape
選到文字圖層，執行：Layer / Create Shapes from Text指令：會增加一個新的文字Shape圖層（XXX.outline）。
3 文字抖動效果
展開文字Shape圖層，在右邊Add中加入Wiggle Paths 屬性。
PS：記得將Wiggle Paths 屬性移到所有字母Shape最下方才會有效果。
4 調整Wiggle Paths參數
Wiggle Paths參數設定參考如下：
Size：1.5~2左右
Detail：6左右
Wiggle/Second：15左右
5 設定文字Shape圖層的抖動
在文字Shape圖層展開Position屬性，鍵入Expression：wiggle(5,1)
6 設定文字Shape圖層的移動
由外面進入畫面中（由左向右移動）。
設定Position三個Keyframe（外>內>再回頭），並調整動態曲線。
7 加入飄動+抖動的線條
7.1
使用「路徑工具」繪製具環繞圓圈的曲線：「Line shape」。
7.2
從 Add中加入Trim Paths 屬性：並相互設定 Start與End 屬性，感覺線條會從某一方向飛進來又出去。
7.3
從Add中加入Wiggle Paths屬性：設定參數參考如下，
Size：7左右
Detail：15左右
Wiggle/Second：5~10左右
7.4
重複步驟7.1~7.3：加入2~3條飄動的曲線。
7.5
將每一層線條圖層的Motion Blur功能開啟：線條尾端會出現半透明拖尾效果，感覺會更自然。
再加入Fast Blur 效果：Blurness設定為1。
調整Opacity：50~60。
8、加入下落式陰影
可以為文字與線條圖層加入Drop shadow效果來增加立體感。設定參考如下：
Distance：3。
Softness：5。
9 加碼演出 !
不用將文字轉換成Shape layer就可以產生粗糙手感的抖動效果。
適用於：粗體字or單個英文字母有一個以上的封閉區域,如：O or B。
9.1
使用文字工具，使用「粗體字型」：鍵入文字。
9.2
為文字圖層加入：Roughen Edges 效果。設定參考如下：
Border：5。
Edge Sharpness：1。
Fractal Influence：1。
Scale：70~90。
Evolution Options / Random Seed：random( 1,100 )
想請問，我一直無法進行“設定文字shape圖層的抖動”
回覆刪除因為我一直找不到position
想請問在哪？因為我圖層打開就只有contents&transform
Hi nobrainer:
回覆刪除很高興收到你的來信,關於 Position的問題解說如下:
在 Shape Layer(形狀圖層)中的其實包含了兩個 Position 屬性:
A.一個是 Shape Layer本身,在 Contents / XXX(你的形狀圖層名稱) / Transform:XXX / Position.
B.另一個是圖層本身就有的 Transform / Position.(按快速鍵 P :就會顯示出來 )
而範例步驟 5 中所要加入 Expression的 Position屬性是 " B" .
請見附圖! 希望能解決你的問題. 歡迎持續保持聯絡.
MGBoom Design
您好，想請問如果是想用在圖型上的話(手繪抖動)，一樣用該方法嗎?
回覆刪除還是另有其他方法呢?
Hi 下巴:
回覆刪除很高興收到你的來信討論,關於你的問題有以下建議,請參考:
關鍵的問題是 "圖型"類型,是哪一種 ?
你所提到的"圖型" 是屬於向量 or 點陣的圖形ㄋ?
A
如果是向量檔,如ai檔. 那只需再匯入AE後,再執行: Layer / Concert Shapes from Vector 指令,轉換成形狀圖形後再設定動畫
B
如果是點陣圖,如Jpeg. 則建議要先將圖片處理成帶有Alpha( 遮罩)的圖檔,有就是已經去背的圖片. 建議可以在PS去背後另存為PNG or Targa 32 bit 的圖檔,再匯入AE進行動畫設定.
PS: 這裡建議的動畫方式是以圖片(有範圍的圖形): 請參考( 以本範例中的9 加碼演出的方法)
希望以上方法能幫助你,歡迎保持聯繫
MGBoom Design
請問有沒有影片教學呢?圖片有些不理解QWQ
回覆刪除Hi WT:
回覆刪除因錄製人力的關係,目前 MGBoom 的分享教學仍是以圖文為主,之後會往影音教學的方向調整優.
所以若本篇教學有不清楚的地方歡迎來信告知,我們很樂意與大家一起討論.
另外跟妳/你分享一個好消息,在影音教學的部分
MGBoom 從下週一(03/27)中午12:00 開始在Hahow有:"從0開始學AE動態設計核心基礎" 影音教學課程的募資,
有興趣歡迎點選:
http://www.mgboom.com/2017/03/0ae0327.html
覺得教學內容對你有幫助,趣也歡迎支持我們 謝謝!
MGBoom Design
你好!想請問背景的線條雜訊效果是如何做的呢?
刪除感謝!
Hello TK:
回覆刪除很高興你一起來參與我們的教學內容
關於"背景的雜訊效果" ,我們在這個範例是應用了: Fractal Noise效果
我們會在近期新增這個教學來跟大家分享.教學上架後會在MGBOOM FB PO文跟大家告知.
到時歡迎一起來學習
祝 學習順利
MGBOOM