就不解釋為啥不寫「面和體的維度」了，這個(gè)角度的想法還沒怎么完善。因此就來寫寫PowerPoint這個(gè)組件一些自帶的運(yùn)算邏輯和特效處理。今天先來談?wù)劵脽羝械摹感螤钸\(yùn)算」，即布爾運(yùn)算。

選擇的版本是Office2013版及16版，2010版本怎么設(shè)置布爾運(yùn)算，網(wǎng)上有很多方法這里就不詳說了。

在正文正式開始之前，讓我來絮絮叨下關(guān)于圖層的概念。

圖層說明

這里引用詞條：

圖層，就像是含有文字或圖形等元素的膠片，一張張按順序疊放在一起，組合起來形成頁面的最終效果。圖層可以將頁面上的元素精確定位。圖層中可以加入文本、圖片、表格、插件，也可以在里面再嵌套圖層。

在幻燈片中的圖層操作，包括四種：置于頂層、置于底層、上移一層、下移一層。根據(jù)其字面意思，很好理解它們?cè)趫D層調(diào)整中的作用。

怎么在一個(gè)頁面中查看圖層，快捷鍵：Alt＋F10，或者：選擇窗格。熟練掌握?qǐng)D層分布，可以讓我們?cè)谂虐嬖O(shè)計(jì)中能更快的定位到要修改的位置。尤其是展示類動(dòng)畫中，大量重疊類圖層堆積，如果不使用圖層分布窗格，真的是一件很痛苦的事情。所以，熟悉這個(gè)很重要。在本篇文字中可以根據(jù)案例，講一講圖層的疊放順序。
下面開始今個(gè)的正文

1 布爾運(yùn)算

1.1 概要說明

布爾運(yùn)算又稱邏輯運(yùn)算，是處理二值之間關(guān)系的邏輯數(shù)學(xué)計(jì)算法。在幻燈片中的布爾運(yùn)算主要用于圖形或形狀的運(yùn)算。運(yùn)算包括：聯(lián)合、相交、剪除、組合、拆分，下面從數(shù)學(xué)集合的角度來理解布爾運(yùn)算：
從上圖中可以看到以下關(guān)系：

１拆分所涉及的集合運(yùn)算，可以細(xì)分為其他運(yùn)算?？梢酝ㄟ^拆分得到：相交、剪除運(yùn)算得到的圖形；

2 經(jīng)過拆分運(yùn)算后，可以用聯(lián)合運(yùn)算得到聯(lián)合圖形和組合圖形；

3 剪除的兩種不同狀態(tài)，對(duì)于選擇形狀/圖片時(shí)需要對(duì)選擇的順序考慮。

總結(jié)說明：在這五種運(yùn)算關(guān)系中，剪除、相交運(yùn)算使用較頻繁。拆分功能是萬能的，可以通過拆分的形狀得到其他運(yùn)算所得，當(dāng)然某些多個(gè)圖層/形狀情況下拆分的項(xiàng)過多，這時(shí)候就不太方便了。

1.2 布爾運(yùn)算要點(diǎn)/注意

1.2.1 運(yùn)算要求

必須兩個(gè)及以上的對(duì)象參與運(yùn)算，對(duì)象可以是基本的形狀或者圖片。需要說明的是，在幻燈片中文本框、基本幾何圖形等均屬于形狀范疇，各種格式的圖像屬于圖片范疇。

1.2.2 運(yùn)算的選擇順序

在進(jìn)行布爾運(yùn)算時(shí)，選擇對(duì)象的先后順序?qū)τ谏傻男螤?圖片有直接影響。一般來說，第一個(gè)選擇的對(duì)象為被處理對(duì)象，后來選的對(duì)象是基于前者進(jìn)行運(yùn)算。下面文字會(huì)根據(jù)具體的示例進(jìn)行說明。
1.2.3 組合的說明

這里要進(jìn)行說明的組合有兩種：一種是布爾運(yùn)算中的組合運(yùn)算，另外一種是選擇兩個(gè)及以上對(duì)象時(shí)，鼠標(biāo)右鍵菜單出現(xiàn)的圖層組合。要對(duì)兩者進(jìn)行區(qū)分：

組合運(yùn)算：是基于并集-交集的組合，處理后為單一圖層，不能再還原組合之前的多圖層狀態(tài)。

圖層組合：保留多圖層狀態(tài)，只是用一個(gè)組合狀態(tài)將各個(gè)圖層暫時(shí)組合成一個(gè)大的可處理形狀，可以針對(duì)每個(gè)圖層的形狀進(jìn)行編輯。當(dāng)然有組合就會(huì)有取消組合，通過取消組合功能，可以還原之前的多圖層狀態(tài)。

1.2.4 剪除運(yùn)算說明

因?yàn)榧舫\(yùn)算的兩種狀態(tài)，這里做一下說明。從下圖中可以看到，在基礎(chǔ)形狀運(yùn)算過程中，選擇對(duì)象的先后順序?qū)τ谏尚螤钣兄苯拥挠绊?。這個(gè)原則對(duì)于其他的運(yùn)算同樣有效。

