sketch 将动图转换为json_你竟然还不知道这个设计软件——sketch

私信我或关注猿来如此呀公众号，回复：视频学习，即有机会免费领取30天视频学习资源包

大家在UI设计工作过程中，都会用到什么设计工具呢？是不是还在用PS、AI等设计软件呢？

那么，今天介绍一款神软件，如果你还不知道，那你就OUT了！那么，我现在揭晓我推荐的这款“神”软件——SKETCH!它大大的提升我的设计效率，不仅能设计网页设计，APP界面也可以用它设计哦！

关于Sketch

Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，我们同样添加了一些基本的位图工具，比如模糊和色彩校正。

我们尽力让 Sketch 容易理解并上手简单，有经验的设计师花上几个小时便能将自己的设计技巧在Sketch中自如运用。对于绝大多数的数字产品设计，Sketch 都能替代 Adobe Photoshop，Illustrator 和 Fireworks。

01

画布

Sketch 的画布尺寸是无限的，可以向任意方向无限延伸，你将拥有绝对的自由来规划自己的创作区域。

如果你想在画布中设置一个固定的画框，你只需新建一个或多个新的画板。举个例子，设计移动应用界面时，很多设计师会为应用的每一个屏都创建一个画板，然后排列开来以便查看。

你可以用无限精准的分辨率无关模式来查看画布，或者打开像素模式来查看每一个像素导出成JPG或者PNG文件后的样子。值得注意的是，有些效果——比如模糊——会自动将画布的一部分以像素模式显示，因为模糊本身就是一个基于像素的效果。

02

检查器

右侧的检查器能让你对正在编辑的图层——有时是正在使用的工具——进行参数调整。当你选中一个图层时，你会发现检查器被划分为几个区域。

03

通用属性

通用图层式样都在顶端区域：图层所在位置，透明度，混合模式以及几个特殊选项——比如调整矩形内角半径和多边形的不同点模式。

04

样式属性

边框和填充属性都有他们独自的区域，你可以勾选左上方的小方框展开他们，并显示出具体的选项。如果你点击颜色按钮，你会发现检查器滑倒一边，出现新的专门的颜色检查器，你只需要单击顶端的“后退”按钮便会回到主检查器。当你选中了其他图层，同样会自动回到主检查器。

05

图层列表

图层列表列出了所在页面的所有图层(和切片)，每个涂层都会有一个小小的预览。

你可以在这里：查看涂层是否被锁定，不可见，使用了蒙板或标记为可导出；重新排列图层，或者给图层添加布尔运算，比如减去顶层形状；对图层进行建组或者重命名来管理他们。

06

多页面操作

Sketch支持多页面操作，你可以在图层列表上面的按钮里面添加/删除或者转换到其他页面(或者用键盘上的 Page Up/Page Down来切换)。图层列表始终只会显示当前页面的图层。

07

画板

在图层列表里，有白色背景一栏的便是画板，你可以把画板视为设计中的顶层对象，所以一个画板不能被嵌入另一个画板。

08

图形

在你的文件中最常见的图层应该就是图形了。Sketch 提供了多种不同的基本图形供你选择：圆形，矩形，星型等等。这几个图形中会有几个有趣的额外选项，比如星型和圆角矩形。

你只需单击工具栏中的添加(Insert)>图形(Shape) 按钮，选择一个图形，便可以开始创作。当你的鼠标在画布上拖拽的时候，Sketch 会提示你这个图形的大小，松开鼠标，便会成功添加图形，右边的检查器上也会立即显示出这个图形的相关信息，又是也会出现相应的额外选项。

09

工具栏

Sketch 的工具栏涵盖了你创作当中所需要的所有工具。

在默认工具栏中，第一组工具是用来添加新图层的：图形、图片、符号等等。

编组 (Group) 和取消编组 (Ungroup) 能让你有条例的组织文件。

接下来的几个工具则都是用来编辑现有图层：旋转 (Rotate)，变形 (Transform)， 通过布尔运算来合并图层，以及在图层列表中上移或下移图层。

工具栏最后的导出(Export) 按钮 同时也是一个切片工具，你可以在这将你的作品导出为一个或多个位图或者矢量文件。

总结：

在工作中还是需要重视效率，在做任何事之前我们是否有用心的去思考下当前的工作有没有更快捷方便的办法，可能前期会花去很多研究的时间，或者花去研究的时间研究的方法也不一定管用，但是这是更好提高我们效率的必经之路，发现好的方法分享给团队的成员会更有助于大家的协作。

来源于猿来如此呀公众号

私信我或关注猿来如此呀公众号，回复：视频学习，即有机会免费领取30天视频学习资源包