还有一种方法是，先将 Sketch 中选中的图层保存成 _SketchExport.sketchae 文件，然后经由过程 AE 中的打开 .sketchae 情势进行导入：

编者按：今天推荐两个神器，一个是谷歌设计团队开辟的Sketch2AE，可以帮你一键导入AE动效，一个可以让你在 谷歌浏览器 上异常便利地查看网页标注样式的扩大插件，赶紧来体验！

Sketch2AE

跟着 Sketch 日益普及，越来越多的 UE 设计人员已然将日常设计对象由 Photoshop 改成了 Sketch，因为 Sketch 轻量、高效、插件扩大丰富。

然则对于动效来说，跟 Sketch 浇忧⒚较好的 Principle 跟 AE 比起来照样略逊一筹，如许导致你在 Sketch 中做好的界面还须要导出图片才能够在 AE 中应用，而为懂得决这个问题，Google 设计团队推出了 Sketch 一键导入 AE 的插件——Sketch2AE，先让我们看看官方的一个小预览视频：

大年夜视频中可以看到，导入流程异常顺酣畅捷，并且分层很清楚完全，之后我下载官方包进行了安装，双击 Sketch 插件安装，并且将 Sketch2AE.jsx 文件放入 Applications/Adobe After Effects/Scripts/ScriptUI Panels 之后就能正常调用插件面板了。

接着进入 Sketch，打开本身做的一个小演习，尝尝看导入是否同样顺畅：

（动图1/2）

实际体验起来确切很流畅，并且图层分别很完全，异常不错。

不过 Google 团队同样提示了几个须要留意的点，让我们一路看看：

最好将想要导入 AE 的画板放到新建文件里，简单懂得起来就是因为导入算法须要遍历文件里的

• Symbols 等各类元素，如许会大年夜大年夜缩短导入时光。
• 须要在 Sketch 中就设置好画板（Artboard）的尺寸，因为这会限制导入 AE 后的实际尺寸。
• 经由过程选择 Sketch 图层的方法可以选择性导入 AE 中，或者直接选择画板本身进行导入。
• 导入 AE 的方法可所以复制图层数据或者打开 .sketchae 文件。
• 导入时可以选择 1x／2x／3x 的尺寸。

总的来说，这真的是一个异常赞的插件功能，感激 Google Design Team 再次对设计师们作出的供献，感兴趣的同伙可以本身研究应用一下。传送门： Sketch2AE 官网

迎接存眷作者的知乎专栏： Sketch 与 UE 设计知若干

网页样式标注Chrome扩大

网页设计师平日会应用Chrome或firefox这两款浏览器，为什么？不仅仅是因为好用，而是为了应用按F12出现的「查看网页元素」这个Web开辟者对象，然而这个对象真的没代替品吗？有的，Visual Inspector 这个视觉查看器就相当好用，建议设计师们去尝尝。

Visual Inspector 是 Chrome 的一个扩大，它可以便利的查看页面的 字体、色彩、盒子模型、及元素间的间距标注 等等，满是 视觉化展示 ，这比代码展示情势的F12对象更易不雅看，是网页设计师必备帮助对象之一。

• 扩大名称：Visual Inspector
• 扩大主页： https://www.canvasflip.com/visual-inspector/
• 安装扩大几回梯子）： https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en

查看/修改样式、标注

点击「INSPECT」按钮（第2个）可以及时查看选中元素的盒子模型、样式以及与其它元素的标注，尤其是查看邻元素的间距标注功能，这个相当好用。并且， 除了查看还可以及时修改！

色彩

点击第3个搁笔（水滴icon）可以查看当前网站样式的所有色彩。

图像查看竽暌闺导出

这个就实用了，如不雅一些网站禁止右键复制图像，那么这功能就可以很便利的将其导出来。我们只须要点击第4个相机按钮，就可以想看当前页面的所有图片，并可以零丁导出来哦！

有了这个，是不是可以不消F12了？非也，F12还有很多强大年夜的功能，只是作为设计师很罕用到。所以结合Visual Inspector二者互响应用会更好。

固然我有100种办法我可以扣出网页的图片，但这个对象实袈溱太便利了！

值得应用的来由

 1/2    1 2 下一页 尾页

　　推荐阅读

　　Google新技术ARCore，要让一亿人抓起手机玩增强现实

Expeditions 的生物学课程：染色体至于它的应用处景，异常多样，可以用来展示家具、加强实际游戏，或者餐馆点菜的时刻直接在你盘子里展示菜品长什么样之类的……很多新技巧都>>>详细阅读

本文标题：神器两连发！谷歌出品的Sketch2AE+视觉化查看网页样式及标注的扩展

地址：http://www.17bianji.com/lsqh/37030.html

 1/2    1