剪除運(yùn)算是形成鏤空效果最重要的一種運(yùn)算，下面的文字篇幅中會(huì)大量用到這個(gè)運(yùn)算，將運(yùn)算出現(xiàn)的兩種狀態(tài)場(chǎng)景放在這里，是讓朋友們有個(gè)大概的印象。

2 示例說明

在第一節(jié)當(dāng)中，介紹了布爾運(yùn)算的基礎(chǔ)，具體怎么樣運(yùn)用到實(shí)際之中還是需要進(jìn)行示例說明。這個(gè)小節(jié)中總結(jié)了若干種常用的效果制作。

2.1 文本框和基本幾何形狀運(yùn)算

文本框和幾何形狀通過剪除運(yùn)算，實(shí)際生成的主要是鏤空效果。可以將生成的形狀填充純色，然后設(shè)置透明度，將其放置在圖片圖層之上，這樣做的效果一方面是看清鏤空的文本內(nèi)容，另外通過透明度可以看到圖片的整個(gè)界面，起到由文字和圖像的關(guān)聯(lián)作用。

2.1.1 單次運(yùn)算

也就是說通過一次運(yùn)算，下面的示例中在過程步驟的圖片中有所說明。需要注意的是，在進(jìn)行布爾剪除運(yùn)算之前，適當(dāng)調(diào)節(jié)文本內(nèi)容的字間距和行間距，使得文本內(nèi)容在幾何填充背景中看著比較舒服。還有就是保證文本框和背景填充幾何圖形的上下、左右對(duì)齊，保證中心對(duì)稱。

將上一步生成的形狀，進(jìn)行純色填充。然后調(diào)整該色塊的透明度為25-35。之后將其放置在圖片圖層的上面，形成鏤空顯字效果。

2.1.2 多次運(yùn)算示例1

不同于2.1.1，這里用到了多次的圖形運(yùn)算，可能涵蓋了所有的布爾運(yùn)算。最終的顯示效果還是基于剪除運(yùn)算的鏤空效果。下面的示例中就是在一個(gè)大號(hào)字體的文本框結(jié)構(gòu)中，再涵蓋一個(gè)小字號(hào)的文本框，做到字中有字的顯示效果。

到此一步，需要設(shè)置生成形狀的透明度，然后將其置頂?shù)綀D片圖層之上。

2.1.3 多次運(yùn)算示例2

這個(gè)示例中包含了字的簡(jiǎn)單結(jié)構(gòu)拆解：左右結(jié)構(gòu)。通過兩種不同的剪除運(yùn)算，得到需要的結(jié)構(gòu)：一個(gè)是半個(gè)結(jié)構(gòu)的文本，一個(gè)是鏤空的半個(gè)文本結(jié)構(gòu)的色塊。之后通過鼠標(biāo)右鍵的圖層組合，將分開的字體拼接。

重復(fù)上一步驟，完成“分享”文本的操作。剩下的就是最基本的文本框和填充幾何形狀的運(yùn)算了，這個(gè)在2.1.1就有提及，就不再詳細(xì)說明了。

2.2 文本框和圖片的運(yùn)算

2.2.1 文本框和圖片相交運(yùn)算

下圖是蘋果發(fā)布會(huì)的頁面，使用的就是文本框和圖片的相交運(yùn)算。圖片是多個(gè)圖標(biāo)組成的圖片，這里需要處理的是兩個(gè)部分：一個(gè)是數(shù)字文本框，一個(gè)是逗號(hào)文本框，將其分開處理。

step1：添加兩個(gè)文本框：一個(gè)是數(shù)字，一個(gè)是符號(hào)，使用同一種字體。

step2：下圖中的圖標(biāo)背景圖是將MIUI6的圖標(biāo)拼湊成的，就是一排擺上15個(gè)左右的png圖標(biāo)，確定首尾使用對(duì)齊和橫向分布，然后簡(jiǎn)單調(diào)整一下。重復(fù)此步驟，當(dāng)然如果你能夠找到這樣的圖標(biāo)背景圖，那是極好的。

將文本框和背景圖片進(jìn)行相交運(yùn)算處理
step3：將生成的兩個(gè)圖片拼在一塊，即成效果。

2.2.2 文本框和圖片剪除運(yùn)算

這里進(jìn)行說明的是使用文本框和圖片進(jìn)行剪除運(yùn)算形成的鏤空效果。將文本排好版之后，全選--剪切到圖片合適的位置。

需要說明的是，一般的線條是不能夠參與布爾運(yùn)算的，因?yàn)榫€條屬于一維結(jié)構(gòu)。而參與布爾運(yùn)算的對(duì)象要求必須是圖片或者可填充的幾何形狀。

因此，這里的線條是使用圓角矩形，去掉線輪廓，將長(zhǎng)度不變，高度調(diào)小。高度調(diào)到一定數(shù)值，看著就是線條，將其代替實(shí)際的線條參與布爾運(yùn)算。

