每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
sketch是一款十分优秀的UI设计软件，尽管它不如PS强大，但是就UI设计领域来说，它绝对是神一般的高效，本文将为你揭开一些sketch里面鲜为人知的效率秘技
1、在sketch中使用.9图
sketch有一个可以模拟.9图放缩的功能，只需要对图片对象（只对图片对象有效）使用Layer>Image>Convert to 9-slice image命令即可生成一个九宫格的控制柄，通过拖动控制柄即可制作一个可以自由放缩，但是边缘样式不变的.9图，原理和我们平时使用的.9图差不多。有了这个功能，我们就可以在sketch中快速绘制例如对话框、消息气泡等不同尺寸的特殊部件了。
2、拖拽导出
拖拽导出的用法有两种，一种是通过group（组）导出，另一种是通过slice（切片）拖拽导出，方法很简单，下面根据不同场景为你介绍。可以拖拽导出到很多地方，文档内、文件夹都是小儿科，最牛掰的是，还能直接拖拽导出到邮件、设备，甚至上传到网站哦，下面为你一一展示。
用例1：拖拽导出画板
画板添加一个export之后，可以拖拽检查器中的export预览图快速导出
用例2：裁剪图片
有时候我们需要在SK中处理一些位图图片，例如对图片进行裁剪，利用sketch的slice（切片工具）可以快速裁剪图片，并且通过拖拽右边的检查器里的export预览图导出。
工具：slice（切片工具），快捷键S
用例3：导出组内内容
有时候我们需要将某些对象转为图片使用，这时候可以将这些对象成组，并且在组内建立切片（切片放到组内），选中切片勾选“Export group content only（仅导出组内内容）”，如果有是在画板里的话，需要同时关闭画板的“include export(包含到导出内容中)”选项。
如果你不需要在对象周围留空白的话，可以不用切片，直接拖拽组也可以导出。两者不同的地方说一下，切片可以定义导出范围尺寸，而组则是自动检测边缘生成图片，好处是无论有没有背景都不影响。要注意的是，如果你同时导出多个组，这些组每个都会独立成一个单独的图片，而不会组合在一起，要组合在一起导出，你就需要把这些组再包含在一个新的组中，然后导出这个组（command+G成组）
下面再展示下更酷的导出
导出到文件夹：
导出到邮件：
3、图片压缩
这里要给大家介绍一个网站：tinypng.com ，这是一个PNG在线压缩网站，提供高质量、高压缩比的在线压缩服务，用户每次最多可以上传20个文件，最大不超过5MB。压缩比大多数达到70%以上，最高能达到90%，1MB的图片可以轻松压缩到200-300K，并且不会看出明显的质量损失，特别是对于做网站的同学来说，图片的大小有多重要相信不用我多说。这个网站还支持JPG压缩哦。不过由于网站是国外的，访问速度可能会稍微慢一点，但是基本都在可以接受的范围之内。另外路边社消息，国内某大神正在密谋做一个mac版本基于tinypng开放API的PNG压缩软件。不知道大家还记不记得上面我说过可以在sketch中直接导出图片到很多地方呢？这个网站就是其中一个，直接拖拽切片、画板往这里甩就可以直接上传哦。
4、进入演讲模式
作为设计师，向老板、PM、客户去展示你的设计肯定不会少，直接打开源文件去讲述，可能会误操作改变了你的设计搞而你自己却不知道，过去可能大家都会导出图片，放到PPT里面去，现在开始，你有了更好的办法，那就是sketch的演讲模式（presentation mode）,按command+.（del，不是delete）即可进入，进入演讲模式后会隐藏所有菜单、工具栏、面板，相当于你的工作区（画布）进入全屏模式，这时候你还是可以继续进行设计创作的，但是你只能靠快捷键调用工具命令了。那么怎么才能确保你的设计稿不会因为误操作改变了呢？其实只要在进入演讲模式之前在图层面板下方关闭掉左边的show layer in the layer list （隐藏/显示图层列表中的图层）即可，这样你的鼠标就无法选中任何对象也无法操作（直接画在画布上而非画板（Artboard）上的除外）。这种情况下，即便把电脑给别人随便看，都不怕误操作改掉设计稿。这个是不用进入演讲模式也可以用的哦。另外就是，因为隐藏切片和图层两个开关是无法同时关闭的，所以当你进入演讲模式之后，切片也会自动隐藏。
5、快速分享作品
这个没很强的实际意义，不过如果你想要把你的作品分享到社交平台的话，这个是很不错的，直接选中切片或者画板，点右下角的分享按钮，就可以自动生成图片，加上文字就能分享到新浪微博和腾讯微博（估计是根据国家地区选择不同平台）。
全部评论：26条
-
-
daojie
2017-03-31 19:38不错，学习了！给大家推荐一个比较好用的插件，mockingbot for sketch：可以一键将sketch里的图片导入到墨刀，添加交互和动画效果，制作高保真原型很方便，比较适合设计师。可以在这里下载哦：https://modao.cc/sketch
-
一匹烈马
2016-06-28 18:22@FrancisMa: 只对图片有效,可以插入一张图片,选中后在菜单layer中的image下点击convert to 9-Slice,然后就可以对图片进行拖拽来改变要拉伸的区域了
-
-
-
-
-
-
-
-
ashung
2015-03-05 10:40下面是有界面
免费无损
http://mac.softpedia.com/get/Utilities/ImageOptim.shtml
免费有损
http://mac.softpedia.com/get/Graphics/ImageAlpha.shtml
收费无损
http://mac.softpedia.com/get/Graphics/PNG-Compressor.shtml
收费无损，前端开发工具带图片压缩
http://incident57.com/codekit/
界面工具会把图片用好几个压缩工具（Zopfli, PNGOUT, OptiPNG, AdvPNG, PNGCrush, JPEGOptim, Jpegtran, Jpegrescan, or Gifsicle. 这些大部分是免费的命令行工具）压缩一次然后选择最小的文件输出，所以相对时间比较长，如果都是同一类型的图片，可以比较不同压缩工具压缩的时间和结果，然后选择最合适的压缩工具，写脚本做批处理，这样用的时间更快。
比较有B格的可以使用gulp。
gulp有sketch插件 gulp-sketch 然后接gulp-imagemin
https://github.com/cognitom/gulp-sketch
https://github.com/sindresorhus/gulp-imagemin
http://geek100.com/2684/ -
-
ashung
2015-03-04 16:32这个拖拉导出的不错，
tinypng是有损压缩的，而且需要上传到网上，可以用pngcrush，pngout，Optipng的库文件或者可执行文件，然后用Ruby（Mac自带），Python（Mac自带），nodejs之类的写脚本批处理。我目前用Python/nodejs+pngOUT。
带界面的可以用ImageOptim或者Codekit
-
-
-
-
-
-
-
-
-
-
-
-
更多作品
发表评论