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 保持两个图层的同时选中状态，在工具属性栏中单击“布尔运算”按钮，在弹出的菜单中选择“排除重叠形状”选项，得到如下图所示的图形。

通过以上操作，可以看出不同元素之间的合集、交集、去除的形状变化情况，以及合集后的颜色变化情况。通过不断剪切做出我们想要的形状，同时保证了元素是矢量的，无论放大还是缩小都可以确保图形的清晰度。

实际设计时需要注意

-使用不同元素的合集操作，需要区分先后顺序，否则最终得到的图形会发生变化。