提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
还在为Sketch导入AE不兼容而苦恼吗?UIBANG乔帮主推荐一款神器Sketch2AE (Google团队出品)
近些年,作为后起之秀的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
在正式介绍Sketch2AE前,要感谢一下国内设计师BigXiXi,他在早些时候也发布了同类(同名)插件,也是十分优秀,现在更新至2.02版本,感兴趣的小伙伴也可以看一下。https://github.com/bigxixi/SKetch2AE/blob/master/README_zh.md
OK,前面说了这么多,那我们开始正式介绍Sketch2AE这款插件吧。
我们先来看看官方的视频演示吧(开头视频)
插件功能
解决Sketch文件分层导入AE完成动效设计
获取方法
方法一:登录Sketch2AE官网,完成下载。(可获取最新版本)
方法二:小编已经打包好,通过文后附件下载获取
方法三:关注公众号uibangcn,回复“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插件可以越做越好。我们也会继续帮助小伙伴们共同学习,提供更优质的教程。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册