动效软件三联输出流程｜UI必备技能

wy168

准备动作

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

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

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

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

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

打开sketch的面板后

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

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

……

开始导出

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

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

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

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

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

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

这里可能会出现的情况

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

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

​第二次导出设置

PS中点击导出：

PS导出设置

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

GIF压缩

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

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

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