圖形

在你的文件中最常見的圖層應(yīng)該就是圖形了。Sketch 提供了多種不同的基本圖形供你選擇：圓形，矩形，星型等等。這幾個圖形中會有幾個有趣的額外選項，比如星型和圓角矩形。

你只需單擊工具欄中的 添加(Insert)>圖形(Shape) 按鈕，選擇一個圖形，便可以開始創(chuàng)作。當(dāng)你的鼠標(biāo)在畫布上拖拽的時候，Sketch 會提示你這個圖形的大小，松開鼠標(biāo)，便會成功添加圖形，右邊的檢查器上也會立即顯示出這個圖形的相關(guān)信息，又是也會出現(xiàn)相應(yīng)的額外選項。

額外選項

有些圖形會帶來幾個有趣的額外選項，你最經(jīng)常遇到的便是星型和圓角矩形，你可以調(diào)整星型的半徑和角的數(shù)量，也可以改變圓角矩形的圓角半徑。

圖形術(shù)語

點是組成每一個圖形的基本單位，他們會被直線或曲線連接成一條路徑。一個圖形可以包含一個或多個路徑。多個路徑則是通過布爾運算組合在一起的，想象大小兩個圓，小圓被放置在大圓上把大圓“打”出一個洞。這個將簡單圖形組合成復(fù)雜圖形的布爾運算我們會在另一章節(jié)詳細討論。

圖形編輯

每當(dāng)你繪制一個新的圖形或是編輯一個現(xiàn)有的圖形，你其實都是在和點做交互，你在屏幕上看到的是 Sketch 將這些點連接起來的線。有時是直線，有時是曲線。

舉個例子，先通過工具欄的 添加 > 圖形 > 矩形 （Insert > Shape > Rectangle）來添加一個矩形，完成后再雙擊它開始編輯，你會看見每個角上都會有一個小圓點，你可以單擊并拖拽這些點來移動。需單擊圖形邊上任意點單擊就可以添加新的點，要想刪去某一個點，只需選中它，然后按 delete 健。

如果你想將一條直線變?yōu)榍€，先雙擊一個點，它的兩側(cè)會出現(xiàn)兩個新的小手柄，他們分別控制這這一點兩邊線條的彎曲程度。你可以把這些小手柄理解為他們把線條朝自己的方向拉伸。

點模式

點的控制手柄有幾種不同的模式，他們決定了之間會出現(xiàn)怎樣的線條。

在編輯圖形的時候，檢查器會顯示出四種不用的點模式：

?直線角 (Straight)：當(dāng)你剛剛點擊畫布的時候，會添加一個直角，也就是說沒有任何錨點，你所得到的便是一條直線。

?鏡像 (Mirrored)：錨點會鏡像對應(yīng)。兩個錨點將會與主點距離相同并且正好相互對立。當(dāng)主點并非直角時，鏡像便是默認的點模式。

?不對稱 (Asymmetric)：兩個錨點到主點之間的距離是獨立的，但他們依然相互對應(yīng)。

?斷開連接 (Disconnected)：錨點之間完全獨立，互不影響。

如果一個角被設(shè)定為直線角，你也可以用底下的滑塊將直線叫變?yōu)閳A角。如果你通過 添加 > 圖形 > 圓角矩形（Insert > Shape > Rounded）添加了一個圓角矩形，那么你將得到一個四角被設(shè)定了默認值的圓角矩形。

能夠獨立控制每個點，代表著你可以為每個點都設(shè)置不同的值，比如說你可以輕松的讓一個矩形的上面兩個點為圓角，底部兩個點為直線角。

繪制 VS 編輯

除了用一個現(xiàn)有的圖形工具來添加圖形，你也可以用矢量工具自己繪制一個。進入菜單欄 > 添加 > 矢量工具 （Insert > Vector），在畫布上單擊添加第一個錨點，繼續(xù)單擊別處添加第二個錨點。

你會看見有線條連接兩點，接著單擊別處但不要松鼠標(biāo)，拖拽錨點以繪制曲線。你可以繼續(xù)畫上幾條線，最后單擊第一個錨點，便能繪制出一個封閉的矢量圖形，完成編輯。

不管是繪制新的圖形還是編輯現(xiàn)有的圖形，選擇和添加新的錨點的這些操作方法都是一樣的。

封閉路徑 VS 開放路徑

一個路徑可以是封閉的也可以是開放的。封閉圖形的最后一條邊會與第一條相連接，開放圖形則會在起點和終點間留出一個間隔。你可以通過菜單欄中的 圖層 > 路徑 > 關(guān)閉路徑 （Layer > Paths > Close Path），來將一個開放路徑變?yōu)榉忾]路徑，反之亦然。

針對一個開放路徑，你可以隨時在編輯模式中隨時添加新的錨點。

