Love 88 Repeat Ani / Love 88動態製作解析

love_88 Big

今天就來跟大家分享「Love 88」動態的製作方式!
Love 88動態其是採用了Shape Layer變形與循環重複的技巧組合而成,而這樣的動態風格也適合把它當作循環背景來使用。相信大家只要對Shape Layer有充分了解,很容易就能完成這個簡單有趣的動態作品。


製作步驟

1、製作「單位形」

1.1
充分應用 PS與 AE的整合技巧,先在PS開啟100*100 Pixel(只要是正方型就可以)的文件尺寸範圍。

love88 01

1.2
在 PS中使用「鋼筆工具」畫製出之後要轉變的「形狀」(路徑),建議2~3個圖形路徑即可。

love88 02

1.3
此時將 PS維持在開啟狀態,並顯示剛才所繪製的「路徑」。

2、建立Shape Layer動態

2.1
新增一個New Composition:尺寸與步驟1.1中的PS文件尺寸相同。命名為:element com、時間10~20秒 時間長短皆可。

love88 03

2.2
在element com使用「圖形or筆型工具」:產生一個簡單的基本形狀 Shape Layer。

love88 04

2.3 產生形狀變形動態。
展開Shape Layer中的 Contents / XXX shape / Path 屬性:先自行增加第一個關鍵影格> 隨後移動時間軸到定點>切換到PS視窗中選到路徑後按Ctrl+C(複製)>回到Path 屬性上的時間點按Ctrl+V(貼上):就會產生第二個Path關鍵影格來產生形狀的變形。

love88 05

2.4
重複步驟2.3,切換到PS複製路徑再回貼到Path屬性上,完成形狀變形的設定。
在這裡建議此次動態的時間設定在:5秒左右。
PS:
在步驟2.4中完成所單位循環動作的設定,建議動態的表現上應該〝有頭有尾〞:這樣在之後的連續循環動態才會流暢。

love88 06

3、產生重複背景

3.1
新增一個New Composition:命名為:All com、尺寸 HD720、時間10~20秒 可自行設定。

love88 07

3.2
將 「element com」拖拉進All com中:並安排 element com 的單位圖形元素出現在 All com 畫面的中央。

love88 08

3.3
在「element com圖層」加入:Effect / Stylize / Motion Tile 效果。各類參數說明如下:
Tile Center:控制單位形的軸心。
Tile Width / Height:控制單位形的寬高比例,不建議調整會產生變形。
Out Width / Height:單位形寬高的重複比例,數值越高重複範圍越廣。
Phase:控制重複圖形的移動速度。

love88 09

3.4
只要適當的設定上述的各項參數,就可以產生:重複圖案變形的動態效果。此範例設定圖參考如下:

love88 10

4、產生連續循環動態

4.1
先切換到「element com」:將時間軸鎖定到 Path 形狀變形最後一個關鍵影格的時間點上。

love88 11

4.2
切換到「All com」:時間軸維持在步驟4.1的時間點上,在「element com圖層」執行:Layer / Time / Enable Time Remapping:該圖層頭、尾會自動產生關鍵影格。

love88 12

4.3
在 element com圖層上的 Time Remapping上:馬上在步驟4.2的時間點上新增一個關鍵影格,然後再刪除該圖層 Time Remapping 屬性在最後面的關鍵影格。

love88 13


love88 14

4.4 加入循環 Expression。
按住「Alt鍵」,在Time Remapping屬性的小時鐘點一下開啟 Expression 編寫視窗。
請打入:loopOut( ) 語法。

love88 15

4.5
建議可以在 element com 圖層加入Motion Tile 效果中「Phase」的關鍵影格:0度~ 2X+180度。另外也可以調整Rotation屬性為45度:可以產生比較活潑的動感效果。

love88 16

love88 17

4.6
現在預覽,就可以在畫面上:看到無限循環的背景動態喽!
如果畫面的循環動態不夠流暢,可以回到步驟2.4調整單位動態的設定。

Love 88 H

PS補充一下: 如何改變形狀的顏色ㄋ?

這個範例所出現的形狀顏色是使用 Shpae中的 Stroke屬性, 所以只要展開 Shape Layer中的 Stroke屬性: 再針對Color 設定關鍵影格( 點到旁邊的顏色色塊 )就可以喽.

Change Color

4 則留言:

  1. 老師您好:
    請問藍色轉粉色的變化是怎樣做出來的?

    回覆刪除
  2. Hello 凡稀:
    謝謝妳參與MGBoom的教學內容.
    這是很好的問題,關於顏色如何變化, 回覆如下:
    這個範例所出現的形狀顏色是使用 shpae中的 Stroke屬性, 所以只要展開 Shape Layer中的 Stroke屬性: 再針對Color 設定關鍵影格( 點到下方的顏色色塊 )就可以喽.
    PS: 已經將妳的問題回覆加入到原有貼圖中,跟大家一起分享!
    ~希望這回覆對妳有幫助,加油!
    歡迎保持聯繫

    MGBoom Design

    回覆刪除
  3. 老師你好:
    請問在2.3步驟那裏的path屬性是怎麼出來的?
    我不太了解這contents/xxx shape /path屬性 步驟 謝謝

    回覆刪除
  4. Hello 承紘 :
    關於你的問題是這樣的:
    一般的形狀圖層 (如:範例中的 橢圓 ) 在預設狀態下, 若要出現 Path 屬性,可以在繪製的時候加上 ALT鍵 : 就會在Contents / Shape 中出現 Path 屬性.
    再試看看,希望有解決你的問題.
    Good Job!
    MGBoom Design

    回覆刪除