先来看一下效果图
主要知识点:
1.UI基本规范
2.PS、AE的搭配使用
3.AE中预合成、蒙版、编号、发光、音频频谱等操作
练习分为PS、AE两部分,首先我们在PS中做好界面,在这里我用的是iPhone 6的尺寸750*1334。详细的尺寸如下,对IOS规范不明白的同学戳 IOS规范参考
开始做之前一定要拉好参考线,这里我用的是插件GuideGuide,链接戳 GuideGuide插件
PS部分
1. 首先选好图片拉进PS,滤镜-模糊-高斯模糊,这里我给的40,具体看照片来定。因为图片太亮这里我加了一个70%黑色图层在上面 ,具体根据整体效果调整
2.接下来制作中间的歌手展示的地方,把背景图片复制一层,调整好大小,拉到图层顺序最上面,去掉高斯模糊。
3. 然后新建一个矩形 534*470。把矩形放到图片下面,并给图片添加剪贴蒙版。完成后选中这四个图层,编组命名为
背景。
4. 接下来制作图标, 这里的图标是用AI制作,也可以戳网址下载
图标需要注意尺寸一致,且一般都是偶数。图标风格统一。
全套 IOS UI 控件 矢量图标合集
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就显示不出来咯
AE部分
1.
打开AE,点击 文件-导入-文件,记得勾选合成-保持图层大小
2.
导进来是这样子的,双击音乐播放器打开,可以看见我们在PS中的分组。
3.首先我们来做进度条的变化以及下面时间的跳转。双击进度,进入预合成,会看到进度的三个图层。选中 进度点 图层,按大写的P调出位置属性。
4.在位置前的小码表点一下K一个关键帧,然后将时间线往后拉到4S,将进度点调到后面一点点,自动生成第二个关键帧。左右拉动时间线,就可以看到进度点小球向右移动。
5.选中绿色进度条,点击下拉小三角,选中蒙版下的蒙版路径属性,在进度点第一个帧的位置点击秒表K一个关键帧。
6.将时间线拉到4S的位置,选中转换点工具,框选住绿色进度条右边的几个锚点,水平往右拉到进度点的位置
7. 此时拉动时间线,会发现小球和进度条一起往右移,接下来新建两个文字图层,放在进度条下面。
右边是歌曲总时长,左边用来做时间进度。
8.
在 效果与预设窗口搜索 编号,并拖到左边的时间图层
9.在效果控件窗口调节数值
10.将时间线拉到开始的地方,点击数值前面小码表K一个帧,再将时间线拉到4S的地方,将数值改为158,
拉动时间线,就会发现时间随着进度条跳转啦。
11. 回到音乐播放器合成,进入
背景预合成 用文字工具
添加上歌名与歌手
12.
回到音乐播放器,新建文字图层,添加歌词进去
13. 右键歌词图层,转化为预合成,命名为歌词。进入歌词预合成后,选中图层,按大写P调出位置属性。在开始的时候K一个关键帧,然后将歌词按设定节奏移动位置。
14.回到音乐播放器,拉动时间线,此时歌词滚动效果已经出来了。接下来右键 歌词 层,点击蒙版-新建蒙版。然后将蒙版大小调整一下
15. 选中蒙版路径,右键点击 蒙版-蒙版羽化,水平数值20PX
16.接下来在
图层面板空白处 点击右键,新建-调整图层
17.
右键调整图层,点击 蒙版-新建蒙版,然后调整蒙版路径对准歌词行,并给蒙版添加10PX的羽化
18.在
效果预设窗口 搜索 发光,并拉到调整层,设置如下
19. 接下来制作音浪的效果。首先网络下载一个音频文件,直接拖进项目面板,然后拖进背景预合成。
20. 然后新建一个纯色,命名为音浪,颜色设置成音浪的颜色,右键添加一个蒙版,大小如下
21. 接下来在效果中搜索
音频频谱 并拉到音浪图层,具体参数根据歌曲调节。如果颜色过亮可以按T调一下透明度
22..音浪效果调好后复制一层,命名为音浪2 ,将音浪2中的音频频谱 颜色稍微调亮,最大高度增加400左右,显示选项 改成模拟频点。到这里效果就完成拉。
23.保存的时候可以使用 文件-收集文件 就可以把这个案例所有的素材和文件都保存在一个文件夹啦
教程就到这里,如有不足,欢迎各位指正,更多教程请关注我还有亲爱的@优设基础训练营@优秀网页设计