PPT在手一樣做設計 3.3，布爾運算第三彈：圖標插畫那點事線性圖標篇
【為了彌補長時間未更新，這次內容很長，圖片很多，流量用戶慎入】
最近工作比較忙，更新也不穩定了，所以少說廢話，直接上教程——今天要做以下圖標(食用前請先複習布爾運算相關基礎)：
打開PPT，換一下背景顏色（深色即可）——
以我做UI工作的習慣，再畫圖標時會先畫一個參考框，限制一下圖標尺寸規範——簡單說就是你需要圖標多大，就畫一個多大的框（今天舉例3cm）——
我畫了兩個3cm的矩形，白色，為了不影響圖標視覺，我設置透明度為80% 。
畫完了參考框，我們就要在這個白色矩形範圍內製作圖標了，我們先看線性的那一款，看著好像有點複雜，但拆分來看就簡單多了，此圖標可以分成下面三個部分——
在這裡先要補充一個小知識：你有沒有發現這三部分圖案的線條粗細都是一樣的？這就是讓圖標看著順眼的一個重要規則——線條寬度保持一致。
第一部分，白框，很簡單吧，插入一個圓角矩形，定義矩形的尺寸為寬3cm，高2cm，然後再通過調節黃色的控制點，調節出一個你喜歡的圓角——
我們讓矩形居中放置在我們做好的參考框內，然後就要把這個白色的矩形變成邊框形式，方法有兩種，最簡單粗暴的就是直接去掉填充色，改為線條填充——
但是結果可能會是這樣的——
PPT線條默認以邊界為中心點描邊，所以最終結果會超出我們的參考框邊界；而且線條填充以磅為單位而不是厘米，單位都不統一，這就讓我們很難做到各部分線條粗細一致；而且也不便於後面做幾個圖形的合併，所以我們要用另一種比較規範的做法，布爾運算！
先回到這一步——
想一下，如何用布爾運算做出一個邊框？對啊，減法，中間掏空不就可以了！
假如我們設定圖標邊框尺寸為0.1厘米，那麼計算一下，四周都要減少0.1厘米，也就是掏空一個1.8＊2.8厘米的矩形。
注意：越是在內部的矩形，圓角越小，直到變為直角，這是基本的幾何常識，製作時請注意。
為了能看清，新製作的內部矩形我用灰色表示出來，讓兩個矩形中心對齊，之後就可以做布爾運算了。
想想減法是怎麼做的，我們要在白色中減去灰色，那麼就先選中白色矩形，再選中灰色矩形，然後選擇布爾運算的減法——
就問你簡單不簡單！邊框出來了，同樣的道理做另外兩部分。為了方便尺寸掌握，我們還是用參考框的方式先做出令兩部分的標記（注意四周的間距相等）——
我們先在1＊1的框內做小人圖標，先畫直徑1厘米的圓居於框的下半部分，用減法將圓做成半圓再掏空成環（注意環邊為0.1厘米厚度）——
註：請先用大圓減去矩形變為半圓再做圓環效果，因為在空心圖形上進行布爾運算，容易出現變形
那麼如果切半圓的時候也變形了怎麼辦？或者說圓形和矩形相減很難把握怎麼辦？還有一個辦法做半圓！
回到這一步——
選中圓形單擊右鍵，選擇編輯點——
出現幾個可編輯點後，選擇最下面的點，再單擊右鍵，選擇開放路徑——
看看會發生什麼，這個點斷開了！是的，斷開了，然後我們就要刪掉他們，依次選中他們單擊右鍵，刪除頂點——
就是這樣，半圓做好了，絲毫不會變形！這就是第二種編輯圖形的形狀，請舉一反三，在適當的時候應用！
話說回來，我們剛才進行到了這一步——
圓環切口處平平的，不太友好，那麼我們加個圓邊。做兩個0.1厘米的原型放在那裡，然後調整一下位置——
這樣看是不是舒服多了？
我們按照剛才的方法繼續製作一個直徑0.55厘米的圓環放在上面——
到這一步，第二部分也就完成了，第三部分應該就更容易了，就是幾條矩形而已——
好啦，我們的圖標完成了！把三部分合併起來，去掉參考框看看效果，是不是很完美——
線性的圖標做好了，那麼面性的呢？簡單簡單，無非就是把以上步驟中掏空的地方不掏空，而內部的兩小部分掏空就好了——繞暈了？別暈，把它當成作業自己試一把吧。
做了這麼久黑白圖標，看也看膩了，下期來點彩色的——
更多教程歡迎添加我的公眾號：不做設計（keycase-design）
TAG:不做設計 |