幻燈片中的布爾運算-君陵的PPT小院雜談5

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

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

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

圖層說明

這里引用詞條：

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

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

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

1 布爾運算

1.1 概要說明

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

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

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

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

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

1.2 布爾運算要點/注意

1.2.1 運算要求

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

1.2.2 運算的選擇順序

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

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

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

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

1.2.4 剪除運算說明

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

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

2 示例說明

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

2.1 文本框和基本幾何形狀運算

文本框和幾何形狀通過剪除運算，實際生成的主要是鏤空效果?？梢詫⑸傻男螤钐畛浼兩?，然后設(shè)置透明度，將其放置在圖片圖層之上，這樣做的效果一方面是看清鏤空的文本內(nèi)容，另外通過透明度可以看到圖片的整個界面，起到由文字和圖像的關(guān)聯(lián)作用。

2.1.1 單次運算

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

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

2.1.2 多次運算示例1

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

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

2.1.3 多次運算示例2

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

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

2.2 文本框和圖片的運算

2.2.1 文本框和圖片相交運算

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

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

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

將文本框和背景圖片進行相交運算處理
step3：將生成的兩個圖片拼在一塊，即成效果。

2.2.2 文本框和圖片剪除運算

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

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

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

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

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

2.3 基本幾何形狀和圖片的運算

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

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

2.4 基本幾何形狀和幾何形狀的運算

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

2.4 一點技巧

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

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

 

3 綜合運算使用

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

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

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

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

3.2 簡易瀏覽器

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

3.3 Chrome

大Google的Chrome制作，當(dāng)然這個制作的不是很完美，因為采取的是圓角矩形線條，而不是真正的線條，使得部分細節(jié)不是很精致，但是可以一看。下面是這種簡單方法的制作流程。

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

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

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

最后，圖片和圖片不能進行布爾運算

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

歡迎私信或留言交流