Sketch文件导入AE新神器

Posted 2021-04-26 UIBANG

✎ ✎ ✎

教程贡献/ 乔帮主

编辑/ UIBANG 小咖

       近些年，作为后起之秀的 Sketch 无论是身材（安装文件 20.4M ），还是技术（专注于界面设计），征服了大量的 UI 设计师与网页设计师。已然撼动的原有PS、AI 两兄弟的垄断地位，越来越多的 UI 设计师开始使用 Sketch 完成项目设计，这让 Adobe 爸爸有些尴尬了。虽然我们在新版的 CC2017 看到了针对 UI 设计师的新功能亮点，但是几个 G 的庞大身躯始终没有像 Sketch 那样灵活方便。

       另一方面随着 Sketch 的不断更新，一些优秀的交互动效软件也雨后春笋般的出现。例如 Flinto 和 Principle 都受到很多设计师和交互小伙伴的认可，除了自身的优秀，和 Sketch 完美的结合也是非常重要的一点。AE 作为动画动效的元老，貌似也要接受这个挑战了。

       AE 在绘制常规的动画效果上非常强大，但是涉及到UI 界面设计上的交互动画就显得有些力不从心了（只能看不可操作），不过我们也要理解，AE 的强项并不是做交互动效，为此 Adobe 爸爸才搞出一个小儿子 XD。不过在实际项目中依然有使用 Sketch 绘制的源文件，导入到 AE 去做动效的需求，所以才会有今天的主角Sketch2AE ，一个来自 google 团队的神器插件。

▼

官方网站（打不开或很慢的同学可能要用梯子）

https://google.github.io/sketch2ae/

作者 Adam Plouff

http://www.battleaxe.co/

在正式介绍 Sketch2AE 前，要感谢一下国内设计师 BigXiXi ，他在早些时候也发布了同类（同名）插件，也是十分优秀，现在更新至 2.02 版本，感兴趣的小伙伴也可以看一下。

https://github.com/bigxixi/SKetch2AE/blob/master/README_zh.md

OK ，前面说了这么多，那我们开始正式的介绍下这款 Sketch2AE 插件吧。

我们先来看看官方的视频演示吧

▼

——————————————————

插件功能

解决 Sketch 文件分层导入 AE 完成动效设计

获取方法

方法一：登录 Sketch2AE 官网，完成下载。（可获取最新版本）

安装方法

下载解压后可得到以下文件

Sketch 内安装

1、双击 Sketch2AE.sketchplugin 文件

2、Sketch 提示安装完成

3、在 Sketch 插件中可查看到 Sketch2AE

AE 内安装

1、将 Sketch2AE.jsx 文件拖动到应用程序 > Adobe After Effects [版本号]>脚本> ScriptUI 面板中

2、重启 AE

3、在 AE 菜单栏-窗口-最下面会看到 Sketch2AE.jsx

4、出现 Sketch2AE 插件窗口，将其拖拽至 AE 合适框架位置

使用方法

1、将你需要做动效的文件，复制到新的 Sketch 文件（因为每人的 Sketch 复杂程度不同，所以建议独立创建动效画板，方便后期操作。）

2、设置画板（适配画板，Sketch 画板大小将是导入AE 后的合成大小）

3、选择图层导出（可以选择特定图层，也可选择多个、全部图层）

4、在 Sketch 菜单栏-插件-Sketch2AE

两种模式

a、拷贝选中图层（此处拷贝的颜色、坐标、尺寸等图层信息，非传统意义的复制）

b、保存为可导入 AE 的文件格式 .Sketchae

5、打开 AE 中的 Sketch2AE 面板

红色为粘贴上一步拷贝的图层信息

蓝色为打开之前保存的 .sketchae 格式文件

6、导入设置

通过拷贝粘贴来的 Sketch 图层信息，可以创建一个新的合成来显示（当然你也可以不适用）。并且我们可以很轻松的完成分辨率的设置（因为设计师在 Sketch 设计时往往是 1 倍图，所以导入 AE 时需要放大至 2 倍 3 倍提高清晰度）

注意事项

1、对于编组的处理

Sketch 中的编组元素

使用 Sketch2AE 后的状态（在保留组内元素的同时，会创建一个分组图层作为编组的范围，默认为隐藏）

2、对于组件的处理

Sketch 中的组件

使用 Sketch2AE 后的状态（自动形成一个预合成）

3、对渐变的处理（转为图像）

Sketch 中的渐变

插件现在的版本还无法完成对 Sketch 中渐变的编辑，只能转成常规的图像模式。

——————————————————

Sketch2AE 这个插件现在还不是一个正式的版本，难免有些问题。不过能实现现在的强大功能已经非常强大了。如果各位想查看插件具体支持 Sketch 哪些属性，可以查看官网。

UIBANG 乔帮主今天给大家分享的就这么多吧，希望这个 Sketch2AE 插件可以越做越好。我们也会继续帮助小伙伴们共同学习，提供更优质的教程。

UIBANG 线下培训

授课地点：上海普陀区交通路

课程周期：14 周，周一～周五，9:30 至18:30

（全苹果精品班使用学校的IMAC 电脑）

咨询微信

喜顺老师：13918569267

小咖老师：17321259267 

往期回顾

… … … … … … … … … … … … … … … …

网    址：uibang.cn

  QQ   群：456195174