
1.8 布尔运算
在日常工作中习惯了位图设计的设计师总遇到一个让人烦恼的问题—修改或调整设计元素时会特别麻烦,无论修改得多么精确都会与其元素不匹配。为了避免这些问题,设计师需要学会使用“钢笔工具”并了解布尔运算的制作技巧。
1.8.1 什么是布尔运算
布尔运算是通过数字符号化进行的逻辑推演过程,在设计中包括并集、交集、去除。
1.并集
并集是指对两个元素进行融合,产生新元素,可以分别称为正并集、负并集。

[并集示意]
在UI设计中并集过程与图层上下级有直接关系,如上图所示的蓝色与红色两个元素,当蓝色的图层在红色图层之上,并集后颜色以蓝色为主,反之同理。
并集可以产生正并集和负并集两种情况。正并集将元素重合后产生;负并集将元素重合然后减去顶层形状后产生。
2.交集
交集是指两个元素重合后,将相交的区域删除或去除相交外的区域。

[交集示意]
在UI设计中,交集经常用于图形切割,以此达到设计的最终目标。交集过程与图层上下级有直接关系,如上图所示的蓝色与红色两个元素,当蓝色的图层在红色图层之上时,并集后颜色以蓝色为主,反之同理。
交集可以产生正交集和负交集两种情况。正交集将元素重合,并删除重叠区域;负交集将元素重合,并删除非重叠区域。
3.去除
去除A-B是指以元素A为主体删除与元素B相交的区域;去除B-A是指以元素B为主体删除与元素A相交的形状。去除过程与图层上下级有直接关系,如下页上图所示的蓝色与红色两个元素,当蓝色的图层在红色图层之上时,并集后颜色以蓝色为主,反之同理。

[去除示意]
看到这里不知道你是否对设计软件中的“合并形状”“减去顶层形状”“与形状区域相交”“排除重叠形状”“合并形状组件”有一个认识呢?在设计中,对不同元素进行不同的操作,而这个过程就称为“布尔运算”。
在UI设计中,可以将布尔运算运用到设计元素、设计整理中,可以更好地避免位图调整所带来的问题。
1.8.2 实际操作示例
例如,制作游戏设置的图形,多采用齿轮表示,具体的操作步骤如下。
STEP 01 启动Photoshop软件,新建400像素×400像素的空白文件。

STEP 02 在工具箱中选择“圆角矩形工具”。

STEP 03 绘制如下图所示的圆角矩形。

STEP 04 调出“属性”面板,调整圆角矩形的圆角尺寸均为18.5像素。

STEP 05 调出“图层”面板,选中圆角矩形图层,按快捷键Ctrl+J复制该图层。选中复制的图层,按快捷键Ctrl+T执行“自由变换”命令,出现自由变换控制框。

STEP 06 在工具属性栏中调整旋转角度值为60。

STEP 07 按多次快捷键Ctrl+Alt+Shift+T,复制并重复旋转该图层,得到如下图所示的效果。

STEP 08 在“图层”面板中同时选中3个圆角矩形图层,按快捷键Ctrl+E,将其合并为一个图层。

STEP 09 在工具箱中选中“椭圆工具”,按住Shift键在画布中单击并拖动绘制一个正圆形。将圆角矩形图层和正圆形图层同时选中,单击工具属性栏中单击“水平居中对齐”和“垂直居中对齐”按钮,将两个对象居中对齐。

STEP 10 保持两个图层的同时选中状态,在工具属性栏中单击“布尔运算”按钮,在弹出的菜单中选择“合并形状组件”选项,得到如下图所示的图形。

STEP 11 在工具箱中选中“椭圆工具”,按住Shift键在画布中单击并拖动绘制一个正圆形。将合并图层和正圆形图层同时选中,单击工具属性栏中的“水平居中对齐”和“垂直居中对齐”按钮,将两个图形居中对齐。

STEP 10 保持两个图层的同时选中状态,在工具属性栏中单击“布尔运算”按钮,在弹出的菜单中选择“排除重叠形状”选项,得到如下图所示的图形。

通过以上操作,可以看出不同元素之间的合集、交集、去除的形状变化情况,以及合集后的颜色变化情况。通过不断剪切做出我们想要的形状,同时保证了元素是矢量的,无论放大还是缩小都可以确保图形的清晰度。
实际设计时需要注意
-使用不同元素的合集操作,需要区分先后顺序,否则最终得到的图形会发生变化。