恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Sketch你绝对应该掌握的二十个小技巧
0.0°
2017-12-20 原创文章 教程 举报 69651 399 246 9

这是东半球最好的sketch小技巧介绍


前沿导读

Image title

当初是从Sketch3刚出来没多久就开始使用的,一晃到如今大概快三年了。Sketch真的给我们设计师的设计流程和工作方法带来了非常非常大的改变,简直是我们设计界的一款跨时代的轻量又好用好学的设计神器。目前市面上有关的教程基本都是讲述基础工具的使用,稍微深一些的还需要收费,本篇文章主要是针对掌握了基础工具的使用且有一定实战项目经验的同僚们,帮你们快速熟悉和用好Sketch,发现它的一些较隐藏且超好用的功能,来快速提高你的工作效率和设计能力,升职加薪将不是梦啦~



1.设置自定义属性画板

Sketch里默认自带并归类了多种类型且丰富的画板,但是其实它还给你提供了设置自定义画板的功能以满足你在不同项目中能快速精确的建立好自己的画板。

Image title

单击顶部工具栏里的画板工具或者按快捷键A,右边属性栏的最下面即会出现一个Create Custom Size的按钮,点击它即可设置你所需要的画板尺寸。点击Save后,以后你只需在画板建立的Custom分类中选择你要的画板即可,非常非常的快捷方便。



2.元素属性栏的运算编辑

Image title

Sketch的属性栏还给你提供有“+”,“-”,“*”,“/”的运算编辑,你根本就不必打开计算器即可快速设置好你的属性值。只需在对应的数值输入框输入你的计算式,如333*2,按回车键即可变成数值666,真的是不是非常的666~。记得哟,只要是数值输入框的都支持这个功能,但是一定要切换到英文输入法下来写计算式才能正常使用噢。




3.Border描边属性的设置

Image title

点击Border属性栏上的设置图标,即可进入设置border的描边设置属性栏,具体功能操作几乎和PS/AI里的完全一样,这里就不过多介绍了,大家自己一试便知。




4.Outlines拓展功能的使用

Image title

这个功能类似于AI里的拓展功能,可以把较粗的路径转化为面的属性进行相应的编辑。在顶部菜单栏上选择Layer>Convert to Outlines即可将线转化为面。




5.实时查看元素之间的间距

Image title

先选中一个元素,然后按住ALT键,并将鼠标移到你想要查看的另一个元素上即可快速查看这里两元素之间的距离。你就可以快速在对应的元素属性栏上修改数值或通过上下左右方向键微调来改变元素的位置。




6.元素自定义旋转中心

Image title

先搭建好旋转中心的参考线,选中一个元素,然后选择旋转工具,调整旋转锚点,并将鼠标移至元素旁边出现旋转图标时候进行旋转,即可达到你想要旋转的效果。




7.色板以及吸色工具

Image title

选择顶部工具栏的Colors,即可调出色板属性面板,且有多种色彩模式供你选择。通过选择左下方的吸管工具或者按快捷键 Ctrl+C键即可快速吸取颜色(是可以全屏吸色噢)。并还可以将你选择好的颜色依次存在色板上,以供你反复调用。




8.生成字体路径环绕效果

Image title

预先新建好一段文体以及一段路径,然后选中文本,在菜单栏Text里选择Text on Path.把文本移至路径旁边便会生成路径环绕的效果。




9.蒙版的建立和取消

Image title

首先你得有一张图片和一个蒙版的矢量图形,并选中这两个元素(蒙版的图形放在上面),点击蒙版工具即可产生蒙版效果。而在这两图层的选中状态下再按Ctrl+Command+M即可快速取消蒙版。




10.切刀去除像素边缘和排除组外元素以及填充背景功能

Image title

在选中切刀图层的状态下,在右边属性栏勾选Trim transparent pixels,导出的切图即可自动贴边去除在该范围内所有的透明像素。

在选中切刀图层的状态下,在右边属性栏勾选Export group contents only,就仅仅只会导出切刀图层所在组以内元素。

在选中切刀图层的状态下,在右边属性栏勾选Background Color,调整好你想要的颜色,导出切图就会在空白透明的背景上填上你想要的颜色。




11.剪刀工具的使用

Image title

在选中图层的状态下选择剪刀工具,即可对元素的边属性进行快速删减。




12.毛玻璃背景的制作

Image title

首先你得有一张图片和一个蒙版的矢量图形(蒙版的图形放在上面)。在选中蒙版图形的状态下,勾选属性栏的Gaussian Blur选项,修改Gaussian Blur为Background Blur,并调小蒙版图形透明像素度即可生成毛玻璃效果。




13.文本和图层样式的使用

Image title

类似于Word文本图层样式功能,能快速复用你想要的样式,非常方便。




14.图层过滤选择器

Image title

Sketch是多画板的操作界面,因此项目文件里的图层和组往往非常的多,是很难快速选择到你要的图层元素。图层过滤选择器就是用来解决这个问题的。目前阶段提供搜索图层名称,选择图层,选择切刀图层这三个功能。




15.标尺参考线工具  

Image title

Ctrl+R能快速打开标尺工具,经常用来精确建立自己规范和参考,其实功能就和PS里的一样,略微操作方式有点不同而已。




16.图层自适应模式的使用

Image title

网页适配常常非常麻烦,sketch提供了图层自适应模式,方便了你在你设计的时候可以通过控制画板大小来向你前端哥哥们快速直观的展示你的设计适配方案。(自适应模式有空会单独再发一篇文章结合前端适配的知识来细讲的)




17.旋转复制和快速复制

Image title

选择旋转复制工具,可以按中心进行旋转复制。选中一个元素按ALT拖动复制一个元素,再按Ctrl+D能根据上次复制的距离进行快速复制。




18.快速切图方案设置

Image title

通过设置切图的倍数,能快速切出你想要的多种不同尺寸。这个我在之前的文章《三分钟教你快速设置Sketch切图方案》中有详细介绍过,这里就不再过多的赘述。




19.顶部工具栏自定义设置

Image title

Sketch的顶部工具栏位置毕竟较小,但是可以自定义你想要显示的工具,这样你就可以根据你的操作习惯来随意搭配你的顶部工具栏的展示样式。




20.设计稿预览和分享

Image title

Sketch提供有iPhone端的预览,下载Sketch Mirror即可在手机端查看。其实不仅仅这样,你只要把预览的本地地址打开复制发送给你的项目人员,你的团队即可通过浏览器的地址来浏览你的Sketch文件里的所有设计(类似于Axure的分享功能那样,不过比它可方便多了,大前提是你们必须在同一个局域网内或是使用同一个WiFi的状态下噢)。




       文章如果转载请署名作者名称

       不明白的地方也可以文章留言或私信我,有空我会及时回复你,

       其中可能会有不对的地方,欢迎大家留言纠正,与大家一起成长。

       欢迎关注我的微信公众号「 陈踢缺er 」





更新:2017-12-20

收藏

399人已收藏

  • 8

    作品

  • 397

    粉丝

  • 9

    关注

  • #三月底#的一小波佛系海报练习~
  • Sketch极速建立自己的图标库
  • 2017年末职场黑话大汇总-BOSS篇
  • 做一个像詹姆斯那样的设计师

    猜你喜欢

      2017-12-20 原创文章 教程 举报 69651 399 246 9

      Sketch你绝对应该掌握的二十个小技巧

      0.0°

      你确定要举报Sketch你绝对应该掌握的二十个小技巧

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年12月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      246
      399
      9

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

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

      登录

      手机号

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

      登录
      第三方账号登录