PS AE 播放器界面动效教程

PS+AE 播放器界面动效教程

小胡舵主09.07 20:07阅读21454

作者：@小胡舵主 如有不足，欢迎指正

先来看一下效果图

imgLoading

iiiiiiiiii

主要知识点：

1.UI基本规范

2.PS、AE的搭配使用

3.AE中预合成、蒙版、编号、发光、音频频谱等操作

iiiiiiiiii

练习分为PS、AE两部分，首先我们在PS中做好界面，在这里我用的是iPhone 6的尺寸750*1334。详细的尺寸如下，对IOS规范不明白的同学戳  IOS规范参考

开始做之前一定要拉好参考线，这里我用的是插件GuideGuide,链接戳  GuideGuide插件 

imgLoading

PS部分

1. 首先选好图片拉进PS，滤镜-模糊-高斯模糊，这里我给的40，具体看照片来定。因为图片太亮这里我加了一个70%黑色图层在上面 ，具体根据整体效果调整

imgLoading

2．接下来制作中间的歌手展示的地方，把背景图片复制一层，调整好大小，拉到图层顺序最上面，去掉高斯模糊。

imgLoading

3.   然后新建一个矩形 534*470。把矩形放到图片下面，并给图片添加剪贴蒙版。完成后选中这四个图层，编组命名为背景。

imgLoading

imgLoading

4. 接下来制作图标， 这里的图标是用AI制作，也可以戳网址下载

图标需要注意尺寸一致，且一般都是偶数。图标风格统一。

全套 IOS UI 控件     矢量图标合集

imgLoading

5.  制作图标时一定要注意尺寸，这里导航栏的图标是44*44PX，下面图标根据个人需要调整。图标风格要保持统一，  完成后编组命名。

6. 接下来制作进度条部分。

白色进度条  718 x 4 PX矩形  圆角2px   #d5d6d5

绿色进度条  234 x 4 PX矩形  圆角2PX   #4e9439

绿色进度点  30 x 30 PX椭圆             #56a33f

7.完成之后将图层编组，到这里PS部分就完成了，其余的我们在AE中完成。

这里记得新建一个文件夹将PS文件和后面的AE文件放一起，否则移动了素材AE就显示不出来咯

imgLoading

AE部分

1.打开AE，点击 文件-导入-文件，记得勾选合成-保持图层大小

imgLoading

imgLoading

2.导进来是这样子的，双击音乐播放器打开，可以看见我们在PS中的分组。

imgLoading

3.首先我们来做进度条的变化以及下面时间的跳转。双击进度，进入预合成，会看到进度的三个图层。选中 进度点 图层，按大写的P调出位置属性。

imgLoading

4.在位置前的小码表点一下K一个关键帧，然后将时间线往后拉到4S，将进度点调到后面一点点，自动生成第二个关键帧。左右拉动时间线，就可以看到进度点小球向右移动。

imgLoading

5.选中绿色进度条，点击下拉小三角，选中蒙版下的蒙版路径属性，在进度点第一个帧的位置点击秒表K一个关键帧。

imgLoading

6.将时间线拉到4S的位置，选中转换点工具，框选住绿色进度条右边的几个锚点，水平往右拉到进度点的位置

imgLoading

7.  此时拉动时间线，会发现小球和进度条一起往右移，接下来新建两个文字图层，放在进度条下面。右边是歌曲总时长，左边用来做时间进度。

imgLoading

8.在 效果与预设窗口搜索 编号，并拖到左边的时间图层 

imgLoading

9.在效果控件窗口调节数值

imgLoading

10.将时间线拉到开始的地方，点击数值前面小码表K一个帧，再将时间线拉到4S的地方，将数值改为158，拉动时间线，就会发现时间随着进度条跳转啦。

imgLoading

11. 回到音乐播放器合成，进入背景预合成 用文字工具添加上歌名与歌手

imgLoading

12.回到音乐播放器，新建文字图层，添加歌词进去

imgLoading

13.  右键歌词图层，转化为预合成，命名为歌词。进入歌词预合成后，选中图层，按大写P调出位置属性。在开始的时候K一个关键帧，然后将歌词按设定节奏移动位置。 

imgLoading

14.回到音乐播放器，拉动时间线，此时歌词滚动效果已经出来了。接下来右键 歌词 层，点击蒙版-新建蒙版。然后将蒙版大小调整一下 

imgLoading

15. 选中蒙版路径，右键点击  蒙版-蒙版羽化，水平数值20PX

16.接下来在图层面板空白处 点击右键，新建-调整图层

17.右键调整图层，点击 蒙版-新建蒙版，然后调整蒙版路径对准歌词行，并给蒙版添加10PX的羽化

imgLoading

18.在效果预设窗口 搜索 发光，并拉到调整层，设置如下

imgLoading

19.  接下来制作音浪的效果。首先网络下载一个音频文件，直接拖进项目面板，然后拖进背景预合成。

imgLoading

20. 然后新建一个纯色，命名为音浪，颜色设置成音浪的颜色，右键添加一个蒙版，大小如下

imgLoading

21.  接下来在效果中搜索音频频谱 并拉到音浪图层，具体参数根据歌曲调节。如果颜色过亮可以按T调一下透明度

imgLoading

22..音浪效果调好后复制一层，命名为音浪2 ，将音浪2中的音频频谱 颜色稍微调亮，最大高度增加400左右，显示选项 改成模拟频点。到这里效果就完成拉。

23.保存的时候可以使用 文件-收集文件 就可以把这个案例所有的素材和文件都保存在一个文件夹啦

教程就到这里，如有不足，欢迎各位指正，更多教程请关注我还有亲爱的@优设基础训练营@优秀网页设计