• 2017年7月2日,氧16网正式改版,增加会员登录注册功能,感谢群里小伙伴的支持!
  • 氧16网设计交流1群:331622745,设计交流2群:536159510,欢迎志同道合的朋友加入!
  •    1年前 (2016-06-22)  教程 |   抢沙发  133 
    文章评分 0 次,平均分 0.0

    sketch已经出来很久,从一开始的神话到现在的通用化,版本更新到3.8.3,使用的设计师是越来越多。氧16的QQ群(331622745)中不少朋友也纷纷推荐,Aqua也给了Sketch Measure菜单的全部汉化,大名仰慕已久,新换的iMac上也早已下载,只是一直忙于工作也没有好好的学习研究,毕竟打开英文界面,有点小胆怯呢!

    这两天看了10几个视频和相关教程,并做了一个图标(见下图)和几个界面,大体多少有所了解。在做一套完整的UI界面设计上有着比PS强大的多的优势,主要体现在多面板、符号、样式套用和导出上,其他的平面作图还是无法替代PS的。

    Sketch使用技巧和常用快捷操作

    下面再综合自己所用和网上教程汇总一些Sketch使用技巧和常用快捷操作,与sketch的新手设计师们共勉,老司机可以交流指正!

    一、图层快速重命名

    选中图层cmd+R,输入名称,按enter确定,按TAB键到下一层,再继续上一步操作。 shift+TAB返回到上一层,这个功能看似没啥大用,但是懂得整理的设计师肯定觉得很高效。

    Sketch使用技巧和常用快捷操作

    二、画板管理

    sketch的特色之一:一个文件里有多个画板,并且可以调整多个画板之间的行间距以及行列数。虽然新版的Photoshop CC 2015中也推出了该功能,但是实际使用中还是sketch更胜一筹。

    Sketch使用技巧和常用快捷操作

    Sketch使用技巧和常用快捷操作

    三、快速吸色

    选中你的对象(任意!可以是按钮,文本)按control+C 出现大大的放大镜,很方便的选择颜色,你选中的对象实时换色,真心方便啊!

    Sketch使用技巧和常用快捷操作

    四、建组

    选中图层后,和PS一样,comd+G是建组,comd+shift+G是取消建组。在sketch里建组的用途要比PS里大很多,之后说到导出,就会有用到组这个很使用的功能。

    Sketch使用技巧和常用快捷操作

    五、锁定图层

    comd+shift+L 锁定图层,再按一下就是解锁图层

    Sketch使用技巧和常用快捷操作

    六、拖拽导出

    拖拽导出的用法有两种,一种是通过group(组)导出,另一种是通过slice(切片)拖拽导出,方法很简单,下面根据不同场景为你介绍。可以拖拽导出到 很多地方,文档内、文件夹都是小儿科,最牛掰的是,还能直接拖拽导出到邮件、设备,甚至上传到网站哦,下面为你一一展示。

    用例1:拖拽导出画板
    画板添加一个export之后,可以拖拽检查器中的export预览图快速导出

    Sketch使用技巧和常用快捷操作

    用例2:裁剪图片
    有时候我们需要在SK中处理一些位图图片,例如对图片进行裁剪,利用sketch的slice(切片工具)可以快速裁剪图片,并且通过拖拽右边的检查器里的export预览图导出。
    工具:slice(切片工具),快捷键S

    Sketch使用技巧和常用快捷操作

    用例3:导出组内内容
    有时候我们需要将某些对象转为图片使用,这时候可以将这些对象成组,并且在组内建立切片(切片放到组内),选中切片勾选“Export group content only(仅导出组内内容)”,如果有是在画板里的话,需要同时关闭画板的“include export(包含到导出内容中)”选项。

    Sketch使用技巧和常用快捷操作

    如果你不需要在对象周围留空白的话,可以不用切片,直接拖拽组也可以导出。两者不同的地方说一下,切片可以定义导出范围尺寸,而组则是自动检测边缘生成图片,好处是无论有没有背景都不影响。要注意的是,如果你同时导出多个组,这些组每个都会独立成一个单独的图片,而不会组合在一起,要组合在一起导出,你就 需要把这些组再包含在一个新的组中,然后导出这个组

    Sketch使用技巧和常用快捷操作

    下面再展示下更酷的导出

    导出到文件夹或者桌面:

    Sketch使用技巧和常用快捷操作

    导出到邮件或者直接网页上传:

    Sketch使用技巧和常用快捷操作

    七、重复动作

    按住Option键,点击要复制的元素拖动就可以。当你将这一元素拖拽到你要的区域之后,然后使用Command+D的快捷键,就可以复制这一动作了。

    Sketch使用技巧和常用快捷操作

    八、共享样式

    当你在创建你这些UI元素的时候,对于那些要重复使用的样式,你可以创建一个新的样式,然后给这个样式起一个的名字,然后就可以运用这个样式,只要你对这个样式做了改动所有运用这个样式的图形都会一起改变为最新的样式,比PS里的拷贝黏贴图层样式真是方便不少。

    Sketch使用技巧和常用快捷操作

    九、符号

    符号是Sketch 中一个非常实用的功能。如果你设计的UI上有许多不同的状态、模式或者选项,那么你可以将单个屏幕设定为一个“符号”,然后单击工具栏中的 “转化为符号(Convert to Symbol)按钮”,再在画板上复制这一“符号”,并且创建你所需要的不同状态,唯一需要做的就是添加你设定的这个符号(Insert -> Symbol)。当你改变这个符号中的元素的时候,所有的屏幕会同时跟着更新,绝对够快捷。

    Sketch使用技巧和常用快捷操作

    十、改变透明度

    这个和PS里一样,当你要调整一个元素的透明度的时候,不用去慢慢调节进度条,你只需要选中图层或组,使用数字按键(1-0)来设定透明度,比如3就是30%透明度。

    Sketch使用技巧和常用快捷操作

    十一、比例(Scale)功能

    你在创建的UI元素并不一定符合需求,大了或者小了都很正常。比如你设置了一个边缘半径20px、边框4px的按钮,如果你直接鼠标拖拽缩放,效果恐怕不会理想。如果你点击“比例(Scale)”按钮,这样来调整,效果会好很多。

    Sketch使用技巧和常用快捷操作

    十二、隐藏左、右工具栏

    如果你要隐藏左右两边的菜单栏,点击Ctrl+Option+Cmd+3 组合键,如果要单独隐藏左边或者右边,快捷键是Ctrl+Option+Cmd+1 和Ctrl+Option+Cmd+2 。

    Sketch使用技巧和常用快捷操作

    十三、使用.9图

    有一个可以模拟.9图放缩的功能,只需要对图片对象(只对图片对象有效)使用Layer>Image>Convert to 9-slice image命令即可生成一个九宫格的控制柄,通过拖动控制柄即可制作一个可以自由放缩,但是边缘样式不变的.9图

    Sketch使用技巧和常用快捷操作

    Sketch使用技巧和常用快捷操作

    十四、全屏演示模式

    类似PS里连按两个F一样,隐藏所有工具栏和菜单,全屏展示内容。快捷键是:“cmd+.”

    最后的最后,奉上sketch快捷键大全:

    Sketch使用技巧和常用快捷操作

    Sketch使用技巧和常用快捷操作

    Sketch使用技巧和常用快捷操作

    Sketch使用技巧和常用快捷操作

    Sketch使用技巧和常用快捷操作

    Sketch使用技巧和常用快捷操作

    Sketch使用技巧和常用快捷操作

    Sketch使用技巧和常用快捷操作

    Sketch使用技巧和常用快捷操作

     

    除特别注明外,本站所有文章均为氧16网原创,转载请注明出处来自http://yang16.com/10363.html

    关于
    氧16网 — 分享设计&素材&工具|文章烂,更新少,茫茫人海,能够被你关注真是三生有幸

    发表评论

    表情 格式

    暂无评论

    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    扫一扫二维码分享