学会这21个Sketch实用技巧,让你设计省时省力

栏目: Html · 发布时间: 5年前

内容简介:Sketch之所以受 UI 设计师们欢迎,主要是它拥有非常多的实用功能,不仅方便,而且大大加快设计师绘制 UI 的速度,比如之前小编介绍的《理由:样式属性如边框厚度、圆角大小、阴影大小等,会等比例的缩放

Sketch之所以受 UI 设计师们欢迎,主要是它拥有非常多的实用功能,不仅方便,而且大大加快设计师绘制 UI 的速度,比如之前小编介绍的《 学会组件UI设计,5分钟快速修改100多个界面 》就是最实用的技巧之一,而今天主要分享一些新人不会知道的 Sketch 技巧教程(其实很多人也不知道却非常实用),共几分钟时间学习这些技巧,让你在实战中节省 N 小时。

1. 缩放大小

:heavy_check_mark:用 Scale 工具缩放

理由:样式属性如边框厚度、圆角大小、阴影大小等,会等比例的缩放

学会这21个Sketch实用技巧,让你设计省时省力

✘ 手动拖拽缩放

理由:样式属性保持不变,不会等比例的缩放

学会这21个Sketch实用技巧,让你设计省时省力

2. 缩放大小

:heavy_check_mark:像素值均为整数

理由:输出切图时像素清晰

技巧:自动像素取整方法:Arrange → Round to Pixel

学会这21个Sketch实用技巧,让你设计省时省力

✘ 像素值出现小数点

理由:输出切图时像素模糊

学会这21个Sketch实用技巧,让你设计省时省力

3. 在路径正中间添加锚点

:heavy_check_mark:按住 Shift 键,精准添加

理由:精准、无需微调其坐标数值

技巧:在两点之间添加新的锚点时按住 shift 键,便会得到两点间的锚点

学会这21个Sketch实用技巧,让你设计省时省力

✘ 估算中间位置添加

理由:不精准,需要手动微调其坐标数值

学会这21个Sketch实用技巧,让你设计省时省力

4. 绘制环形进度条

:heavy_check_mark:绘制描边圆形,将“Gap”设置为直径*π,调整“Dash”数值改变进度

理由:可灵活调整进度

学会这21个Sketch实用技巧,让你设计省时省力

✘ 绘制描边圆形,用剪裁 工具 进行裁切

理由:不能灵活调整进度

学会这21个Sketch实用技巧,让你设计省时省力

5. 复制旋转

:heavy_check_mark:使用“旋转副本”批量复制旋转

理由:可批量设置复制数量、灵活调整缩放尺寸

技巧:绘制一个矢量图形,Layer → Paths → Rotate Copies (图层-路径-旋转副本),然后按自己需要选择副本数量,就可以得到复制旋转的效果了

学会这21个Sketch实用技巧,让你设计省时省力

✘ 手动多次复制图形,调整其位置角度

理由:不能批量设置复制数量、灵活调整缩放尺寸

学会这21个Sketch实用技巧,让你设计省时省力

6. 文本宽度

:heavy_check_mark:文本框长度设成 Fixed 模式(最大宽度)

理由:方便RD了解文本最长宽度是多少

技巧:建议在设计稿中展示超出长度截断的情况

学会这21个Sketch实用技巧,让你设计省时省力

✘ 文本框长度设成 Auto 模式

理由:RD不知道文本最长宽度是多少

学会这21个Sketch实用技巧,让你设计省时省力

7. 分割线条

:heavy_check_mark:通过 Inner Shadows 属性实现分割线

理由:调整分割线时,只影响单个容器,更灵活

技巧:设置内阴影的渐变为零,只需要一边的方向为负数即可

学会这21个Sketch实用技巧,让你设计省时省力

✘ 通过 Line 对象实现分割线

理由:调整分割线时,会同时影响到上下两个模块

学会这21个Sketch实用技巧,让你设计省时省力

8. 模块间隔

:heavy_check_mark:通过间距留白,实现模块间隔

理由:通过调整单个模块的位置,灵活调整间距

学会这21个Sketch实用技巧,让你设计省时省力

✘ 通过填充色块,实现模块间隔

理由:调整间隔色块时,会同时影响到上下两个模块

学会这21个Sketch实用技巧,让你设计省时省力

9. 文字环绕效果

:heavy_check_mark:建立路径,生成文字路径环绕效果

理由:可灵活调整路径及文字样式

技巧:新建一段文体以及一段路径,选中文本,Text → Text on Path,把文本移至路径旁边即可

学会这21个Sketch实用技巧,让你设计省时省力

✘ 单独调整每个文字的角度

理由:不能灵活调整路径及文字样式,过于费力

学会这21个Sketch实用技巧,让你设计省时省力

10. 图层编组

:heavy_check_mark:图层进行合理的编组和命名

理由①:方便自己寻找特定模块、图层、历史版本

理由②:方便团队其他设计师的再次编辑和利用

学会这21个Sketch实用技巧,让你设计省时省力

✘ 图层随意摆放,命名乱七八糟

理由①:不利于自己寻找特定模块、图层、历史版本

理由②:不利于团队其他设计师的再次编辑和利用

学会这21个Sketch实用技巧,让你设计省时省力

11. 输出SVG矢量图标

:heavy_check_mark:合并成单层形状,尽量简化

技巧①:如果有两个以上图形,或者有布尔关系的图形,请对图形合并并且扩展

技巧②:将描边转化为闭合图形

学会这21个Sketch实用技巧,让你设计省时省力

✘ 图层多、没有合并形状

