恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Sketch文件导入AE新神器-Sketch2AE
0.0°
2017-08-29 原创文章 经验/观点 举报 31000 157 159 23

还在为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团队的神器插件。

Image title


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

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官网,完成下载。(可获取最新版本)

方法二:小编已经打包好,通过文后附件下载获取

方法三:关注公众号uibangcn,回复“Sketch2AE”(可获取更多后续教程)

Image title



安装方法

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

Image title

Sketch内安装

1.双击Sketch2AE.sketchplugin文件

2.Sketch提示安装完成

Image title


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

Image title


AE内安装
1.将Sketch2AE.jsx文件拖动到应用程序> Adobe After Effects [版本号]>脚本> ScriptUI面板中
Image titleImage titleImage titleImage title


2.重启AE
3.在AE菜单栏-窗口-最下面会看到 Sketch2AE.jsx
4.出现Sketch2AE插件窗口,将其拖拽至AE合适框架位置

Image title


使用方法

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


2.设置画板(适配画板,sketch画板大小将是导入AE后的合成大小)Image title


3.选择图层导出(可以选择特定图层,也可选择多个、全部图层)

Image title


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

Image title


两种模式

a. 拷贝选中图层(此处拷贝的颜色、坐标、尺寸等图层信息,非传统意义的复制)
b.保存为可导入AE的文件格式.Sketchae

5.打开AE中的Sketch2AE面板
Image title


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

Image title

Image title


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

Image title

6.导入设置

Image title


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

注意事项

1.对于编组的处理
sketch中的编组元素
Image title


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

Image title


2.对于组件的处理
sketch中的组件
Image title


使用sketch2AE后的状态(自动形成一个预合成)

Image title


3.对渐变的处理(转为图像)
sketch中的渐变
Image title


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

Image title


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

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

Image title

更新:2017-08-29

下载
收藏

157人已收藏

UIBANG设计教育

uibang.cn 原创UI设计教程

  • 61

    作品

  • 4594

    粉丝

  • 8

    关注

  • 苹果WWDC2019 霓虹灯效果(附视频教程与源文件)
  • 别让你的简历成为HR的“垃圾邮件” !
  • UI设计不“火”了,我还该不该学?
  • 阿里双十一APP图标设计教程

    猜你喜欢

      2017-08-29 原创文章 经验/观点 举报 31000 157 159 23

      Sketch文件导入AE新神器-Sketch2AE

      0.0°

      你确定要举报Sketch文件导入AE新神器-Sketch2AE

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      159
      157
      23

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录