使用Sketch 3繪製藍色手機APP水滴圖示
最終效果
Sketch是一種非常靈活的設計工具，你可以使用它來設計製作網頁和應用程式的介面。在本教程中，我將向你介紹Sketch中的畫板，層，投影，內陰影，文字，邊框和填充功能，並告訴你如何使用它們來建立一個簡單醒目的圖示。
如果這是您第一次開啟Sketch 3，要記住關於Sketch介面中的四個要點：
頂部，設計工具組（如矩形，三角形等） 左側，圖層面板 中間，設計的主控制區，是一個無限的畫布 右側，選定工具的設定選項
1. 新增畫板畫板是組織你的設計自由分割的簡單方法。Sketch 3為您提供了一個預設畫板，當您按A鍵（或Insert > Artboard）。你可以看到，你的Sketch介面的右側有蘋果主要裝置的各種螢幕尺寸：
選擇iPad screens >Landscape。現在，您可以看到它出現在左側的圖層面板。如果你的視窗比較小，別忘了縮小畫布，按【Command】+【-】縮小畫布比例就可以看到整個畫板。
通過雙擊它圖層面板的名稱，可以為這個畫板重新命名。給它命名為【Water Icon】。你可以看到介面上是這樣的效果：
2.建立背景目前我們有一個1024px＊768px的iPad畫板。讓我們首先新增背景。按R鍵（或Insert > Shape >Rectangle），在畫板上按住並拖動滑鼠/手指做出一個矩形。現在，您可以看到它在圖層面板中。重新命名【Background】。
接下來，我們去右邊面板，將我們的【Background】的屬性調整為：
Position x 0 y 0
Size 1024 768
（譯者注：最新的Retina尺寸為2048 1576）
讓我們新增一些樣式。找到邊框並取消它。現在，點選預設灰色的填充屬性更改為漸變。下拉選單中顯示有五個選項：純顏色，線性漸變，徑向漸變，角度漸變，圖案填充和新增雜色。
從左到右依次是【純顏色】，【線性漸變】，【徑向漸變】，【角度漸變】，【圖案填充】和【新增雜色】
點選【線性漸變】。現在可以看到一個滑動器，白色在漸變滑動軸的前面，黑色在漸變滑動軸的末端。要改變它們的顏色，你只需要點選他們上面的滑塊：
讓我們來設定顏色。Sketch可以點選RGB或HSB標籤上的字母，在RGBA和HSBA的模式之間切換。我比較熟悉HSBA，本課程都將使用這種模式，我選擇的顏色前面為H190，S50，B100，A100，末端為H210，S50，B100，A100。
3. 建立圖示我們現在將建立包含水滴的圖示。首先新增一個新的矩形。按R鍵，然後單擊並拖動。然後重新命名你的新層【icon】。
通過右側面板的頂部的【垂直居中對齊】工具使它居中，並設定寬高都是515：
使用上面的位置工具來設定層相對於畫板的位置
設定倒角半徑為144，取消邊框的顏色，然後選擇白色填充圖示背景。
投影現在我們將新增一些投影。投影的功能有五個選項：顏色，X位置，Y位置，模糊，和擴充套件。投影設定為：
Color: H210, S70, B80, A100
X: 0
Y: 24
Blur: 55
Spread: 0
用於【icon】的最後一個步驟是在底部新增內側陰影。內陰影遵循投影功能完全相同的設定方法，但它僅擴散到您的形狀的內側。我們可以通過設定調整內陰影：
Color: H190, S30, B100, A100
X: 0
Y: -13
Blur: 21
Spread: 0
最後你應該得到這樣的效果：
4.建立水滴這將是您學習如何建立水滴圖示最後的步驟。首先我們需要一個橢圓形的，所以按O（或Insert > Shape >Oval），並定義其尺寸為寬度：200，高度：200。
接下來，將Insert > Shape >Triangle（這個沒有快捷鍵）建立一個三角形。到右側面板中，勾選Equilateral設定為等邊，並設定寬高都為200。
這個選項是變為等邊三角形的關鍵。
現在快到了關鍵的步驟，定位你的圖層是這樣的：
選擇這兩個圖層，在Sketch介面的頂部點選【Union】按鈕。
現在，我們有了水滴形狀，但是頂部太尖銳了，為了讓它看起來更柔和友好，我們給它加入上面的倒角。要做到這一點，選擇形狀，然後在頂部工具欄中單擊【Edit】工具。
現在，我們有了水滴形狀，但是頂部太尖銳了，為了讓它看起來更柔和友好，我們給它加入上面的倒角。要做到這一點，選擇形狀，然後在頂部工具欄中單擊【Edit】工具。
恰好選擇的第一個點就是我們要編輯的。到右側面板改變倒角為34。
恭喜！水滴形狀現已完成！現在你可以使它通過點選在頂部的選單欄圖示（向右旋轉）。選擇在圖層面板中的層並重新命名【Droplet】。到右側面板，設定寬度為266，高度為377，然後在右側面板頂部的工具選擇居中：
現在的最後一步：樣式！首先取消邊框，然後填充顏色，選擇【徑向漸變】。前面H190，S70，B100，A100，和末端H210，S70，B100，A100。
然後，我們將增加一個內陰影：
H190, S100, B100, A100
X: 0
Y: -34
Blur: 55
Spread: 0
恭喜！它完成了！
感謝您閱讀本教程。我希望它幫助你學會使用Sketch中一些基本的工具。
如果有需要【PS基礎課程】【人像修圖】【案例課程】【精品素材】在下方評論：666，轉發之後關注，點選我的頭像往下翻就可以看到了。
最後希望大家給盛老師一個好評哦，謝謝大家支援！