我也是在dribbble感觉这类的动效很酷，然后我也自己研究了一下出了一个简单教程

  希望你们能看完！然后源文件在底部的素材下载中，可以研究研究~~

  整个过程自己可以实际操作好点.什么问题欢迎大家私信我~~~

一.使用软件

    （1） Sketch 5.7   

    （2） Ps CC2018 

    （3） AE 2018

二.重要步骤解析

       (1) 创建基本形状创建

       (2) 基本动态效果调整(原理其实很简单,全程用了ae的五大基本属性.)

  三.开始制作(简单粗暴直接上图)

    (1) 在sketch上面 创建一个画板,大小随意(我这里设置的为1600x1200),主要是为了方便传追波等网站,将自己需要的模块,导出为图片.

     (2) 将素材全部导入AE中,并且在合成窗口处全部整理好.

        帧速率设置: 25

        持续时间: 10s 预设

        画板大小: 375x812 (这里是苹果x的一倍图尺寸,后续我们会动销包装的)

    (3) 现在需要我们做的就是抠帧了(利用的是位置)

        先调节--按钮的效果---(利用的是缩放的属性--缩小放大的过程)

        这里缓动和运动模糊是我做完后调整的,开始做的时候并不需要.

        这里我只是做了一个动销卡片的运动过程,剩下的可以自己摸索,过程其实蛮简单

        自己慢慢拆解的话,对于有AE基础的人来说,应该没有什么问题.

   (4)卡片信息的动销制作,这一步比较关键.(利用的是位移+翻转),我们需要将图层的3D属性打开,这里将每个卡片的信息依次排列,每个卡牌的位置自己可以调整,主要就是沿着X轴卡片的翻转的角度(我这里设置是的-65度).

   (5) 将其他的信息卡片全部隐藏, 第4s位置,设置一个帧,为了过渡一下效果(卡片的全部属性不变)

       (6) 第5s位置,之前不透明度设置了一个关键帧也是为了过渡效果(之前的属性不变),第5s位置,卡片消失---变化的关键帧不透明(100到0的变化)+位置+旋转角度(这里变化的数值为0到-75度),这样一个卡片的效果 就这样制作完成了,自己可以慢慢研究一下,毕竟自己实际操作的话收获更多.

           源文件文章最后有,有需要的大家可以自己下载一下  

    (7)最顶层的蓝色卡片已经调好了,现在把其他的剩余卡片打开,这时候我们只需要错帧就可以了,因为其他卡片我们之前就已经调节好沿着X轴旋转的角度,这时候只需要错帧,位置属性变化即可~~~

 四.最后我讲一下动销包装

      (1). 这里我自己找的样机,在ps自己处理了一下

        将位置 颜色改变了(有需要的可以在文章中下载)

        我们导出为透明背景,画布大小为1600x1200尺寸(为了方便我们在ae中修改)

    (2). 将素材导入ae中 ,文件设置为可编辑图层

        ctrl+Y创建 尺寸为1600x1200的纯色背景

        将我们之前做好的苹果x的视频和 样机ps文件一起导入,并且将两个文件预合成.

     (3). 我们进入预合成

         给苹果x 视频图层添加父子关系,给样机图层添加位置属性关键帧(缓动和运动模糊一定要在动销最后添加).

         然后我们给苹果x图层---添加效果---扭曲----边角定位(边角定位可以点击那个十字箭头自行添加改变的位置,以自己实际操作为准).

         然后我们在苹果样机 上面添加跌落的位置关键帧(位置关键帧我这里是2s到7s 这样有一个缓慢跌落的过程)

         最后添加渲染. 整个过程需要自己慢慢尝试.

五.最后福利

    1.视频导出gif 自己的ps 很卡怎么办?(只针对Mac用户)

      答案: Mac 视频转gif软件 Gifski 软件 (整个软件的好处是你可以自己设置尺寸大小和质量)

    2.如果导出gif文件大了,怎么办?

      答案:小黄鸭(PPduck3软件) 安排上.这个软件最后再帮你智能压缩一下.完美的gif 就出来了.

苹果X样机地址:

      链接:https://pan.baidu.com/s/1sCbBDr9VEeYEwWyLHC2Zqw  密码:pmwv

      告别ps的卡顿~~~~~

      最后附上源文件下载,各位看官谢谢啦~~~~给个双击么么哒~~~~

Powered by Froala Editor