值得注意的是，當(dāng)你為一個開放路徑設(shè)置了顏色填充，那么這個填充會呈現(xiàn)出路徑已經(jīng)被封閉了一樣，哪怕這個路徑的邊框仍然有間隔不完整。

快捷鍵

繪制矢量圖形時，你可以按住 shift 鍵再畫之后的點，Sketch會自動幫你對齊到前一點的45度角方向，這在你繪制直線時會非常方便。如果你是在兩點之間添加新的錨點時按住 shift 鍵，你便會得到兩點間的錨點。

如果你按住 command 鍵，單擊兩點間的線條，Sketch則會幫你在線條的正中間添加錨點。

選中多個點

有一個不那么明顯的功能是你可以同時選中多個點，一起移動它們。在選擇點的時候按住 shift 鍵就好，你會看見被選中的點中心是白色的，而沒被選中的點中心是灰色的。

另從畫布空白處單擊并拖拽出一個矩形選區(qū)。如果你一直按住了 shift 鍵，則會將新選區(qū)和之前的點一起選中，如果沒有按住 shift 鍵，則會取消之前的選擇，只保留新選區(qū)內(nèi)的點。

布爾運算

如果Sketch的標(biāo)準(zhǔn)圖形中沒有你想要的圖形，那就需要你自己創(chuàng)作了。你的第一個想法也許是用矢量工具來手繪出來，然而你會發(fā)現(xiàn)很多復(fù)雜的圖形都可以輕易地被拆分成基本的圖形，布爾運算正是為了幫你實現(xiàn)這一點——將幾個基本圖形結(jié)合成一個復(fù)雜圖形。

子路徑

Sketch支持動態(tài)的布爾運算，但在我們做進一步討論之前，先來快速的回顧一下矢量圖形。Sketch當(dāng)中的大多數(shù)矢量圖形都只含有一系列的錨點——也就是說都只有一個路徑。然而一個圖形可以有多個子路徑，至于這些子路徑最終是什么效果，則取決于他們是如何組合的。

在Sketch當(dāng)中使用布爾運算，Sketch會通過具體的布爾算法將最上層的圖形變成下一層圖形的子路徑。因為Sketch當(dāng)中的布爾運算是動態(tài)的，所以你也可以隨時調(diào)整每一個子路徑，比如你可以單獨調(diào)整其中一個矩形的內(nèi)角半徑。

布爾運算

我們有4種不同的布爾運算，你可以根據(jù)需要來具體選擇：

?合并形狀 (Union)：合并的結(jié)果是會得到兩個矢量區(qū)域的總和。

?減去頂層形狀 (Subtract)：這一項的結(jié)果是頂層矢量的區(qū)域會從下一層的圖形上移去。

?與形狀區(qū)域相交 (Intersect)：與形狀區(qū)域相交的結(jié)果是會保留原圖形重疊的部分。

?排除重疊形狀 (Difference)：排除重疊形狀的結(jié)果是只保留原圖形不重疊的部分，它是“與形狀區(qū)域相交”這一運算的反向。

圖層列表

當(dāng)你有一個含有多個子路徑的圖形時，你可以來看看左側(cè)的圖層列表。正如編組列表一樣，圖層列表的左邊也有一個下拉箭頭，單擊它你便會看見這個圖形的子路徑列表。值得注意的是，每一個子路徑的布爾運算你都可以在右邊的按鈕中單獨修改。一個子路徑可以被設(shè)置成減去頂層形狀，它上面的一個子路徑則可以和它再相合并。

圖層列表的順序是從下至上的，布爾運算的工作原理也是一樣，即你所選的布爾運算將這一層和下一層的圖形相組合，他們的結(jié)果再與另一層相組合。

圖層扁平化

當(dāng)你使用扁平化功能（ Flattening），Sketch 會試著將一個圖形里的多個子路徑呈現(xiàn)為一個路徑——也就是將層級結(jié)構(gòu)變得更扁平。但是有些圖形是無法扁平為一個路徑的，比如說一個環(huán)狀圖形，將只能被呈現(xiàn)為兩個路徑：一個是外圈路徑，一個是內(nèi)圈路徑。

當(dāng) Sketch 不能完成扁平化的命令時，會出現(xiàn)一個小警告，如果你繼續(xù)堅持，那有的子路徑可能被替換，也許比之前跟少，也許和之前一樣多。

也許在你之前使用的繪圖應(yīng)用中，你每次添加布爾運算后到要讓圖層扁平一次，但在 Sketch 當(dāng)中大可不必這么做，你可以盡情添加無數(shù)曾布爾運算，而無需使用扁平命令。

變形工具

變形工具可以通過改變點的位置或者制造一個視覺上的3D效果來使一個矢量圖形變形。Sketch里，你可以運用變形工具變形一個或同時變形多個圖層。

選中一個或多個圖層，然后單擊工具欄里的變形工具。你可以拖動四角的錨點來任意改變圖形的形狀，或者拖拽中間的錨點來同時移動兩個邊角使圖形傾斜。

