AE教程:音乐界面动效设计

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
15706 35 437 2018-05-13

课前准备


今天我们就来用AE做一个关于音乐App的动效,在设计这个动效文件的时候花了3个晚上的时间,然后花了5个小时写这篇教程,由于本文是图文描述,所以初学者在有些点上或许会碰到我没考虑到的问题


假如卡在一个地方可以进群或者私信我



必须下载的素材

本文所需要的素材 网盘下载


插件下载

Particular粒子插件WIN下载  MAC下载



一、确定所需要做的动效


1、星空的动态背景

2、音谱波谱抖动的动效

3、环状的时间进度

4、时间的动效

5、整体界面设计


Image title




二、如何设置新的项目文件


让我们为我们的项目设置一个新的文档 (合成 > 新建合成) 使用以下设置:


宽度: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点击源文件前面的时间图标粘贴下面的脚本即可创建一个可走动的时间




可在下方评论处复制代码


Image title


可以修改右侧字符的数据为24px,并且将字体改为Impact




Image title





八、将动效放进整体界面修改颜色


将切图放入ae中的项目,拖入合成中进行排版,如下图:




接下来会用音谱波形做一个调整颜色的示范:


调整颜色,加上质感

依次添加


“效果 - 生成 - 四色渐变”按喜好调整颜色(可调整体图层颜色)


“效果 - 生成 - 镜头光晕”调整混合度(可让整体图层有明暗度变化)


“效果 - 风格化 - 发光(可让整体图层更加明亮)




按照之前的步骤添加到




完成调整颜色后的效果





这个教程也是我现学现卖,希望大家能一起进步




版权申明:本文为我的原创文章,如有转载请附上作者和链接哦~

也欢迎加入设计群, 一起交流设计









全部评论:35

  • 一个很阳光的名字

    2019-01-25 11:44

    @月老本老: 客气客气,一起努力哈~

  • 月老本老

    2019-01-25 09:37

    @一个很阳光的名字: 早就搞定了 谢谢

  • 一个很阳光的名字

    2019-01-24 13:41

    @月老本老: 你要给起始添加关键帧

  • Miauki

    2019-01-03 16:39

    文字增加代码后就消失了

  • 月老本老

    2018-12-20 13:58

    环状的时间进度动不了

  • 月老本老

    2018-12-18 18:00

    太棒了!棒棒哦~!!!!!!!

  • Jessica_L

    2018-11-06 15:31

    安装包TrapcodeSuite-14.0.0 Installer和Red Giant Uninstaller显示应用程序不能打开。我的是mac

  • 柳生

    2018-10-17 15:35

    按照教程,进度条为什么没有动效

  • hyaov5@qq.com

    2018-06-26 15:42

    按照教程做出来了。很详细,只是音频那里的设置不太懂(只会按你参数填写)

  • Mister Lonely

    2018-05-21 11:47

    这就有点6了

  • 阿迁研究所

    2018-05-18 09:26

    虽然部分没看懂,但是还是觉得牛里牛气的!很赞!

  • UILEO

    2018-05-11 16:37

    @嗜睡怪人: 不需要

  • 嗜睡怪人

    2018-05-11 16:08

    提问下大神ui设计需要会3d软件吗?

  • YAOO

    2018-05-11 16:02

    给黄大大疯狂打call,请问需要粉丝吗,脑残的那种

  • 瑟瑟发抖的仔

    2018-05-10 14:38

    楼主 我时间最多走到00:04 在代码里怎么改呢 能改到03:00

  • 葛大大

    2018-05-10 13:53

    @三通啊: 没翻倍

  • UILEO

    2018-05-09 13:55

    复制这个 rate = 1; clockStart = 0; function minZero(n){ if (n < 10) return "0" + n else return"" + n }; function secZero(n){ if (n < 10) return "0" + n else return"" + n }; clockTime = Math.max(clockStart + rate* (time - inPoint),0); t = Math.floor(clockTime); min = Math.floor((t%3600)/60); sec = Math.floor(t%60); minZero(min) + ":" + secZero(sec)

  • 文仔Daniel

    2018-05-09 10:40

    @Alltoowell: 把secZero改为minZero: rate=1; clockStart=0; function minZero(n){ if(n<10)return"0"+n else return""+n }; clockTime = Math.max(clockStart+rate*(time-inPoint),0); t = Math.floor(clockTime); min = Math.floor((t%3600)/60); sec = Math.floor(t%60) minZero(min) + ":" + minZero(sec)

  • 无有设计

    2018-05-09 09:35

    感谢分享~~

  • OneBee

    2018-05-08 20:27

    大写的服 这教程很可以

  • UILEO

    2018-05-08 17:46

    听说在教程中加广告会被关小黑屋,所以经过我深思熟虑就在这加个 427626274

  • Alltoowell

    2018-05-08 13:18

    表达式错误

  • WendyPU

    2018-05-08 11:40

    你好,大神,请问有mac的AE分享嘛

  • 初遇~予你挚终

    2018-05-08 11:10

    @潇湘画生: 但凡对这三个软件有一点了解的都知道是用什么做的,多动动脑子,小朋友

  • 斯芳德拉

    2018-05-08 10:31

    插件适用ae2018嘛?无水印吧?

  • saragy

    2018-05-08 09:45

    大神,能出个视频么

  • 也墨客

    2018-05-08 09:41

    @潇湘画生: 脑子是个好东西,但凡对这三个软件有一点了解的都知道是用什么软件做的。

  • 龐偉PWDS

    2018-05-07 16:51

  • 向往那风那雨

    2018-05-07 15:08

    @潇湘画生: 额,这个当然是用AE做的啊

  • Achelous

    2018-05-07 14:47

    表示希望用汉化软件学习方便一点

  • 更多

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票