（4）用Sketch繪製鑽石圖標

今天我們來學習如何用Sketch繪製這枚黃燦燦的鑽石，好在從v41之後Sketch更換了圖標，不然還真不好畫呢。

要想知道每個工具怎麼用，就必須要用起來，還要配合了解前面介紹的圖層、藝術板、屬性。我們以繪製一個鑽石圖標為例。

新建文件

啟動Sketch，在歡迎界面選擇右邊白色區域的「New Document」，然後點擊右下角的「Choose」按鈕，您也可以直接雙擊「New Document」，即可新建文檔。

新建藝術板

有兩種方法：

1. 從工具欄選擇Insert—Artboard，隨後滑鼠在畫布中框選一個範圍，即可生成一個藝術板。

2. 您可以看到菜單後面有一個字母，那是它的快捷鍵，所以您可以直接按下鍵盤的「A」來激活藝術板功能。

除了在畫布中直接繪製隨意尺寸的藝術板，當您激活藝術板功能時，右側的屬性面板會變成相應的功能，您可以看到Sketch提供了多種時下潮流的齊全的設備規格。

這裡我們先用滑鼠拖放一個300x300px的空白藝術板，如果您用滑鼠沒有精確的拖拽出來這個尺寸也沒關係，鬆開手，右側的屬性面板會出現該藝術板的屬性，您可以在它上面調整數值。

有一個快速的方式，您點擊size的Width輸入後，按下鍵盤的Tab即可快速跳到Height輸入框，輸入數值後按下回車鍵即可完成尺寸設定，比用滑鼠一一點選要快。

藝術板繪製完了，接下來我們為了更精確的畫圖，建議把視圖放大些，選中我們剛才新建的藝術板「Artboard」，有兩種方法選中它：

1. 在左側圖層面板中單選「Artboard」；

2. 在畫布中的藝術板左上角的藝術板名字上懸停時，文字下方的藝術板區域會出現藍色邊框，此時點按即可選中藝術板。

隨後放大視圖，可點按工具欄上的視圖按鈕放大，也可以用鍵盤command+=，還有一個更方便的快捷鍵Command＋2，可直接將選中的元素放大到鋪滿畫布視野。

接下來我們新建一個圓角矩形，選擇工具欄Insert－>shape－>rounded，滑鼠會變成十字，在剛才新建的藝術板中拖拽一個280x280px的圓角矩形。您可以看到菜單項的後方有字母「U」，說明您可以直接用快捷鍵「U」來快速選擇圓角矩形工具。

同樣的，我們可能需要在右側屬性面板中手動輸入數值，可以看到寬度和高度之間有一把黑色小鎖，默認時解鎖狀態，點選它，使其變成鎖定，即可保持兩個數值同步變化，這樣我們輸入寬度後，高度也就會跟著變化了。隨後我們在左側圖層面板中在剛剛建立的「Rectangle」圖層上雙擊改名為「圓角矩形」。

tips：當數值在編輯狀態時，除了直接輸入數值外，還可以通過鍵盤的上下方向鍵來逐一增減數值，按住shift可每次增減10，按住option可每次增減0.1，此技巧適用於所有數值文本框。當數值不在編輯狀態，滑鼠移動到數值上方，右側會出現上下箭頭，點按一次增減1，按住shift點按一次增減10，按住option點按一次增減0.1。

繪製完之後，我們發現由於我們框選的時候滑鼠的起始位置沒有考慮周全，所以當尺寸正確之後位置又不對了。我們需要它在藝術板中居中。

選中「圓角矩形」，在右側屬性面板的上方先後點擊垂直對齊和水平對齊，即可自動將圓角矩形置於藝術板「Artboard」正中央。

首先我想修改一下圓角的弧度，右側屬性面板中找到「Radius」，由默認的8改為20或者您覺得合適的弧度。

接下來我們去除描邊，保持「圓角矩形」被選中的前提下，在右側屬性面板中找到「Borders」，它下面包含了一個描邊屬性，取消前面的勾選，即可讓我們的「圓角矩形」去除描邊。

把圓角矩形的顏色改為黑色。找到描邊屬性上面的填充屬性，在Fills下面的一條灰色填充屬性里，點擊色塊，彈出拾色器和色板，選黑色，滑鼠再在其他區域隨意點一下即可關閉拾色器（也可按esc鍵）。

接下來我們在圓角矩形圖層的上方新建一個倒三角形，選擇工具欄中的三角形工具 ，調整位置和參數如下圖。

由於工具是繪製正三角，那麼如何變成倒三角呢？有兩個辦法，一個是旋轉180度，一個是垂直鏡像翻轉，都在右側面板中。調整坐標、寬高、取消描邊。

