网页规划 » 视觉规划 » 学会这21个Sketch有用技巧,让你规划省时省力

学会这21个Sketch有用技巧,让你规划省时省力

发表于: 视觉规划. 谈论
赞助商链接

Sketch之所以受 UI 规划师们欢迎,首要是它具有十分多的有用功用,不只便利,而且大大加快规划师制造 UI 的速度,比方之前小编介绍的《学会组件UI规划,5分钟快速修正100多个界面》便是最有用的技巧之一,当今天首要共享一些新人不会知道的 Sketch 技巧教程(其实很多人也不知道却十分有用),共几分钟时刻学习这些技巧,让你在实战中节约 N 小时。

1. 缩放巨细

✔️用 Scale 东西缩放

理由:款式特点如边框厚度、圆角巨细、暗影巨细等,会等比例的缩放

✘ 手动拖拽缩放

理由:款式特点坚持不变,不会等比例的缩放

2. 缩放巨细

✔️像素值均为整数

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

技巧:主动像素取整办法:Arrange → Round to Pixel

✘ 像素值呈现小数点

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

3. 在途径正中心增加锚点

✔️按住 Shift 键,精准增加

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

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

✘ 预算中心方位增加

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

4. 制造环形进展条

✔️制造描边圆形,将“Gap”设置为直径*π,调整“Dash”数值改动进展

理由:可灵敏调整进展

✘ 制造描边圆形,用取舍东西进行裁切

理由:不能灵敏调整进展

5. 仿制旋转

✔️运用“旋转副本”批量仿制旋转

理由:可批量设置仿制数量、灵敏调整缩放尺度

技巧:制造一个矢量图形,Layer → Paths → Rotate Copies (图层-途径-旋转副本),然后按自己需求挑选副本数量,就能够得到仿制旋转的作用了

✘ 手动屡次仿制图形,调整其方位视点

理由:不能批量设置仿制数量、灵敏调整缩放尺度

6. 文本宽度

✔️文本框长度设成 Fixed 形式(最大宽度)

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

技巧:主张在规划稿中展现超出长度切断的状况

✘ 文本框长度设成 Auto 形式

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

7. 切割线条

✔️经过 Inner Shadows 特点完成切割线

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

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

✘ 经过 Line 目标完成切割线

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

8. 模块距离

✔️经过距离留白,完成模块距离

理由:经过调整单个模块的方位,灵敏调整距离

✘ 经过填充色块,完成模块距离

理由:调整距离色块时,会一同影响到上下两个模块

9. 文字盘绕作用

✔️树立途径,生成文字途径盘绕作用

理由:可灵敏调整途径及文字款式

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

✘ 独自调整每个文字的视点

理由:不能灵敏调整途径及文字款式,过于吃力

10. 图层编组

✔️图层进行合理的编组和命名

理由①:便利自己寻觅特定模块、图层、前史版别

理由②:便利团队其他规划师的再次修正和运用

✘ 图层随意摆放,命名杂乱无章

理由①:不利于自己寻觅特定模块、图层、前史版别

理由②:不利于团队其他规划师的再次修正和运用

11. 输出SVG矢量图标

✔️兼并成单层形状,尽量简化

技巧①:假如有两个以上图形,或许有布尔联络的图形,请对图形兼并而且扩展

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

✘ 图层多、没有兼并形状

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

12. 输出通明底图标

✔️勾选 Export group contents only

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

✘ 不勾选

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

13. 快速调整不通明度

✔️经过数字键,快速调整不通明度

理由:数值精准、功率高

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

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

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

14. 快速设置圆角

✔️一次性设置,由分号离隔

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

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

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

理由:每个点独自设置,功率低

15. 快速组内单选

✔️按 cmd 键可直接选中组内元素

理由:更便利便利

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

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

理由:需啪啪啪双击屡次

16. 快速汲取色彩

✔️按 conrtol c 快速汲取屏幕上的色彩

理由:更便利便利

✘ 点击色彩面板 → 点击吸管东西

理由:需点击屡次

17. 特点栏的“加减乘除”运算

✔️直接在特点栏输入计算式

理由:更便利便利

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

✘ 点翻开计算器算

理由:需切换外部计算器东西,再仿制黏贴数值回来,比较费事

18. 图形默许特点

✔️直自定义图形默许特点,一了百了

理由:设置合适自己的常用图形默许特点

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

✘ 每次新建时,手动调整图形特点

理由:新建形状时,每次都会自带描边。但画UI时并不需求处处都有灰边。每次手动删去描边很费事

19. 快速仿制款式

✔️便利键 Alt ⌘ C、Alt ⌘ V

理由:更便利便利

✘ 选中目标1右键仿制款式、目标2右键黏贴款式

理由:需点击屡次,较费事

20. 快速折叠一切画板

✔️View → Layer List → Collapse All Groups

理由:一次性快速收起一切画板,便利便利

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

理由:需点击屡次,较费事

21. 智能缩放

✔️运用Resizing功用,呼应式调整元素

理由:当改动编组尺度时,其间包括的元素将不再被简略粗犷的拉伸,以致形状及布局结构被完全损坏,而是会有规矩的缩放、位移,或坚持尺度及方位稳定

这21个 Sketch 技巧在规划实战中是常常会用到,也期望对新人有所协助~ ᖛ  ̫ ᖛ  thanks for watching

可能有不对的当地或更好的办法~  欢迎留言或私信一同评论。

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

引荐:检查最受欢迎的 301 个规划网站 → http://hao.dashijieylc3je.com
沟通:结交更多有才调的规划师?请参加UI规划QQ群,与50000名规划师沟通规划。
赞助商链接
赞助商链接
规划达人微信沟通社区:shejidaren888
喜爱这篇文章吗?欢迎共享到你的微博、QQ群,并重视咱们的微博,谢谢支撑。
版权:除非注明,本站文章均为原创文章,转载请联络咱们授权,不然制止转载。