Sketch 3 布尔运算教程

 

在Sketch里面,如果你发现一些基本的图形都不适合你,你想组合或者用更多的图形时,这时候就离不开布尔运算。当然,如果钢笔工具用的熟练的话,用钢笔工具也可以画出自己想要的复杂图形,但有些时候我们其实可以通过拆分合并等方式也可以创造出你想要的更多图形。

在Sketch里面,有四种布尔运算,分别是合并形状(Union),减去顶层形状 (Subtract),与形状区域相交 (Intersect),排除重叠形状 (Difference)。

 合并形状: 两个矢量元素合并成为一个整体,相当于加起来的总和。

  1. 减去顶层形状: 上面的图层矢量区域会从下面的矢量区域减去。
  2. 与形状区域相交:两个矢量元素相交的时候,只会留下中间交集的部分。
  3. 排除重叠形状: 这个会把重叠的部分去掉,只会保留重叠之外的区域。

在Sketch里面,这几种布尔运算都显示在工具栏里,你会很容易找到他们,如下图,工具栏上右上角的四个蓝色符号就是布尔运算的四种形式:

而且当你进行布尔运算的时候,左边图层区域也会有变化,比如我先做一个简单的合并形状,我先画一个圆,然后在圆的上方在画一个五角星,居中对齐,选择布尔运算的第一种合并形状,然后看下图右侧图层里面的变化:

 

进行布尔运算后,左边的图层自动把圆和五角星分成两个图层,而且五角星的右侧有两个小方块重叠,其实就是工具栏里的第一种布尔运算,它会显示在图层里,当你进行布尔运算的时候。

这样有个好处就是,即使你已经进行布尔运算的情况下,仍然可以改动图层里的原图形,你可以随意修改后在合并,非常的方便又规范。看吧,我用一个圆和一个五角星,通过四种不同的布尔运算,就可以得到下面的四种形式(如下图),当然我都是很简单的图形,为了大家明白,你们可以练习的时候,自己画一些复杂的图形,来用用布尔运算,开开脑洞。

 

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/7383/

(0)
iouedioued
上一篇 2015-08-19
下一篇 2015-08-19

相关推荐

  • Google 内部资料:提升用户体验的三大设计原则

    想提升用户体验?在你运用自己的创意和设计思路时,请考虑这些由 Android 用户体验团队秉承用户体验至上的理念而制定的 Android 设计原则。一、让人着迷1. 以意想不到的方式让人眼前一亮漂亮的界面、精心布置的动画,或恰到好处的声效,都会带来快乐的体验。精细的效果能产生一种轻松的氛围,让人感觉自己拥有强大的力量。2. 实际对象要比按钮和菜单更有趣让用户可以直接触摸和操作你应用中的对象,这样,可以让执行任务更轻松,让用户更满意。3....

    2018-02-06
  • 页面状态还是组件?到底什么才是交互的中心?

    随着信息行业的日益发展,软件的开发设计得到了更多人的重视,软件的原型设计也同样的变得原来越重要。我们目前使用的原型设计工具中,设计的模式普遍为两种,一种是以页面状态为中心来设置交互,比如Flinto for Ma…

    2023-03-03
  • 设计师如何使用用户研究优化A/B测试

    作者:Jennifer Cardello; 编译:霍诗雨@ 点融黑帮   一、A/B 分类测试 A/B分类测试使得网站可以通过比较同一网页的不同设计,来决定其中哪些设计将产生最好的结果。在A/B测试中用到的指标是微观和宏观的转化率。 …

    交互专题 2017-08-07
  • 国际用户体验设计论坛邀请函

    点击上方蓝字关注我们国际用户体验设计论坛暨中国工业设计协会用户体验产业分会第一届理事会预备会!  开始报名啦  !官方海报如下👇报名方式一👇长按识别下方二维码,通过报名页面报名👇报名方式二点击文章最底部“阅读原文”,通过H5报名页面完成报名了解我们关注我们长按下图二维码关注“UXE优艺智造”这里有最新的行业动向最前沿的学术研究来一探用户体验的商业价值吧联系我们电话15868193198邮箱uxestudy@126.com欢迎投稿

    2018-03-30
  • 游戏交互设计心得分享:从代入感与反馈感入手提升打击体验

    前言经常听到一些设计人员、产品经理、甚至是一些交互体验”大师“的言论——【这个操作太麻烦了,需要操作好几步,体验太差了!】亦或者【这个功能藏的太深了,你有考虑过用户体验么?】之后不知怎么的,设计游戏或者软件的人员经常会把这几句话挂在嘴边。无论做什么,3句话里面保准带一句上述“金句“。所以近段时间,你会发现打开一个游戏或者软件,第一眼的界面,功能堆积,眼花缭乱,不知从何下手。我觉得,经常拿着两句话一刀切的人太幼稚,太低级了。所以我今天斗胆...

    2018-02-20
  • 帮你从零开始掌握交互设计的学习笔记

    最近两个月给公司的伙伴们做交互设计的分享,这是第一期分享的内容。在这次分享中,我认真梳理了交互设计师掌握和精通这门技艺的方法。我认为,如果想成为拔尖的设计师,只有这条路可走。 什么是交互设计 用户界面…

    交互设计 2015-09-09
  • 布局&构图&版式设计-木卫艾欧网-交互设计学堂

    编者按:想成为一个合格的UI设计师,光会画图标可不行,今天360的@Micu设计小哥从头帮你补上版式这一课,分享他的界面构图三板斧,此外,你还能学会如何用设计语言解构画面,这可是设计师的必备职业能力呦!

    2015-01-06
  • UI设计入门必会:Axure及Adobe系列软件如何安装

    UI设计最最基础的-软件如何正确安装且永久免费试用1、Axure 8.0正确安装、汉化、破解2、UI设计之通过CreativeCloud安装Adobe软件

    微信热点 2018-05-07
  • 关于“用户体验动效”的十二项原则

    前言关于“用户体验动效“的十二项原则,本文分为四部分来引入说明:1. “用户体验动效” 不等于 “界面动画”;2. 实时与非实时交互的区别;3.  动效的四种可用性提升方式;4. “用户体验动效”的十二项原则。1.  “用户体验动效”不等于“界面动画”在用户界面设计中,大部分动态的效果被设计师理解为“界面动画”,事实却并非如此。在介绍“用户体验动效”的十二项原则之前,我们先明确一下二者之间的不同。大部分设计师认为,“界面动画”是为了让用...

    2018-04-01
  • 数据可视化:如何为数据寻找适合的配色

    虽然如今好的配色方案已经唾手可得,但为数据可视化找到合适的配色方案,却仍是一项巨大挑战。

    2017-05-31