实用Sketch小技巧07——布尔运算

越来越多的人开始用Sketch进行UI设计,Sketch作为一款非常容易上手的软件,很多人完全可以依靠自学便能熟练掌握这款软件,但是大部分人都只是掌握Sketch的基本实用方法,对于一些实用的小技巧,了解的并不是特别多。

从今天开始,我将向大家介绍Sketch的一系列实用小技巧,这些小技巧能帮助大家更好的使用Sketch,提升工作效率。

这是该系列教程的第四篇——钢笔工具的运用。

本教程的第一篇:http://www.jianshu.com/p/109aac030ded

本教程的第二篇:http://www.jianshu.com/p/80b606f87f53

本教程的第三篇:http://www.jianshu.com/p/410f2ef8b424

本教程的第四篇:http://www.jianshu.com/p/7acc514dc2e3

本教程的第五篇:http://www.jianshu.com/p/84235319ca6a

本教程的第六篇:http://www.jianshu.com/p/c59ae25c770d


在进行图标绘制时,不得不提到的一个知识点就是布尔运算,通过对基本形状做布尔运算,可以绘制出千万种不同的图形。

布尔运算包括Union(合并)、Subtract(减去顶层)、Intersect(区域相交)和Difference(排除重叠)四种,在Sketch的工具栏中,提供了四种布尔运算工具,如下图所示。

为了能更好的理解四种运算的效果,现绘制两个不同颜色的正方形,如下图所示,其中红色正方形在蓝色正方形的下方,两者面积有1/4的重叠。并且为了更加能说明效果,两个正方形均给了10px的描边。选中两个形状图层,对其做布尔运算。

Union(合并),快捷键为option + command + U,效果如下图所示。可以看到两个图层合并为一个图层,且描边变成一个描边,颜色与下方图层颜色相同。

Subtract(减去顶层),快捷键为option+command+S,效果如下图所示。两个图层虽然也合并为一个图层,但是上方图层已经被减去,且下方图层中被上方图层覆盖的区域也被减去。

Intersect(区域相交),快捷键为option+command+I,效果如下图所示。两个图层经过运算只剩下相交区域,且颜色取决于下方图层颜色。

Difference(排除重叠),快捷键为option+command+X,效果如下图所示。可以看到两个图层中重叠的部分已经被减去,且颜色变成下方图层颜色,描边相互封闭。

同时大家可以注意到,在图层列表中,进行了布尔运算的图层虽然合并为一个图层,但是在图层左侧会有小箭头,单击箭头可以展开,并分别对原始图层进行调整,包括位置、大小的调整。且在原始图层顶部图层的右侧有布尔运算的标记,单击如下图所示,可以快速对运算规则进行切换。若选择None,则取消布尔运算,原图层恢复成普通图层。


总之,通过对普通图层进行布尔运算一定可以达到大家想要的效果,布尔运算支持多个图层间的运算,而不仅限于两个图层间。大家在平时中看到各种图标,可以试着去分析,看是由哪些基本形状组成。

另外需要注意的是,图层顺序不同,相同图层执行相同运算也会得出不一样的效果,大家在平时工作中若遇到执行布尔运算跟想象不同的时候,可以试着看图层之间的顺序是否出现了错误。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容