当前位置:首页>ps入门教程>动图教程>动画教程>教程内容

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面(5)

来源:公众号 作者:野鹿志 学习:32467人次
@野鹿志:

本篇教程通过PS加AE结合做一个“山寨”的网易云音乐播放界面,经常听歌的同学们手机里一定有很多听乐音的APP,其中网易云音乐可谓是众多听歌软件中的一股清流,清新的操作界面,甩众软件八条街的用户体验(网易云音乐打钱),不夸了,没钱,本篇教来一个“山寨“版的操作界面,教程步骤比较长,操作有一定的难度,感兴趣的同学们一起来挑战一下吧。

效果图:

 播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

所用素材:http://pic1.16xx8.com/allimg/180105/16xx8.rar

操作步骤:

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com
www.16xx8.com

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

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

ctrl+t自由变换,鼠标右键选择透视:

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

接着画杆吧,两个圆形,一个灰色一个白色:

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

再画两个圆角矩形:

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

给大圆添加外发光:

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

杆画完以后打个组,统一加一丢丢投影:

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

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

然后加点文字之类,最后大概这个样子:

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

选中进度条对象组:

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

将椭圆隐藏:

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

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

当然,前提是你得先把Adobe Media Encoder安装上:

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

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

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

最后来看看效果吧:

 播放器制作,用PS加AE制作一个“山寨”网易云音乐播放界面_www.16xx8.com

本文由“野鹿志”发布

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

私转必究
 

满满的技术含量啊,同学们可以做成功的话当然是棒棒的,慢慢积累,所有都是由不会到会的。

野鹿志

作者公众号:

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
刘一芊2018-01-29 02:33
在这里学到好多东西
流恋你的笑2018-01-28 11:56
这里就是ps教程论坛?
蜜枣枣free2018-01-28 07:20
好喜欢这个网站
小莹妮2018-01-28 12:19
在这里学到好多东西
角落里的寂静2018-01-28 09:28
那一年,我9岁,她11岁,我告诉她将来要娶她,她也很调皮的回答我:好啊! 那一年,我14岁,她16岁,她高我一头,我抬着头说我喜欢她,她怔怔听着,没 说话,便转过头去,不再望我,那一年,我18岁,她20岁,我已经在工地扛水泥 一年了,她还上着重点大学,我再也说不出口我喜欢她,因为我觉得自己根本配 不上她,我把想对她说的话,留给了自己,等我配上她的时候,再全部告诉她, 后来四年里,我再没有机会见过她,听说她已经工作了,我更关心的是,她是否 已为人妻,已为人母,我的事业渐渐走向正轨,我学会了开挖掘机,然后承包了一块地,也算一个小承包商,承包一些工 地,再也不为钱所窘迫,当我再次见到她时,是在东莞,昏黄的房间,只有我们 两个人,沉默了良久,她开口了:八百,看你是熟人,就收你五百。我尽量让自 己不再颤抖,我说:跟我走吧,她目光呆滞了一下,随即闪烁了一下,然后又像 一团火熄灭了一样,说:我配不上你,我只是一位小姐,我还有客人,没什么事 ,我先走了。她就匆忙的离去了,后来,我在电视上看到了她,她被两名民警押 着,一脸惊恐与不堪,电视甚至没有给她遮住脸,任由她在我面前晃着,任由她 在我心中撞着、撞着、直至粉碎,最后一次见她,是她找我去的,当时她在楼顶 ,我在楼下抬头望她,像我当年告诉她,我喜欢她时一样,电话里她说:我得了 重病,没法治了,你别担心,临走之前我只想问你:曾经你真的爱过……我么…… 我哭着说:是 她说:那。。那。。你能告诉我,当年你在哪里学的挖掘机,挖掘机学校到底那家强? 我轻声的告诉她:中国山东找蓝翔!
小黑的春天是我2018-01-28 08:29
好教程
原来只是个童话2018-01-28 08:26
好东西
毕业伤2018-01-28 05:52
太喜欢这里了

关注大神微博加入>>

网友求助,请回答!