早前寫過兩篇Sketch教程文章：《Sketch進階教程：這可能是Symbol最詳細的使用說明書》和《Sketch基礎(chǔ)教程：蒙版（Mask）的使用詳解》，在Sketch愛好者中反響不錯，但是適用于有一定的Sketch基礎(chǔ)的同學(xué)查看。反觀現(xiàn)在網(wǎng)上的教程，存在教程零散、適用的版本陳舊等特點，所以就有了玩轉(zhuǎn)Sketch系列文章，幫助更多0基礎(chǔ)的新人學(xué)習(xí)和掌握Sketch。
注：玩轉(zhuǎn)Sketch系列教程適用于Sketch44或者更高級的版本。
1.Sketch簡介
（1）Sketch是什么？
Sketch是一款輕量、高效的矢量設(shè)計工具，它在矢量編輯基礎(chǔ)上，提供了基本的位圖樣式支持（例如模糊和顏色調(diào)節(jié)），支持矩形工具、文字工具、布爾運算等功能。你可以把它看做是簡化版的Photoshop，矢量版的Axure rp。但需要注意的是，Sketch不是一款位圖編輯器。這就是說，你如果想做的是照片修正、畫筆繪圖，這款軟件就不合適。
（2）Sketch有哪些優(yōu)勢
①界面簡單易上手
一款軟件是否好用，上手難度是初學(xué)者首先需要接受的考驗，Sketch界面簡單易上手，大大降低了初學(xué)者的學(xué)習(xí)門檻，這也是Sketch一貫強調(diào)的：“我們提供一款輕量的軟件，希望設(shè)計師們專注于設(shè)計本身”。和Photoshop的界面對比，Sketch的界面十分簡潔，這也是我極力推薦交互設(shè)計師學(xué)習(xí)這款軟件的原因，它不需要你花多少精力就能上手，并實際應(yīng)用到交互設(shè)計中。
②高低保真原型一鍵切換
在產(chǎn)品設(shè)計項目中，低保真原型的重要性不言而喻，但不可忽視的是，高保真原型對產(chǎn)品上線效果的真實預(yù)見。使用Sketch繪制線框圖之后，使用Sketch自帶的Symbol能很容易切換至高保真原型圖。
③支持簡單圖像處理
Sketch雖然不是一款位圖編輯器，但是它也可以針對圖像進行簡單的處理，例如變形、添加蒙版等。
④自帶組件庫
平常，我們想要設(shè)計一款I(lǐng)OS或者安卓手機應(yīng)用時，需要自行了解平臺的設(shè)計規(guī)范，動手制作圖標(biāo)素材。然而，Sketch自帶根據(jù)官方規(guī)范設(shè)計的IOS和Material Design組件庫，我們只需要直接調(diào)用即可，大大簡化了交互設(shè)計中間的必經(jīng)步驟。
⑤豐富的插件庫
Sketch支持第三方插件，第三方插件可以讓我們更高效地使用Sketch做設(shè)計，例如通過Sketch Measure插件，我們很容易為設(shè)計稿進行標(biāo)注，方便前端開發(fā)進行效果實現(xiàn)。
2.Sketch獲取
Sketch軟件目前只能通過Sketch官網(wǎng)下載安裝，需要說明的是，Sketch屬于收費軟件，需要支付99美元，折合人民幣大約700元，Sketch提供一定的試用期供我們體驗試玩。在購買之前，最好準(zhǔn)備一張VISA的信用卡，因為購買Sketch不支持國內(nèi)的支付寶、微信等支付方式。
另外，Sketch提供教育優(yōu)惠購買，如果你是屬于在校學(xué)生、教師或者在校職工，則可以5折購買，十分劃算；如果屬于學(xué)術(shù)機構(gòu)，則可以免費獲得。
官方下載/購買地址：https://www.sketchapp.com
教育優(yōu)惠申請地址：https://sketchapp.com/store/edu/
3.Sketch界面介紹
獲取到Sketch之后，我們先從界面開始認(rèn)識一下這款軟件，如下圖所示，Sketch主要分為菜單欄、工具欄（Toolbar）、頁面（Page）、圖層（Layer）、畫布、檢查器等幾個部分。
（1）菜單欄
Sketch的菜單欄分為：File、Edit、Insert、Layer、Type、Arrange、Plugins、View、Window、Help等，從字面上很容易理解各個菜單的大致用途，后續(xù)結(jié)合教程會具體展開各個菜單的具體應(yīng)用。一般來說，用得最頻繁的是Plugins菜單，因為其中包括所有的第三方插件。
（2）工具欄
工具欄主要放置矩形、文字、橢圓等工具，需要說明的是：Sketch的工具欄是可以自定義的，我們可以根據(jù)自己的使用習(xí)慣定制工具欄。具體步驟是，右鍵點擊工具欄，選擇“Customize Toolbar”,在展開的工具欄中，鼠標(biāo)按住具體的工具，拖動放置在工具欄的任意位置，最后點擊“Done”即可。
（3）頁面（page）
Sketch可以創(chuàng)建多個頁面（page），頁面之間互不干擾，且可以同時引用Symbol。添加頁面的方式比較簡單，點擊Pages右側(cè)的“+”即可。
（4）圖層（Layer）
通過圖層，我們可以快速定位到圖層，并且可以對圖層進行處理，例如鼠標(biāo)懸停在圖層上方時，可以點擊“眼睛”符號對圖層進行顯示、隱藏操作。
（5）畫布
畫布是使用Sketch創(chuàng)作的核心，在Sketch中，畫布是無限延伸的，即畫布沒有規(guī)定固定大小，當(dāng)然，你可以通過添加畫板（Artboard）來限定創(chuàng)作區(qū)域。
（6）檢查器
在檢查器中，我們可以對圖層進行大小編輯、旋轉(zhuǎn)、上色、添加陰影等操作。
4.使用Sketch創(chuàng)作第一個內(nèi)容
通過上面的介紹，我們對Sketch有了總體的了解，現(xiàn)在，開始創(chuàng)作第一個內(nèi)容吧。
（1）第一步：打開Sketch新建一個文件
如果是安裝后首次打開，會出現(xiàn)一個歡迎頁面，我們可以先選擇“Templates”-“New Document”打開即可。
（2）第二步：插入一個圖形
我們可以通過工具欄的橢圓工具插入，或者通過工具欄的“Insert”-“Shape”-“Oval”插入。
（3）第三步：調(diào)整橢圓的比例大小
通過檢查器的“Size”，調(diào)整橢圓的寬度（Width）和高度（Height），使其保持一致。如果點擊“鎖”圖標(biāo)，則鎖定了橢圓的高度和寬度按照固定比例進行調(diào)整。
（4）第四步：調(diào)整圓形的填充和邊框顏色
通過檢查器的“Fills”和“Borders”，分別點擊“Fill”和“Color”，選擇自己想要的顏色。至此，第一個創(chuàng)作的內(nèi)容就完成了。
（5）第五步：導(dǎo)出第一個內(nèi)容
我們創(chuàng)作的內(nèi)容完成了，下一步就是導(dǎo)出的操作，如圖所示，選中剛才創(chuàng)作的圓形，在Sketch界面右下角選擇“Make Exporttable”。在展開的面板中，點擊“Export oval”即可。導(dǎo)出的格式可以選擇PNG、JPG、TIFF等格式。
