欢迎登陆真网站,您的到来是我们的荣幸。 登陆 注册 忘记密码? ☆设为首页 △加入收藏
欢迎加入真幸福QQ群
电脑知识: 基础知识 网络技术 操作系统 办公软件 电脑维修 电脑安全 windows7 windows8 windows10 服务器教程 平板电脑 视频播放教程 网络应用 互联网 工具软件 浏览器教程 QQ技巧 输入法教程 影视制作 YY教程 wps教程 word教程 Excel教程 PowerPoint
云南西双版纳特产小花糯玉米真空包装


win10系统自定义文件资源管理器打开位置
AE常用手势小动画库
win10系统开机内存占用过高怎么办
迅雷8离线下载失败超时怎么办
win10系统怎么切换平板模
excel模板怎么制作表格并添加常用文件夹?
win10系统卸载更新设置方法
excel表格无法打开怎么办
win10开机启动项添加或移除怎么设置
win10系统IE浏览器无法上网怎么解决
AE打造手机音乐快捷界面
【 来源:网络 】【 点击:1 】 【 发布时间:2017_03_03 08:59:59 】

   这次教程主要讲解屏幕的滑动动画如何用ae来完成。

  主要的key点是:图层的alpha跟随遮罩。因此我着重讲解跟随遮罩的原理和用法

  首先给大家看一下这节教程滑动效果的效果图(动画原件我就先不讲了,有些麻烦,大家可以结合我之前的教程自行制作一下):

AE打造手机音乐快捷界面 三联

  我替换了背景画面,并且DIY了一下音乐播放的界面,很明显,这是一部音乐智能手机= =,好吧,你们不要在意这些细节,谢谢大家.....

  这里我用到了一些图片,其中大图是来自万能的网络,你们也可以找其他的风景图片,不过图片要足够大才可以,不要仅仅和屏幕一样宽,这样咱们就没法滑屏了。

  头像用了我喜欢的DJ——Quadrat Beat,你们可以找一些其他的歌手图片,有风景背景的其实最好,我这个不够小清新。

  OK,我们开始。

  首先把手机psd的图导进AE,会提示是否导入合成,点击是就可以了,这样导进的psd就会保留分层图层的信息,导入的图会分成好多原件。

  其中有个原件叫做screen,也就是咱们的屏幕图层

  (你需要点进最外层的合成,然后找到PHONE的合成,点进去才能找到)

  我们找到这个图层后,暂时先不管他,这里我们找一个大的风景图,我这里换一张图用(大图如果有版权,那么仅限学习交流,别用于商用)

  然后把这张图放在screen图层的下面,最后得到如图的效果

  接下来关键的一个步骤,我们调节风景图的track matte选项至alpha matte "screen"

  意思就是风景图层跟随screen图层的alpha遮罩,结果就是只要在screen的覆盖下的地方就会置换成咱们的风景图,没有screen覆盖的地方就什么都没有。(仔细体会下)结果如图:

  这里的风景图的初始位置稍微再调一下,把风景图的X轴位置调节一下(注意不要动screen图层):

  这回好多了,再加个字幕在上面:

  我们到最外面的合成看一下整体效果

  是不是很带感了呢?

  OK!接下来我们只做屏幕被滑动后向右移动的动画。

  很简单,首先先把所有的字幕放在一起并生成新的合成,方法是:shift选中所有的文字字幕图层,然后ctrl+shift+C,然后点确定

  接下来把字幕合成绑定至风景图层

  然后设置风景图层位置的关键帧动画

  观看一下效果:

  接着我们制作一个音乐界面,并且生成合成后绑定风景图层!过程跟字幕合成的绑定一样,只不过绑定的位置要设置好,在风景图层运动的最后一帧绑定!

  再次预览效果:

  最后一步了,再坚持一下!

  把字幕合成组和界面合成组都按照之前的风景图的方式对screen进行alpha matte的跟踪遮罩,由于只有一个screen,因此我们需要复制另外两个,然后分别放在界面合成和字幕合成的上面,然后再调节选项。

  最后预览最终效果!

  这个是比较简单的滑动动画,至于每个原件的动画我并没有一一制作,需要大家打开脑洞举一反三了~这里主要讲解如何利用psd来制作滑动界面的动画,当然可能实现这一效果有其他的方法,你们自行考量,哪个简单就用哪种!

  下次的教程会告诉大家如何利用ae的摄像机实现3D的透视视角,并且适当加入摄像机的景深,使画面更加有层次感,UI界面神马的还是倾斜着看比较高大上!

  不是吗???

本网站由川南居提供技术支持,fkzxf版权所有 浙ICP备12031891号
淳安分站 淳安分站