准备动作

Mac:先给AE安装一个ZXP插件安装应用,拖动文件到应用就可以。PC:你用sketch你告诉我你用PC?

安装完后打开AE,然后在ZXP安装器中拖进ZXP文件(AEUX中的那个)根据指令进行安装。

动效软件三联输出流程|UI必备技能插图

安装结束后Sketch和AE中安装一个插件AEUX就可以轻松实现Sketch、AE互相联通,双击sketch插件就可以安装。

重启sketch后点开插件打开面板,鼠标选中你要做动效的界面。

当然AE也要打开对应的插件面板。

动效软件三联输出流程|UI必备技能插图1
动效软件三联输出流程|UI必备技能插图2
打开sketch的面板后

依次点击第一个和第二个按钮,然后AE这边会自动同步过来,自动新建一个一样尺寸的画板。

动效软件三联输出流程|UI必备技能插图3

接下去就可以在AE中进行动效设计了。

……

开始导出

设计完成导出设计,选择导出到渲染队列选择输出设置,会弹出一个对话框如下:

动效软件三联输出流程|UI必备技能插图4

如果有透明度的背景需要在通道中选择RGB+Alpha后导出mov格式的视频。

⚠️注意如果动效中有动效的内容是半透明的话是不能使用以上方式导出GIF图给开发的,那怎么办?接下去看。

  • 如果半透明部分的背景图是纯色的,那么可以通过更改AE中对应色块的颜色来视觉上达到半透明的效果。
  • 如果不是纯色的,那就需要开发来完成这个动效了。

接下去的工作就在PS里完成了,点击PS中的文件后显示:

动效软件三联输出流程|UI必备技能插图5

点击后选择刚才生成的Mov文件进行导入。

这里可能会出现的情况

反向帧可能会出现在批量序列帧导入的情况中,这时打开动画时间轴(窗口那边打开),右上角点击后选择反向即可。

动效软件三联输出流程|UI必备技能插图6

差不多就可以开始导出一个GIF试试看了。

​第二次导出设置

PS中点击导出:

动效软件三联输出流程|UI必备技能插图7
动效软件三联输出流程|UI必备技能插图8
PS导出设置

另外值得一说的是小技巧:

GIF压缩

在PS中可以删除相同画面帧然后延长某一帧的停留画面来达到压缩GIF大小的功效。不用害怕时间缩短后带来的变化,可以多尝试几次。

基本导出GIF的整个流程就是这样的。

感兴趣的可以来我个人WX号灵感爆米花看更多~3Q

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注