Flip Text / 翻轉文字效果

Flip-Test-gif

今天跟大家分享如何製作出有如在機場或時鐘看到的翻轉數字的字卡效果。瞭解教學中的製作原理後,相信大家就可以舉一反三至做出各種不同的翻轉字卡。


操作步驟:

1、建立單一字母Com
1.1
分別產生一個:文字圖層與導圓長方型底色塊。並將文字安排在上、色塊在下。

Flip Text 01

1.2
同時選取1.1的兩個圖層,按右建執行Pre-Compose指令:選擇Move all......。並以自己之後要變化的字母命名,如::「A」 or「1」....等。

Flip Text 02

1.3
複製多個步驟1.2完成的Com:再分別以自己之後要變化的字母各別命名。

Flip Text 03

1.4
將所有「單個字母Com」,按照出現順序將圖層位置由上至下排列。

Flip Text 04

2 、建立顏色控制器
2.1
新增一個調整圖層,執行:Layer / New / Adjustment Layer:「Color Con」並排列在最上方。

Flip Text 05

Flip Text 06
2.2
同時在「Color Con」與在最上方的單個字母Com 中加入:Tint效果。

Flip Text 07

Flip Text 08

2.3
將應用於「Color Con」的Tint效果更名為:Top Tint。

Flip Text 09

2.4 產生顏色控制器連結。
將最上方的單個字母Com中的Tint效果中的(Map Black To與Map White To),使用Expression連結到「Color Control」中的Tint相對應的屬性。

Flip Text 10

2.5
接著請自行在「Color Con」的Tint效果中自行設定 Map Black To與 Map White To的顏色。

Flip Text 11

2.6
選擇「最上方的單個字母Com」中已經加入Expression連結的Tint效果屬性,Copy 屬性,然後一次選取其它的字母的Com ,再貼上Tint效果:使每個字母Com產生相同的顏色控制連結。

Flip Text 11+

3、產生上、下部分
3.1改變字母Com的名稱。
由於之後會有上下對稱的翻轉,所以請將現在的字母Com名稱後面全部加上~Top(上半部)。

Flip Text 11++

3.2
在 Composition 顯示出「尺規」,以最上方的Com為對齊目標,拖拉出1/2的中間參考線。

Flip Text 12

3.3
在最上方的Com以1/2的中間參考線,產生遮罩:Show出上半部。
3.4
Copy在最上方Com的遮罩,貼到其它的Com(產生相同的遮罩位置)

Flip Text 13

3.5
Copy與貼上全部有Top的Com,再將複製的Com依照名稱由上至下排列與改變名稱為 ~Top。

Flip Text 14

3.6
改變步驟3.6複製的所有Com名稱為 ~Dn Com,並將 Mask 設定為Subtract:秀出下半部。

Flip Text 15

Flip Text 16

3.7 下半部的圖層順序。
※重要:
將下半部的~Dn的圖層排列順序:分別由上而上排列(與~Top上半部圖層排列相反的順序)

Flip Text 16+

4、設定上半部翻轉
4.1
除了Color Control 圖層之外,將所有圖層轉換為3D Layer。

Flip Text 17

4.2
每隔一秒加入一個圖層標籤:提醒翻轉的時間點。

4.3
選擇最上層~Top Com的圖層,展開Rotation屬性:以10個Frame,設定X軸向由0 > +90 。

Flip Text 18

4.4
以1秒翻轉一個字母(數字)為時間單位,接續設定每個~Top Com的圖層的 X Rotation 軸翻轉(0 > +90)。
4.5
請注意上半部的最後一個字母 Com:由於最後會停留在畫面上,所以不設定翻轉。

Flip Text 195、設定下半部翻轉
5.1
請注意下半部的第一個字母 Com(排列在最下方的圖層):由於一開始就會出現在畫面上,所以不設定翻轉。
5.2
下半部的第二個字母Com,展開Rotation屬性:以10個 Frame,設定 X Rotation軸向由 -90 > 0 。

Flip Text 20

5.3
以此類推,以1秒翻轉一個字母(數字)為時間單位,接續設定每個~Top Com的圖層的X Rotation軸翻轉(-90 > 0)。

Flip Text 21

6、剪裁圖層
剪裁圖層為了讓圖層看起來更井然有序,容易識別。
6.1
將上半部的字母圖層Com,以X Rotation的最後面的關鍵影格位置:按Alt+] 鍵:剪裁圖層的 Out 點。
6.2
除了上半部的最後一個字母Com之外,以此類推,依序剪裁上半部的字母圖層Com圖層的 Out 點。

Flip Text 22

6.3
將下半部的字母圖層Com,以X Rotation的最前面的關鍵影格位置:按Alt+[ 鍵:剪裁圖層的 In 點。
6.4
除了下半部的第一個字母Com之外,以此類推,依序剪裁下半部的字母圖層Com圖層的 In 點。

Flip Text 23

Flip Text 24

Flip Text 25


這個範例主要是清楚了解:上下半部的圖層排列與翻轉的時間點。恭喜大家完成喽!

0 意見:

張貼留言