恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
AE教程:音乐界面动效设计
0.0°
2018-05-13 原创文章 教程 举报 15708 379 437 35

课前准备


今天我们就来用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中的项目,拖入合成中进行排版,如下图:




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


调整颜色,加上质感

依次添加


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


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


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




按照之前的步骤添加到




完成调整颜色后的效果





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




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

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









微信公众号:LEO的Blender的课堂

更新:2018-05-13

收藏

379人已收藏

UILEO

微信:hjj199394

  • 103

    作品

  • 2w

    粉丝

  • 4

    关注

  • 【建模教程】万万没想到就学了小火箭,我的Blender就入门
  • 【Blender教程】万圣节南瓜头零基础教程
  • 顶配M1 Max渲染到底有多强?来看一看和3090的实测对比
  • 现阶段应该学习Blender还是Cinema 4D
相关标签

    猜你喜欢

      2018-05-13 原创文章 教程 举报 15708 379 437 35

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

      0.0°

      你确定要举报AE教程:音乐界面动效设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      437
      379
      35

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录