交互动效教程--信息卡片动效

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

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

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

  一.使用软件 Sketch 5.7   Ps CC2018   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度)

           这样一个卡片的效果 就这样制作完成了,自己可以慢慢研究一下,毕竟自己实际操作的话收获更多.

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

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

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

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

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

      

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

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

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

     3. 我们进入预合成

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

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

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

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

   五.最后福利

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

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

    

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

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

     

      告别ps的卡顿~~~~~

      最后附上源文件下载,各位看官谢谢啦~~~~

      有什么问题可以问我~~~~

      苹果X样机地址:

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