恭喜你成为UI中国推荐设计师 (详情)

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

sketch钻石党:Sketch设计效率冷门技巧

原创文章 分类: 经验/观点 版权: 原作者: 原作者 举报
83782 697 495 26
2015-02-07
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、快速分享作品

这个没很强的实际意义,不过如果你想要把你的作品分享到社交平台的话,这个是很不错的,直接选中切片或者画板,点右下角的分享按钮,就可以自动生成图片,加上文字就能分享到新浪微博和腾讯微博(估计是根据国家地区选择不同平台)。

推荐人:

UI中国

Sketch钻石党

【Q群:105403797 】SketchKit (http://sketchkit.cn)

2721粉丝/24关注

人气明星助人为乐首页达人小有见解话唠
老生常谈:关于合格 UI 设计师需要知道的那些事儿音乐播放器 UI 设计
1
ashung

下面是有界面
免费无损
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/

精彩!

Sketch钻石党

Sketch钻石党

【Q群:105403797 】SketchKit (http://sketchkit.cn)

人气明星助人为乐首页达人小有见解话唠

你确定要举报sketch钻石党:Sketch设计效率冷门技巧

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

0/200

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

点击上传附件

对谁可见:

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

您确认要推荐?

该作品发布时间:2015年02月07日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

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

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

登录

账号或密码错误

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

登录
//

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN