Ps野教程│Ae初体验 用Ps+Ae山寨一个网易云音乐播放界面吧！

嘛~主要是我最近没有找到合适的Ps题材。

倒不是没有童鞋问过Ps方面的问题，只是大家知道野郎作图是属于兴趣使然。

自己觉得好玩，才会感兴趣，感兴趣才会去好奇，才会去研究学习。

例如野郎一直很喜欢使用的音乐App网易云音乐：

它的这个唱片我就非常喜欢。（ps：大爱万能青年旅店！）

所以今天我们就用Ps来制作一个网易云音乐App播放界面的样机，并且首次尝试用Ae让它动起来吧！

新建画布，可以选用预设好的尺寸，我这里就选择1080*1920：

为了方便观察，先随意的填充一个颜色，然后先画唱片吧。

在合适的位置先画一个黑色的正圆：

然后双击调出图层样式，选择径向渐变，渐变类型选择为杂色，粗糙度大家可以看着调。

然后将RBG左侧的三个滑标移到最右边并且勾选选项中的限制颜色和增加透明度：

点击随机化，选择一个自己觉得比较合适一点的纹路，然后降低渐变的不透明度：

再给唱片来点质感吧，选择形状工具，把圆形的填充色改为渐变。

至于渐变色大家其实可以凭自己的感觉来，我这里是选择的从000000到1d1b1b到000000到1d1b1b再到000000的渐变，角度试着来：

再画高光，形状工具画一个透明到白色到透明的矩形：

ctrl+t自由变换，鼠标右键选择透视：

将矩形变换成如图交叉的形状，并且调整其整体的位置：

将其转为智能对象以后，执行滤镜-模糊-高斯模糊，参数大家看着办：

再将混合模式改为柔光，这样高光的样式基本上也就做好了：

把他们打个组，将之前的圆形复制出来一份拖到组的外面，并且在图层面板上鼠标右键-清除图层样式：

ctrl+t自由变换缩放到合适的大小：

接着就是制作样机部分了，拖入CD封面素材，将其转为智能对象：

将其复制2份出来，1份隐藏，另外一份拖到背景层的上面：

背景层上的CD封面ctrl+t变换其大小，然后执行滤镜-模糊-高斯模糊，参数大家看着办吧：

你想和原图一样给背景再调色搞暗点也可以，我这里偷懒就不调了。

然后把红色方框出的封面对下方的圆形创建剪贴蒙版：

再将最上方的专辑封面更名为样机按钮，并将不透明度和填充度改为0，这样样机部分就做好了：

可以测试一下，双击样机按钮，更换一张图以后，ctrl+s保存：

再回到原psd文件上看看，封面和背景就已经被替换了：

查漏补缺一下，原图唱片应该还加了个外发光：

接着画杆吧，两个圆形，一个灰色一个白色：

再用钢笔工具画杆，不赘述了，注意描边大小：

再画两个圆角矩形：

接下来添加一些细节，给杆以及两个圆角矩形添加图层样式-斜面与浮雕，参数大家看着来：

给大圆添加外发光：

再画两个装饰，方法不赘述啦，实在不会看源文件吧：

杆画完以后打个组，统一加一丢丢投影：

大体就差不多了，剩下的一些图标想画就画吧，不想网上找图标也可以。

Ps画确实太麻烦了点，所以我是用Ai画了拖进去的，不过画的也不怎么样。

然后加点文字之类，最后大概这个样子：

因为我们后面要做动图，这里的进度条组先复制出来一个，后面会用到：

接下来打开Ae，把psd文件拖进去，选择的类型如图：

大家知道，野郎的老牛机能力有限，我们就暂定把视频动画都设置为4秒吧。

在项目面板里找到唱片底座，然后选中高光，在变换里选中旋转，然后鼠标右键添加关键帧：

将滑标移动到4秒的位置，然后将旋转的角度改为360度旋转一周，高光如果你觉得过于明显可以调整它的不透明度噢:

同理在项目面板里找到网易云，然后把cd封面旋转一周，这里就不赘述了：

接下来双击红色方框出的进度条拷贝组：

选中椭圆对象，点击变换-位置添加关键帧，调整好关键帧的时间后，用移动工具将椭圆移动到进度条的最右边：

再选中矩形对象，在效果和预设里搜索填充，然后修改一个填充色：

然后选中矩形对象中的变换-缩放，分别在0秒和4秒的地方打上关键帧，把0秒关键帧的缩放数值改为0：

选中进度条对象组：

将椭圆隐藏：

这样基本上就搞定了，过程中你可以不断的预览效果，以免出错。

把它直接成gif格式吧，选中对象以后，执行合成-添加到Adobe Media Encoder队列。

当然，前提是你得先把Adobe Media Encoder安装上：

启动Adobe Media Encoder后，稍等片刻队列中就会出现你的对象了，点击红色方框处：

将格式改为动画gif，然后你可以修改自己想要导出的尺寸和时间，点确定：

再来点击红色方框出的图标渲染即可：

这里野郎只是分享一下Ae直接导出gif的方法，不过这种导出来的gif通常体积都很大。

我是选择的导出视频以后再用Ps创作帧动画的方式弄的。

最后来看看效果吧：

手贱又把它弄长了点加了点音乐，老牛机还是挺争气的：

好了，今天的分享就到这里。

第一次用Ae搞视频，只能弄些简单的动画，尺寸好像弄得不太好，不管啦！

等老牛机升级以后再慢慢研究吧！

想要练习的童鞋后台撩我获取所有源文件吧！

本文由“野鹿志”发布

转载前请联系作者“马鹿野郎”

私转必究

Keep Curiosity Keep Learning

公众号ID：yeluzhi666

微信ID：maluyelang666