上篇介紹完Sketch令人驚喜的功能后，同學(xué)們紛紛表示：Sketch已經(jīng)有了，就差Mac了。今天除了提醒大家可以用虛擬機(jī)外，直接上作者的新教程，讓同學(xué)們迅速輕松掌握Sketch的工具使用，有Sketch的同學(xué)趕緊動(dòng)手吧！

@JingDesign?：上一篇教程中，靜電和大家一起認(rèn)識(shí)了Sketch 能為我們帶來(lái)的驚喜之處。那么這一節(jié)的設(shè)計(jì)教室中，大家一起來(lái)認(rèn)識(shí)一下我們的新朋友。 相信在經(jīng)過(guò)這一節(jié)的教程，大家都能輕松上手了。上一節(jié)的教程后，很多朋友跟我反饋說(shuō)：Sketch已經(jīng)有了，就差Mac了。其實(shí)，對(duì)于操作系統(tǒng)，靜電一直認(rèn)為適合大家就好。Mac有Mac的優(yōu)勢(shì)，Windows有Windows的便利。 但非常遺憾的是，Sketch現(xiàn)在沒(méi)有Windows版本，但沒(méi)有Mac的朋友也不必失望，我們可以通過(guò)裝虛擬機(jī)的方式體驗(yàn)下Sketch。相信萬(wàn)能的度娘和Google一定可以解決大家這個(gè)問(wèn)題。

上篇教程戳：《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（一）》

首先我們打開這個(gè)美麗的寶石。主界面如下，我們看到，頂部是工具欄，一大堆的按鈕。下邊默認(rèn)分三欄，左邊是頁(yè)面，圖層等等的操作。 中間是空白的工作區(qū)（畫布），右側(cè)是屬性欄，我們可以在這個(gè)界面中調(diào)節(jié)元素的各種屬性。

這個(gè)時(shí)候有人可能會(huì)問(wèn)，我的工具欄不是這個(gè)樣子的，空空如也！你是怎么做到的？ ok，要有一個(gè)舒服的工作流程，首先我們要把自己的工作區(qū)域弄的舒舒服服，各種工具隨手拈來(lái)。

第一步：定義sketch的工具欄

在有圖標(biāo)的空白地方點(diǎn)擊右鍵，在彈出的菜單中點(diǎn)擊“customize toolbar”，在彈出的對(duì)話框中，我們會(huì)看到很多很多工具。 如果你英文不好，但估計(jì)關(guān)系也不大，我們來(lái)認(rèn)一下。 鋼筆工具，鉛筆工具，文字工具，圖像工具，切片，artboard（這個(gè)隨后講），直線工具，箭頭工具，圖形庫(kù)，矩形，圓角矩形，圓形，三角形，多邊形，星型，元件，有格式的文本，組合，解除組合，結(jié)合路徑，接下來(lái)這三個(gè)就是兩個(gè)矢量圖像進(jìn)行組合，挖空等等，接下來(lái)的forward，backward-這是對(duì)圖層進(jìn)行上一層，下一層的操作，tools（工具），變形，平面化，剪刀，圖形排列，編輯路徑，旋轉(zhuǎn)，字符格式，描邊，縮放，蒙版，view（內(nèi)有標(biāo)尺顯示等等的工具），顯示標(biāo)尺，顯示網(wǎng)格，顯示布局，顯示像素，導(dǎo)出，創(chuàng)建元件，mirror（一款類似于psplay的在手機(jī)上預(yù)覽效果圖的工具，另收費(fèi)），縮放，制作網(wǎng)格，顏色，字體，空白，分隔空間（其實(shí)就是在toolbar上顯示一條線。）

好了，經(jīng)過(guò)上邊的翻譯，相信大家已經(jīng)可以在自己的頭腦中找到某些類似軟件的影子了。現(xiàn)在，選擇自己常用的工具，拖動(dòng)到下方的框中或者直接拖動(dòng)到工具欄上。這樣就ok了！

第二步：使用artboard來(lái)繪圖

自定義工具欄后，我們就可以開始小試牛刀了。那么底下這塊空白區(qū)域就是我們可以繪制的“畫布”。 有人會(huì)問(wèn)，我不能自定義畫布的大小嗎？恩，剛開始靜電也有這樣的疑問(wèn)，但試過(guò)剛才圖標(biāo)欄目下的artboard后，你就這樣這樣的操作是多余的了。 好的，我們選擇artboard或者insert，選擇插入一個(gè)artboard。這個(gè)時(shí)候鼠標(biāo)變成了十字型，我們可以自己拖動(dòng)鼠標(biāo)畫一個(gè)“畫布”了，然后選擇右側(cè)的屬性區(qū)域，精確定義“畫布”的大小和位置。對(duì)了，在sketch中，我們最好不要把這個(gè)東西叫做“畫布”，它是artboard（藝術(shù)板）。我們可以在同一個(gè)界面中創(chuàng)建多個(gè)artboard，非常方便，就如下圖所示。左側(cè)會(huì)出現(xiàn)artboard的名字，我們?cè)趫D層名字上雙擊，即可修改artboard的名字了。

然后，在artboard上盡情繪制吧。 選擇矩形，原型，三角或者星星，隨便涂鴉。當(dāng)然，你也可以在artboard外邊畫一些東西。當(dāng)做注釋。這個(gè)時(shí)候，左側(cè)的圖層會(huì)多出一些東西，你可以拖動(dòng)他們調(diào)整圖層位置，或者選擇鎖定或者隱藏某些圖層。右側(cè)的屬性面板，在選擇某個(gè)元素后，可以修改一些元素的屬性，比如描邊，字體顏色，大小等等。和常用的ps等軟件基本類似。