接下來我們給倒三角填色，這裡需要填充漸變色而不是單色，那麼在哪裡操作呢？點擊Fills下方的第一個填色屬性，點擊色塊，在滑塊的上方有填充方式選擇，我們選擇第二個「漸變」，並且在滑塊中單擊一次以新增一個變色錨點，同時左側畫布中拖拽漸變色條錨點以擺放到如圖所示。

接下來，我們需要疊加一個徑向漸變。

點擊Fills面板右側的加號圖標，新增一條填色屬性，按照下圖方式設置屬性。選擇徑向漸變，從內到外從白到黑漸變，同時調整畫布中漸變錨點到半徑和橢圓率。最後在混合模式選擇「overlay」，效果最後如下圖。

現在我們在三角形上再疊加較小的三角形，並填充漸變色。請放大視圖確保兩個三角形底部的尖尖是對齊的。

現在我們繪製鑽石的上半部分，新建一個矩形（快捷鍵R），參數如下圖，命名為「上五邊形」。隨後設置邊框和填色。

tips：使用Trackpad可以方便的移動和縮放畫布，我在繪製這個圖標的時候都沒有使用滑鼠。

選中「上五邊形」，使用「變形」工具，對「上五邊形」進行透視變形。點擊變形工具後，矩形的錨點變成了圓圈，表示錨點被激活，可對錨點進行操作。選則左上角或者右上角的錨點進行水平方向的拖拽，可讓「上五邊形」變成梯形。

我們需要對梯形增加一個錨點，使其變成真正的五邊形。選中「上五邊形」，按下鍵盤迴車鍵激活錨點編輯狀態，滑鼠移動到上邊的線上，滑鼠會變成帶加號的鋼筆，按住command鍵在這條線的中間位置（附近也可）點擊，即可精確的在正中間位置新增一個錨點。錨點建立完之後，該錨點默認被選中，將該錨點向上移動些許距離，為確保移動過程中不發生左右偏移，建議使用鍵盤的上方向鍵移動。

對「上五邊形」設置徑向漸變填充，效果如下圖，

接下來我們要新建一個窄一些對五邊形，簡單的辦法是複製現有的五邊形，稍加調整即可。使用快捷鍵（command＋D）可以快速複製當前選中的元素。將複製出來的圖層改名為「上五邊形小」，然後回車激活錨點編輯，分別選中左下角的錨點往右移動，選中右下角的錨點往左移動，兩邊移動距離要相同。目的是讓這2個錨點於下面的小三角形對齊。隨後我們改變填充顏色以區分下面的大五邊形。其中有些微調就不在這裡贅述了。

接下來再蓋一個正三角形在上半部分，這裡我們可以偷懶複製「下小三角」圖層並改名為「上小三角」，然後垂直翻轉移動到上面。隨後我們發現它被兩個五邊形蓋住了，這裡我們可以在左側圖層面板通過拖拽到最上方來調整圖層順序，也可以通過在工具欄的Forward來上移圖層。隨後調整三角形的尺寸和位置，複製「上五邊形小」的樣式（填充和描邊），應用到「上小三角」，隨後調整填充的漸變色如下圖。

我們還需要為「上小三角」添加一個從下往上的投影，效果和參數如下圖，

此時，我發現投影襯托出三角形頂部的描邊，使得過渡不自然，因此我們需要讓描邊的上半部分漸隱，由於這個描邊本身就是漸變色，所以只需要調整上半部分的透明度就可以了。

接下來，我們需要把腰部的白色橫線貫穿並且自然的過渡到邊緣。因此我們需要畫2條直線。按「L」鍵啟用直線工具，在左邊先畫一條，隨後設置漸變色描邊。請注意您的圖層順序，如果沒在最上面，請到左側圖層面板中找到並拖拽到頂部。將線條的寬度從默認的1改為2，為的是和已經存在的白線等粗。

tips：按住Shift可畫橫平豎直的直線。

做完這一步，我們需要複製它到另一邊。選中「line」，按下「command＋D」，拖動複製出來的線條到右側，然後點擊右側屬性名板到「水平翻轉」，精確對齊即可。

恭喜你，初次使用Sketch完成了一個簡單的圖標繪製。接下來，我們要把它導出來，我們可以導一個png格式的圖，如果不需要黑色背景之外的白色背景，那麼選中「Artboard」之後，在右側的屬性面板不勾選「Background Color「即可。在底部點擊「Make Exportable」右邊的加號，新增一個1x的png。隨即右側出現了導出預覽圖，點擊「Make Exportable」下方的「export Artboard「按鈕即彈出詢問保存到何處到對話框，選擇後，如果您在建立藝術板的時候修改了藝術板的名稱，那麼導出時，選擇導出這個藝術板，那麼保存的文件名也會是您定義的藝術板的名字。

下方的「save for web」建議選中，可減小體積，保存後，您可以去您保存的地方查看了。

以上內容是讓您可以快速上手常用工具的使用，如果要用它設計一個App界面，還需要用到不少功能，本系列教程將教會您繪製出一組App界面。