當(dāng)你從一個圖形的一角拖拽變形，你會發(fā)現(xiàn)其對角也會往相反方向拉伸，這能形成對稱的變形效果，但如果你只想往一個方向拉伸，按住 command 鍵再拖動鼠標(biāo)就好。

蒙版

Sketch里的蒙版可以讓你有選擇性的顯示出圖層的一部分。比如說在一個圖片上圓形蒙版，那么這張圖片就只會顯示出圓形內(nèi)部的內(nèi)容。

所有的圖形都可以變成蒙版，你只需要先選中圖形，然后進入 圖層 > 使用圖形蒙版(Layer > Use as Mask), 所有在這個蒙版上面的圖形都會被剪切成蒙版的內(nèi)容顯示出來。

限制蒙版

如果你不想接下來所有的圖層都被蒙版剪切，那么你可以將蒙版和想要被剪切的圖層單獨編組，一次來限制蒙版的使用情景。一旦蒙版被編組，其他一切在組外的圖層就都不會被蒙版剪切了。

在無法編組的情況下，你還可以通過以下方式限制蒙版：

?選中一個你想從剪切蒙版中釋放出來的圖層

?進入 圖層 > 忽略底層蒙版 (Layer > Ignore Underlying Mask)

這一層圖層和它以上的所有圖層就都不會被蒙版剪切了。當(dāng)你調(diào)整圖層順序的時候則需要格外注意，個別圖層可能會意外的被蒙版剪切。

圖形蒙版

如果上面這一系列操作聽起來很麻煩，我們也有更好的辦法：在畫布上同時選中一個圖形和一張圖片，選擇 圖層 > 用所選圖形做為蒙版 (Layer > "Mask with Selected Shape")， 就可以直接將這個圖形作為選中圖片的蒙版了。Sketch會自動為他們編組，并把其中的圖形圖層變成蒙版。

ALPHA 蒙版

默認情況下，一個蒙版會顯示出所在區(qū)域的圖片，隱藏其他的地方。另一種使用蒙版的方式是通過 ALPHA 蒙版建立漸變區(qū)域，來具體選擇圖片的各部分是否可見。

使用這個方法你可以先選中蒙版，選擇 圖層 (Layer) > 蒙版模式 (Mask Mode) > ALPHA 蒙版 (ALPHA Mask) 來實現(xiàn)。

剪刀工具

剪刀工具可以用來剪去矢量圖形的線條。你可以先選中矢量圖形，然后選中工具欄中的剪刀工具，或者在菜單欄中進入 圖層 > 路徑 > 剪刀工具 (Layer > Paths > Scissors) 來使用。

接下來你可以單擊矢量圖形的邊來剪切它。當(dāng)你完成后，只需單擊圖形外的畫布，或者按下鍵盤上的回車鍵或退出鍵即可。當(dāng)你將圖形剪切到只剩一條直線時，Sketch會自動退出剪刀工具。

復(fù)制旋轉(zhuǎn)

這是Sketch當(dāng)中一個特別的工具。它并沒有出現(xiàn)在默認的工具欄里，但你可以通過右擊工具欄并選中定制工具欄 (Customize)來將旋轉(zhuǎn)復(fù)制添加到工具欄上。你也可以在菜單欄中進入 圖層 > 路徑 > 復(fù)制旋轉(zhuǎn) (Layer > Paths > Rotate Copies).

這個工具能復(fù)制選中的圖形，并按照一個特定的中心點旋轉(zhuǎn)。例如繪制一朵花，你可以先畫出一片花瓣，然后復(fù)制12片花瓣并旋轉(zhuǎn)，即可得到一朵花的圖案。

你可以選中一個圖層，激活復(fù)制旋轉(zhuǎn)工具，輸入你想要的復(fù)制數(shù)量，接著調(diào)整中心點的位置，最后單擊圖形外的畫布即可退出復(fù)制旋轉(zhuǎn)工具。

分離路徑

所有的復(fù)制圖形都會被視為原圖形的子路徑，如果你想讓他們成為完全獨立的圖層，你只需從菜單欄進入 編輯 > 路徑 > 分離 (Layer > Paths > Split)即可。

鉛筆

你可以使用鉛筆工具來自由的繪圖。當(dāng)你松開鼠標(biāo)之后，Sketch 會幫你簡化路徑，順滑曲線。

你可以在工具欄的添加菜單中找到鉛筆，也可以用鉛筆的快捷鍵 P。

描邊寬度

描邊寬度工具讓你任意改變圖形邊框的寬度。選中一個矢量，在檢查器中設(shè)定邊框，然后在菜單欄中進入 圖層 > 路徑 > 描邊寬度 (Layer > Paths > Stroke width)?，F(xiàn)在再點擊畫布上的圖形邊框，添加一個寬度錨點，你可以拖拽這個錨點使描邊變寬或變窄。