如何制作音樂界面動效設計


課前准備

 

今天我們就來用AE做一個關於音樂App的動效,在設計這個動效文件的時候花了3個晚上的時間,然后花了5個小時寫這篇教程,由於本文是圖文描述,所以初學者在有些點上或許會碰到我沒考慮到的問題。

 

必須下載的素材

本文所需要的素材 

網盤下載:https://pan.baidu.com/s/1vLNAnalWpwing9whetI_vQ

 

插件下載

Particular粒子插件

WIN下載:https://pan.baidu.com/s/1Jl_RHw1saRXpOF-Oj-EO8w%20target=#list/path=%2F  

MAC下載:https://pan.baidu.com/s/1Z-zz3cFVCAo-ZYu2M5JVTw%20target=#list/path=%2F

 

一、確定所需要做的動效

 

1、星空的動態背景

2、音譜波譜抖動的動效

3、環狀的時間進度

4、時間的動效

5、整體界面設計

 

二、如何設置新的項目文件

 

讓我們為我們的項目設置一個新的文檔 (合成 > 新建合成) 使用以下設置:



寬度:750px;

高度:1334px;

幀速率:25幀/秒

背景顏色:#151422







三、插件Particular簡介



”圖層 - 新建 - 純色“ 創建一個純色層







當安裝完插件后,選中“效果”中的RG Trapcode 里面的Particular即可打開粒子插件,可看到左側效果控件的樣式。

按下“空格鍵”即可瀏覽最初的粒子樣式。









Particle部分主要功能翻譯:



Particle (Master):   粒子(主要)

Life [sec]:    粒子存在時間(秒)

Life Random [%]:   粒子存在時間抖動(百分比)

Particle Type:    粒子種類

Sprite:     子畫面

Sphere Feather:   粒子羽化

Texture:     結構

Layer:     圖層

Time Sampling:   時間采樣

Random Seed:    隨機數

Number of Clips:   剪輯數

Subframe Sampline:   次幀采樣

Rotation:     旋轉

Aspect Ratio:    比例

Size:     大小

Size Random [%]:   大小抖動

Size over Life:    變化方式

Opacity:     透明度

Opacity Random [%]:  透明度抖動(百分比)

Opacity over Life:   透明屬性變化

Set Color:    設置顏色

Color:     顏色

Color Random [%]:   顏色抖動(百分比)

Color over Life:   顏色屬性變化

Blend Mode:    混合模式

Unmult:     插件

Blend Mode over Life:  混合模式變化

Glow:     粒子發光

Feather:     邊緣羽化程度

Streaklet:     展示

Number of Streak:   展示數

Streak Size:    展示大小





四、如何設置星空背景



1、修改Particle的



life修改為:10 (是為了讓粒子持續的時間更長點}

size修改為1.5(是為了讓粒子的尺寸更小)

Opacity over life選擇







可以讓粒子不是特別密集,並且可以減弱一部分星光

Set Color打開Over Life則是為了可以設置顏色

打開Color Over Life設置漸變色#00B4FF —— #0000FF









2、修改Physics中AIR下面的Spherical Field



Strength:100px;

Radius:970px;(Strength和Radius類似,一個是擴散的力度還有個是擴散的范圍)



調整完這一步后星光會非常弱,暫時不用管繼續往下調整一部









3、最后一步



由於中間的星光太弱,所以將 Sphere Position的Positions改為 [960,540,0] 還有Emitter的Positions改為 [960,540,0]   可以將整體的坐標移到邊緣







注意:前面6秒為粒子出現時間,所以可以點擊時間軸將時間往前挪











五、如何設置音譜音波



音譜線條有內中外三條,外側為音譜,中層為進度,內層為一條固定描邊



1、首先下載一段音頻放進項目中

直接將文件夾中的mp4文件拖入合成中







2、創建音波



再次”圖層 - 新建 - 純色“ 創建一個純色層 , 打開“效果 - 生成 - 音頻波譜”









選擇左上角的音頻層,將文件改成音樂文件







然后選擇“效果 - 扭曲 - 極坐標”







將插值改為:100

轉換類型改為:矩形到極線







3、最后一步



接下來修改音譜參數



起始點改為:0,400

結束點改為:750,400

結束頻率改為:300

頻段改為:80

厚度改為:5

柔和度改為:0

面選項改為:B面











六、如何設置環狀時間進度



接下來創建中層進度以及內層描邊

在此圖層上右鍵 蒙版-新建蒙版,







並且點擊左側小箭頭打開蒙版修改混合模式 相加改為無







點擊蒙版路徑中的形狀,修改右側和底部為330px

選中重置為橢圓點擊確認





然后將蒙版路徑放在音譜中間







選中蒙版 CTRL+D后即可復制一層,然后雙擊畫板的圓形蒙版,Ctrl+Shift縮小復制出來的圓形蒙層

 



接下來打開“效果 - 生成 - 描邊“







點擊左上側的描邊修改路徑為蒙版1(此蒙版為中層進度)

Ctrl+D后修改路徑為蒙版2(此蒙版為內側描邊)



接下來修改描邊參數



描邊2:

畫筆大小為:10px

畫筆硬度為:100

可以滑動“起始”的數據,可以看到描邊的變化,假如不會做動畫建議觀看之前發布的“AE動效基礎”



描邊:

畫筆大小為:2px

畫筆硬度為:100

不透明度改成20%











七、如何設置文本時間的動效



創建一個空文本圖層







按住Alt點擊源文件前面的時間圖標粘貼下面的腳本即可創建一個可走動的時間







可在下方評論處復制代碼





可以修改右側字符的數據為24px,並且將字體改為Impact















八、將動效放進整體界面修改顏色



將切圖放入ae中的項目,拖入合成中進行排版,如下圖:







接下來會用音譜波形做一個調整顏色的示范:



調整顏色,加上質感

依次添加



“效果 - 生成 - 四色漸變”按喜好調整顏色(可調整體圖層顏色)



“效果 - 生成 - 鏡頭光暈”調整混合度(可讓整體圖層有明暗度變化)



“效果 - 風格化 - 發光(可讓整體圖層更加明亮)







按照之前的步驟添加到







完成調整顏色后的效果





這個教程也是我現學現賣,希望大家能一起進步

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM