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

額外選項(xiàng)

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

圖形術(shù)語

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

圖形編輯

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

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

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

http://wiki.jikexueyuan.com/project/sketch-3/images/rounded.jpg" alt="" />

點(diǎn)模式

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

在編輯圖形的時(shí)候，檢查器會(huì)顯示出四種不用的點(diǎn)模式：

直線角 (Straight)：當(dāng)你剛剛點(diǎn)擊畫布的時(shí)候，會(huì)添加一個(gè)直角，也就是說沒有任何錨點(diǎn)，你所得到的便是一條直線。
鏡像 (Mirrored)：錨點(diǎn)會(huì)鏡像對(duì)應(yīng)。兩個(gè)錨點(diǎn)將會(huì)與主點(diǎn)距離相同并且正好相互對(duì)立。當(dāng)主點(diǎn)并非直角時(shí)，鏡像便是默認(rèn)的點(diǎn)模式。
不對(duì)稱 (Asymmetric)：兩個(gè)錨點(diǎn)到主點(diǎn)之間的距離是獨(dú)立的，但他們依然相互對(duì)應(yīng)。
斷開連接 (Disconnected)：錨點(diǎn)之間完全獨(dú)立，互不影響。

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

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

http://wiki.jikexueyuan.com/project/sketch-3/images/modes.jpg" alt="" />

繪制 VS 編輯

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

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

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

封閉路徑 VS 開放路徑

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

針對(duì)一個(gè)開放路徑，你可以隨時(shí)在編輯模式中隨時(shí)添加新的錨點(diǎn)。

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

http://wiki.jikexueyuan.com/project/sketch-3/images/open.jpg" alt="" />

快捷鍵

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

如果你按住 command 鍵，單擊兩點(diǎn)間的線條，Sketch則會(huì)幫你在線條的正中間添加錨點(diǎn)。

選中多個(gè)點(diǎn)

有一個(gè)不那么明顯的功能是你可以同時(shí)選中多個(gè)點(diǎn)，一起移動(dòng)它們。在選擇點(diǎn)的時(shí)候按住 shift 鍵就好，你會(huì)看見被選中的點(diǎn)中心是白色的，而沒被選中的點(diǎn)中心是灰色的。

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

布爾運(yùn)算

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

子路徑

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

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

布爾運(yùn)算

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

http://wiki.jikexueyuan.com/project/sketch-3/images/operations.jpg" alt="" />

合并形狀 (Union)：合并的結(jié)果是會(huì)得到兩個(gè)矢量區(qū)域的總和。
減去頂層形狀 (Subtract)：這一項(xiàng)的結(jié)果是頂層矢量的區(qū)域會(huì)從下一層的圖形上移去。
與形狀區(qū)域相交 (Intersect)：與形狀區(qū)域相交的結(jié)果是會(huì)保留原圖形重疊的部分。
排除重疊形狀 (Difference)：排除重疊形狀的結(jié)果是只保留原圖形不重疊的部分，它是“與形狀區(qū)域相交”這一運(yùn)算的反向。

圖層列表

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

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

http://wiki.jikexueyuan.com/project/sketch-3/images/boolean-operations2.jpg" alt="" />

圖層扁平化

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

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

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

變形工具

變形工具可以通過改變點(diǎn)的位置或者制造一個(gè)視覺上的 3D 效果來使一個(gè)矢量圖形變形。Sketch 里，你可以運(yùn)用變形工具變形一個(gè)或同時(shí)變形多個(gè)圖層。

選中一個(gè)或多個(gè)圖層，然后單擊工具欄里的變形工具。你可以拖動(dòng)四角的錨點(diǎn)來任意改變圖形的形狀，或者拖拽中間的錨點(diǎn)來同時(shí)移動(dòng)兩個(gè)邊角使圖形傾斜。

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

http://wiki.jikexueyuan.com/project/sketch-3/images/transform2.jpg" alt="" />

蒙版

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

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

http://wiki.jikexueyuan.com/project/sketch-3/images/masks2.jpg" alt="" />

限制蒙版

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

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

選中一個(gè)你想從剪切蒙版中釋放出來的圖層
進(jìn)入圖層 > 忽略底層蒙版 (Layer > Ignore Underlying Mask)

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

圖形蒙版

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

ALPHA 蒙版

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

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

http://wiki.jikexueyuan.com/project/sketch-3/images/alphamasks.jpg" alt="" />

剪刀工具

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

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

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

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

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

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

http://wiki.jikexueyuan.com/project/sketch-3/images/rotate-copies.jpg" alt="" />

分離路徑

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

鉛筆

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

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

描邊寬度

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

http://wiki.jikexueyuan.com/project/sketch-3/images/stroke-width.jpg" alt="" />