Futuristic UI / 未來感UI動態介面
VR、AR 話題當道,今天就來分享如何製作出HUD (head-up display)頭戴式顯示器中有未來科技感的UI動態介面。。
製作步驟
1、製作 UI 動態元素1.1
製作UI元素,請大家參考「Stroke style effect / 路徑動態風格」的範例的製作方法,並將Composition尺寸調整為:正方型,以及調整為自己喜歡的形狀即可。形狀的風格可參考下圖:
1.2 增加質感。
選擇較寬的形狀圖層,先加入:「Fractal Noise」效果,設定參考如下:
Contrast:將數值調整到 150 左右,增加顏色的黑白對比性。
Brightness:將數值調整到 40 左右,增加整體色調的明度。
1.3 加入質感色調。
同步驟1.2的圖層,再加入「Fill」效果,並在 Effect Control 視窗將此效果排列於「Fractal Noise效果」的上方。設定參考如下:
Color:選擇自己喜歡的顏色。
Opacity:設定在 50~60% 左右比較適合。
1.4
將所有圖層一次選取,執行:Layer / Pre-Compose:「UI Com」,尺寸為正方型、10秒。
2、製作UI介面主場景
2.1
新建一個 Composition:「All Com」,尺寸 HD720、10秒。
2.2 新建一個背景圖層。
執行:Layer / New / Solid:「BG」,顏色為「深藍色」。
2.3 新增透視網格線。
複製「BG」圖層,命名為:「BG line」。並加入「Grid」效果,設定參考如下:
Size From:Width Slider。
Width:30~40。
Border:1~3。
2.4
將設定好的「UI Com」從 Project Window 拖拉進主場景「All Com」中,並將此圖層排列在最上方。
2.5 加入攝影機。
先將所有圖層轉換成 3D Layer,再執行:Layer / New / Camera:新增一台攝影機到主場景中。請自行調整攝影機視點到自己覺得適合的角度即可。
如果需要更好的控制攝影機角度,建議可以執行:Layer / New / Null Object:加入一個新的空節點。並將除了攝影機之外的其它圖層 Parent 到Null 圖層,再調整 XYZ Rotation 角度即可。
3、製作UI未來科技質感
3.1 加入UI 倒影。
複製「UI Com」:命名為「UI Com Ref」,將圖層排列於「UI Com」下方。接著執行下列三個設定:
1. 調整 Position的Z軸:
讓「UI Com Ref」圖層位置在「UI Com」下方有一小段距離即可。
2. 調整「UI Com Ref」圖層的 Opacity 設定在30~40%左右。
3. 加入「Fast Blur」效果,將Blurriness:設定在8左右。
3.2 加入暈光。
在「UI Com」與「UI Com Ref」圖層加入「Glow」效果,設定參考如下:
Glow Radius:120左右。
Glow Intensity:0.3~0.5。
3.3
可以複製「UI Com」與「UI Com Ref」圖層,並一起複製圖層移到畫面其它地方:增加空畫面的視覺元素。
3.4 加入畫面景深。
展開攝影機圖層的 Camera Option 屬性,調整以下三個參數:
Depth of Field:On。
Focus Distance:5000左右,這數值要視個人攝影機視角與位置而定,只要
有達到自己想要的景深效果即可。
Aperture:300~350。
3.4 調整畫面對比與暈光。
執行:Layer / New / Adjustment Layer:新增調整圖層,並將圖層位置排列於最上方。
再分別加入「Curve」、「Glow」效果:來加強整體畫面的對比與暈光。調整參數請參考下圖。
留言