Sketch設計教室！從零開始學APP設計利器Sketch（二）

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

@JingDesign?：上一篇教程中，靜電和大家一起認識了Sketch 能為我們帶來的驚喜之處。那么這一節的設計教室中，大家一起來認識一下我們的新朋友。 相信在經過這一節的教程，大家都能輕松上手了。上一節的教程后，很多朋友跟我反饋說：Sketch已經有了，就差Mac了。其實，對于操作系統，靜電一直認為適合大家就好。Mac有Mac的優勢，Windows有Windows的便利。 但非常遺憾的是，Sketch現在沒有Windows版本，但沒有Mac的朋友也不必失望，我們可以通過裝虛擬機的方式體驗下Sketch。相信萬能的度娘和Google一定可以解決大家這個問題。

上篇教程戳：《SKETCH設計教室！從零開始學APP設計利器SKETCH（一）》

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

這個時候有人可能會問，我的工具欄不是這個樣子的，空空如也！你是怎么做到的？ ok，要有一個舒服的工作流程，首先我們要把自己的工作區域弄的舒舒服服，各種工具隨手拈來。

第一步：定義sketch的工具欄

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

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

第二步：使用artboard來繪圖

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

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

第三步：sketch特色——體驗強大的對齊功能

我們在artboard上繪制了一些元素，這個時候，我們可能會需要讓他們對齊，或居中，或居右。 這個時候我們會發現sketch的強大對齊功能了，拖動某個元素，輔助線便會顯示，但比起ps智能太多了，這個功能，只有自己親自上手體驗才能感受的到。

第四步：使用rotate copies創建神奇的圖形

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

第五步：使用位圖和創建遮罩

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

接下來，我們要把這張小貓加上圓角。我們使用圓角矩形工具畫一個圓角矩形，調節圓角矩形的弧度和位置，把這個圓角矩形蓋在這個位圖之上，選中這兩個圖形， 接著選擇工具欄中的mask（如果找不到遮罩工具，可以看一下步驟一中的操作，把遮罩工具拖進來，其實我們還是應該記住一些快捷鍵，因為toolbar的位置非常有限），遮罩形成了，我們看到了變成圓角的位圖。很簡單吧？

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

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

最后，感謝好友rongfei和rongrong在sketch上對我的幫助，rongfei提供了折扣碼讓我以更優惠的價格買到了正版sketch，rongrong也是sketch的簇擁，最初接觸的時候，一直纏著她各種問，真是辛苦了。 總之，大家相互學習與交流，希望有更多使用sketch的設計師出現。

下一講靜電與大家一起來學習sketch的特色獨有功能。 請務必要關注jingdesign與靜電的設計教室。 有疑問的朋友可以關注靜電的微信公眾號jingdesign91與我們一起進步。

掃描下面的二維碼關注jingdesign公眾號.

新手從零開始學好文合集！

學完直接晉級摳圖高手！
《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》

超全面的設計師自學指南！
《超贊！設計師完全自學指南》

多位資深前輩經驗合集！交互設計師自學指南！
《交互設計師修煉指南！教你從零開始成為優秀交互設計師》

原文地址：ui
作者：@JingDesign

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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