理由:生成图标时代码中会生成多个path,导致图层错位

学会这21个Sketch实用技巧,让你设计省时省力

12. 输出透明底图标

:heavy_check_mark:勾选 Export group contents only

理由:在选中切刀图层的状态下,勾选后只导出切刀图层所在组以内元素,透明底

学会这21个Sketch实用技巧,让你设计省时省力

✘ 不勾选

理由:不勾选,切图会连同背景色一起输出

学会这21个Sketch实用技巧,让你设计省时省力

13. 快速调整不透明度

:heavy_check_mark:通过数字键,快速调整不透明度

理由:数值精准、效率高

技巧:选中元素,然后按数字键即可直接设置其不透明度,例如“1”代表10%,“5”代表50%,“9”代表90%,“75”代表75%

学会这21个Sketch实用技巧,让你设计省时省力

✘ 鼠标拖拽,调整不透明度

理由:数值不精准、效率低

学会这21个Sketch实用技巧,让你设计省时省力

14. 快速设置圆角

:heavy_check_mark:一次性设置,由分号隔开

理由:一次性设置,效率高

技巧:在右侧面板的“半径 (Radius)”中输入一组四个数字,由分号隔开,分别代表左上角、右上角、右下角、左下角的半径值,例如“20;10;5;0”

学会这21个Sketch实用技巧,让你设计省时省力

✘ 依次选中每个点,调整圆角

理由:每个点单独设置,效率低

学会这21个Sketch实用技巧,让你设计省时省力

15. 快速组内单选

:heavy_check_mark:按 cmd 键可直接选中组内元素

理由:更快捷方便

技巧:无需到图层列表中寻找,按住 cmd 键,同时用鼠标直接指向该元素,即可“穿透”分组,直接选中元素

学会这21个Sketch实用技巧,让你设计省时省力

✘ 双击编组,再选中组内元素

理由:需啪啪啪双击多次

学会这21个Sketch实用技巧,让你设计省时省力

16. 快速吸取颜色

:heavy_check_mark:按 conrtol c 快速吸取屏幕上的颜色

理由:更快捷方便

学会这21个Sketch实用技巧,让你设计省时省力

✘ 点击颜色面板 → 点击吸管工具

理由:需点击多次

学会这21个Sketch实用技巧,让你设计省时省力

17. 属性栏的“加减乘除”运算

:heavy_check_mark:直接在属性栏输入计算式

理由:更快捷方便

技巧:提供有“ ”,“-”,“*”,“/”的运算编辑,如333*2,按回车键即可变成数值666

学会这21个Sketch实用技巧,让你设计省时省力

✘ 点打开计算器算

理由:需切换外部计算器工具,再复制黏贴数值回来,比较麻烦

学会这21个Sketch实用技巧,让你设计省时省力

18. 图形默认属性

:heavy_check_mark:直自定义图形默认属性,一劳永逸

理由:设置适合自己的常用图形默认属性

技巧:新建一个自己常用的矩形样式,然后选择 Layer → Style → Set as Default Style,下次再新建形状时就会以你刚设置的样式作为默认值了

学会这21个Sketch实用技巧,让你设计省时省力

✘ 每次新建时,手动调整图形属性

理由:新建形状时,每次都会自带描边。但画UI时并不需要到处都有灰边。每次手动删除描边很麻烦

学会这21个Sketch实用技巧,让你设计省时省力

19. 快速复制样式

:heavy_check_mark:快捷键 Alt ⌘ C、Alt ⌘ V

理由:更快捷方便

学会这21个Sketch实用技巧,让你设计省时省力

✘ 选中对象1右键复制样式、对象2右键黏贴样式

理由:需点击多次,较麻烦

学会这21个Sketch实用技巧,让你设计省时省力

20. 快速折叠所有画板

:heavy_check_mark:View → Layer List → Collapse All Groups

理由:一次性快速收起所有画板,方便快捷

学会这21个Sketch实用技巧,让你设计省时省力

✘ 一个个手动点击收起画板

理由:需点击多次,较麻烦

学会这21个Sketch实用技巧,让你设计省时省力

21. 智能缩放

:heavy_check_mark:使用Resizing功能,响应式调整元素

理由:当改变编组尺寸时,其中包含的元素将不再被简单粗暴的拉伸,以至形状及布局结构被彻底破坏,而是会有规则的缩放、位移,或保持尺寸及位置恒定

学会这21个Sketch实用技巧,让你设计省时省力

学会这21个Sketch实用技巧,让你设计省时省力

这21个 Sketch 技巧在设计实战中是经常会用到,也希望对新人有所帮助~ ᖛ  ̫ ᖛ  thanks for watching

可能有不对的地方或更好的方法~  欢迎留言或私信一起讨论。

作者:大秘密mimi
个人主页:https://damimi.zcool.com.cn/

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。


以上所述就是小编给大家介绍的《学会这21个Sketch实用技巧,让你设计省时省力》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

奔跑吧,程序员

奔跑吧,程序员

[美]叶夫根尼·布里克曼(Yevgeniy Brikman) / 吴晓嘉 / 人民邮电出版社 / 2018-7 / 99.00元

本书以软件工程师出身的创业者的角度,全面介绍了创业公司该如何打造产品、实现技术和建立团队,既是为创业者打造的一份实用入门指南,又适合所有程序员系统认识IT行业。书中内容分为三部分——技术、产品和团队,详细描绘创业的原始景象,具体内容包括:创业点子、产品设计、数据与营销、技术栈的选择、整洁的代码、软件交付、创业文化、招兵买马,等等。一起来看看 《奔跑吧,程序员》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具