第三步：sketch特色——體驗(yàn)強(qiáng)大的對(duì)齊功能

我們?cè)赼rtboard上繪制了一些元素，這個(gè)時(shí)候，我們可能會(huì)需要讓他們對(duì)齊，或居中，或居右。 這個(gè)時(shí)候我們會(huì)發(fā)現(xiàn)sketch的強(qiáng)大對(duì)齊功能了，拖動(dòng)某個(gè)元素，輔助線便會(huì)顯示，但比起ps智能太多了，這個(gè)功能，只有自己親自上手體驗(yàn)才能感受的到。

第四步：使用rotate copies創(chuàng)建神奇的圖形

選中剛才畫的星型，選擇rotate copies，接著選擇要復(fù)制的步數(shù)。我這里選擇30.確定，看看發(fā)生了什么神奇的事情。如果你找不到rotate copies，那么看第一步中的操作，把圖標(biāo)從工具庫(kù)中拖到toolbar上。

第五步：使用位圖和創(chuàng)建遮罩

有時(shí)候我們需要導(dǎo)入一些位圖到我們的工作項(xiàng)目中，雖然Sketch是一款矢量工具，但對(duì)于位圖的基本處理也是非常棒的。首先選擇image工具，在彈出的窗口中選擇一張你要導(dǎo)入的圖片。靜電在這里導(dǎo)入兩只可愛(ài)的小貓圖像，同樣，右側(cè)的屬性窗口中可以調(diào)節(jié)位圖的一些屬性，坐標(biāo)，大小，透明度，邊框，投影，模糊等等，你們看，其實(shí)他的位圖功能還是蠻不錯(cuò)的哈。

接下來(lái)，我們要把這張小貓加上圓角。我們使用圓角矩形工具畫一個(gè)圓角矩形，調(diào)節(jié)圓角矩形的弧度和位置，把這個(gè)圓角矩形蓋在這個(gè)位圖之上，選中這兩個(gè)圖形， 接著選擇工具欄中的mask（如果找不到遮罩工具，可以看一下步驟一中的操作，把遮罩工具拖進(jìn)來(lái)，其實(shí)我們還是應(yīng)該記住一些快捷鍵，因?yàn)閠oolbar的位置非常有限），遮罩形成了，我們看到了變成圓角的位圖。很簡(jiǎn)單吧？

ok，到這里，我們已經(jīng)熟悉了很大一部分操作了，可以說(shuō)這個(gè)軟件的大部分操作都非常容易上手。大家跟隨靜電的步驟，一步步的實(shí)驗(yàn)吧，相信這個(gè)對(duì)每個(gè)人來(lái)說(shuō)都是無(wú)比簡(jiǎn)單的。再嘮叨一下，至于說(shuō)英文不好，或者沒(méi)有mac這樣的理由，那壓根就不是理由好么，第一，靜電建議大家在使用軟件的時(shí)候，盡量選擇英文版，剛開始可能會(huì)有一些難度，但習(xí)慣之后，你會(huì)發(fā)現(xiàn)，大部分的詞在每一個(gè)軟件中都會(huì)出現(xiàn)，比如什么pencil啊，rotate（翻轉(zhuǎn)）了之類。實(shí)在不懂，那索性用一下，就知道這個(gè)圖標(biāo)或文字所代表的功能了，反正就是折騰嘛，我們多按一個(gè)鍵，隨便拖動(dòng)一下，電腦又不會(huì)爆炸。大不了從頭開始來(lái)過(guò)。

嗯哼。至于mac，靜電建議大家裝虛擬機(jī)試用，或者買一臺(tái)macmini（為什么呢？很便宜性能又好有木有？初接觸mac系統(tǒng)的同學(xué)推薦。）還有一招，除了虛擬機(jī)，我們可以在pc上安裝蘋果系統(tǒng)，但非常耗時(shí)而且得不到官方支持，靜電最初接觸蘋果就是從“黑蘋果”開始的，這個(gè)請(qǐng)自行斟酌。

最后，感謝好友rongfei和rongrong在sketch上對(duì)我的幫助，rongfei提供了折扣碼讓我以更優(yōu)惠的價(jià)格買到了正版sketch，rongrong也是sketch的簇?fù)?，最初接觸的時(shí)候，一直纏著她各種問(wèn)，真是辛苦了。 總之，大家相互學(xué)習(xí)與交流，希望有更多使用sketch的設(shè)計(jì)師出現(xiàn)。

下一講靜電與大家一起來(lái)學(xué)習(xí)sketch的特色獨(dú)有功能。 請(qǐng)務(wù)必要關(guān)注jingdesign與靜電的設(shè)計(jì)教室。 有疑問(wèn)的朋友可以關(guān)注靜電的微信公眾號(hào)jingdesign91與我們一起進(jìn)步。

掃描下面的二維碼關(guān)注jingdesign公眾號(hào).

新手從零開始學(xué)好文合集！

學(xué)完直接晉級(jí)摳圖高手！
《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》

超全面的設(shè)計(jì)師自學(xué)指南！
《超贊！設(shè)計(jì)師完全自學(xué)指南》

多位資深前輩經(jīng)驗(yàn)合集！交互設(shè)計(jì)師自學(xué)指南！
《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》

原文地址：ui
作者：@JingDesign

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量76萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：