先選中圖片，然后在選擇文本框。這樣的順序才能夠保證最終生成的為所需要的，如果操作順序錯(cuò)誤，就不能實(shí)現(xiàn)此效果。

制作完成的鏤空效果，放置到不同的背景界面圖層之上，可以通過鏤空的結(jié)構(gòu)顯示文本或者排版結(jié)構(gòu)內(nèi)容。這樣鏤空的好處就是不需要區(qū)分處理字體顏色和形狀顏色，只需要改變背景就可。

2.3 基本幾何形狀和圖片的運(yùn)算

其實(shí)這里說明的就是圖片的「剪裁」功能?？梢詫D片剪裁為基本的形狀結(jié)構(gòu)。這個(gè)估計(jì)許多人都會(huì)用，但是我們還是用布爾運(yùn)算來從另一個(gè)角度上來說明。

使用布爾運(yùn)算的一個(gè)好處就是，可以隨意設(shè)置被剪裁圖片的位置，以及自定義和圖片運(yùn)算的形狀，從這一點(diǎn)上來說，使用布爾運(yùn)算的靈活性大大提高。以下是使用該種運(yùn)算進(jìn)行圖片裁剪處理的步驟說明。

2.4 基本幾何形狀和幾何形狀的運(yùn)算

在第二篇文字中點(diǎn)的運(yùn)用中有說到使用五角星評(píng)級(jí)，就是基于這個(gè)處理方式進(jìn)行操作的。當(dāng)然不僅僅是五角星，其他幾何圖形亦可。所有的幾何圖形相互間的布爾運(yùn)算，是多種多樣的，下面的第3小節(jié)中會(huì)有幾個(gè)示例說明。

2.4 一點(diǎn)技巧

關(guān)于基本填充形狀和文本框相交運(yùn)算、圖片和文本框相交運(yùn)算。經(jīng)過運(yùn)算生成結(jié)果，前者是形狀可以進(jìn)行填充漸變等形狀格式操作；而后者生成的是圖片，不能進(jìn)行填充等形狀格式操作，只能進(jìn)行圖片操作。

也就是說，我們?nèi)绻獙?duì)文本內(nèi)容進(jìn)行漸變顏色操作，有兩種方式：一種是將填充形狀進(jìn)行漸變處理，然后將文本內(nèi)容和其進(jìn)行相交處理，得到的形狀即為漸變(當(dāng)然也可以對(duì)齊漸變顏色的調(diào)整，因?yàn)樗强删庉嫷?；另外一種就是不對(duì)填充形狀進(jìn)行漸變處理，而對(duì)運(yùn)算生成的形狀進(jìn)行漸變操作。

3 綜合運(yùn)算使用

通過三個(gè)具體的圖標(biāo)制作示例，將布爾運(yùn)算和基礎(chǔ)幾何形狀結(jié)合，實(shí)現(xiàn)想要達(dá)到的效果。

3.1 圖庫圖標(biāo)制作

基礎(chǔ)幾何圖形為一個(gè)圓角矩形、兩個(gè)大小不一的橢圓、一個(gè)圓形。通過下述步驟對(duì)每一個(gè)形狀進(jìn)行處理，得到想要的形狀。其中背景圓角矩形的漸變處理，圓形填充的發(fā)光處理均是在鼠標(biāo)右鍵「設(shè)置形狀格式」功能卡中實(shí)現(xiàn)。

將上一步處理后的形狀，按照下圖中的圖層順序進(jìn)行疊加，得到最終的示例圖標(biāo)。

3.2 簡(jiǎn)易瀏覽器

這個(gè)主要需要留意的就是內(nèi)圓和兩個(gè)條形填充的相切，然后通過剪除運(yùn)算即可實(shí)現(xiàn)最終的顯示效果。

3.3 Chrome

大Google的Chrome制作，當(dāng)然這個(gè)制作的不是很完美，因?yàn)椴扇〉氖菆A角矩形線條，而不是真正的線條，使得部分細(xì)節(jié)不是很精致，但是可以一看。下面是這種簡(jiǎn)單方法的制作流程。

(1) 下載一張圖片，確定好圓的尺寸和比例

(2) 處理圓角矩形線條，設(shè)置其高度為0.3左右；將線條和上一步得到的內(nèi)圓相切，后復(fù)制一條線，旋轉(zhuǎn)60度，仍舊和內(nèi)圓相切。要保證線條能夠延伸到外圓外側(cè)。

進(jìn)行拆分功能，得到目標(biāo)形狀。對(duì)這個(gè)就是我們需要的基礎(chǔ)形狀，另復(fù)制兩個(gè)：一個(gè)旋轉(zhuǎn)120度，一個(gè)旋轉(zhuǎn)240度，拼接就可完成。

最后，圖片和圖片不能進(jìn)行布爾運(yùn)算

該篇文字到此結(jié)束

歡迎私信或留言交流

作者：JunLing
來源：https://zhuanlan.zhihu.com/p/24853710