聽説UI設計師更喜歡Sketch，是真的嗎？

Sketch超越PS？莫非又是標題黨？不不不！數藝君今天是正兒八經的給大家安利這個軟件。

在Sketch出現之前，很多UI設計師手首選軟件肯定是PS，不過大家對於PS的槽點也不少：設計新界面需要拉各種輔助參考線、切圖很耗時、設計一個新界面又得重新創建一個文件等等。

然後，Sketch出現了！作為一款精準直擊移動界面設計的設計軟件，具有輕量便捷、出圖效率高的特點。完美戳中了UI設計師們的痛點，堪稱現實版不加班神器！

Sketch作為一款輕量並實用的UI設計工具，已經廣泛運用於UI設計師的工作，而且目前不少公司在招聘UI設計師時，越來越多地將Sketch軟件操作作為一項工作技能的考核內容。

口説無憑，Sketch到底好不好使還得實踐出真知，下面數藝君用一個案例告訴你，Sketch的魅力。

實戰：“愛護鯨魚”引導頁的製作

本案例是“愛護鯨魚”引導頁設計項目。用户羣體是保護動物主義者，為了體現出愛的温馨氛圍，筆者將界面風格定位為柔和的少女風格，主色調選用粉色，並添入偏冷的紫色、藍色和灰色與其搭配，呈現大自然的氣息。

為了讓畫面體現一些活潑感，界面內容主要圍繞“一個女孩和鯨魚相遇”。引導頁的繪製流程如圖1所示，最終的引導頁效果如圖2所示。

圖1

圖2

繪製背景

01 按快捷鍵A新建一個375px×667px的畫布。使用“矩形”工具 （快捷鍵R）繪製一個375px×667px的矩形背景，然後從上到下將矩形填充為淺藍色（R:121，G:164，B:241）至淡紫色（R:219，G:196，B:130）再至淺粉色（R:235，G:205，B:227），最後至淺藍紫色（R:197，G:186，B:232）的線性漸變效果，如圖所示。

02 選擇“橢圓形”工具 ，在背景圖層上方繪製一個圓形，填充為白色（R:255，G:255，B:255）。選中這個圓形並複製多個，將這些圓形自由進行縮放變化處理，然後集中在界面的上方進行排放，作為背景上的星星，如圖所示。

03 選擇“橢圓形”工具 ，在界面中繪製一個直徑為46px的圓形，填充為白色（R:255，G:255，B:255）。選中這個圓形並複製一個，然後填充為灰色（R:216，G:216，B:216）並調整其到合適位置，選中這兩個圓形，單擊“減去頂層”按鈕 ，得到一個月牙圖形，如圖所示。

04 選中月牙圖形，然後複製一個，“填充”為淺藍色（R:232，G:239，B:255）。在“高斯模糊”一欄中設置“半徑”為10px，作為月牙的陰影，如圖所示。

05 使用“鋼筆”工具 繪製一個多邊形，然後設置多邊形描邊“顏色”為白色（R:255，G:255，B:255），“位置”為居中，“粗細”為 1px，將多邊形填充為淺紫色（R:220，G:185，B:219）至淺粉色（R:254，G:237，B:237）的漸變效果，作為山脈，如圖所示。

06 選中上一步繪製好的山脈圖形，使其呈編輯狀態，然後分別按快捷鍵1、快捷鍵2、快捷鍵3和快捷鍵4激活屬性欄中的“直角”命令 、“對稱”命令 、“斷開連接”命令 、“不對稱”命令 ，調整錨點到合適位置，調整山脈的形狀，如圖1所示。取消編輯，得到圖2所示的界面效果。

圖1

圖2

07 依照上一步的繪製方法，繪製出靠前的兩個山脈。選中所有山脈圖形，按快捷鍵Command+G進行打組，最後得到的界面整體效果如圖所示。

08 選中“山脈”圖層組，然後複製一個並移至原山脈圖形組的下方。單擊“垂直翻轉”工具 ，將複製的“山脈”圖層組進行垂直翻轉處理，設置“不透明度”為38%，調整好位置，作為山脈的倒影，得到的界面整體效果如圖所示。

繪製鯨魚

01 使用“鋼筆”工具 繪製一個多邊形，然後從左上方到右下方，將多邊形填充為淺粉色（R:226，G:190，B:223）至淺紫色（R:171，G:126，B:200），再至淺粉色（R:247，G:220，B:239）的線性漸變效果，作為鯨魚的外形，如圖1所示，得到的界面整體效果如圖2所示。

圖1

圖2

02 雙擊上一步製作好的圖形，使其進入編輯狀態，然後分別按快捷鍵1、快捷鍵2、快捷鍵3和快捷鍵4激活屬性欄中的“直角”命令 、“對稱”命令 、“斷開連接”命令 、“不對稱”命令 ，調整錨點到合適位置，如圖所示。

03 使用“鋼筆”工具 沿着鯨魚的肚皮內側繪製一個多邊形，然後填充為接近白色的淺粉色（R:255，G:250，B:252），得到圖所示的界面效果。

04 選中上一步繪製好的圖形，雙擊鼠標，使其呈編輯狀態，然後分別按快捷鍵1、快捷鍵2、快捷鍵3和快捷鍵4激活屬性欄中的“直角”命令 、“對稱”命令 、“斷開連接”命令 、“不對稱”命令 ，調整錨點到合適位置，如圖1所示，得到的界面整體效果如圖2所示。

圖1

圖2

05 使用“鋼筆”工具 繪製幾條直線，設置描邊“顏色”為淺紫色（R:173，G:129，B:201），“位置”為居中“粗細”為1px，如圖所示。

06 雙擊上一步繪製好的圖形，使其呈編輯狀態，然後分別按快捷鍵1、快捷鍵2、快捷鍵3和快捷鍵4激活屬性欄中的“直角”命令 、“對稱”命令 、“斷開連接”命令 、“不對稱”命令 ，調整錨點到合適位置，如圖1所示，得到的界面整體效果如圖2所示。

圖1

圖2

07 使用“矩形”工具 繪製一個長方形，然後填充為淺粉色（R:240，G:219，B:226）至淺一些的淺粉色（R:206，G:190，B:231）的線性漸變效果，設置“不透明度”為66%，如圖所示。

08 選中長方形和鯨魚圖形，使用“蒙版”工具 將長方形依附於鯨魚圖形，得到的界面整體效果如圖所示。

繪製橋頭

01 使用“矩形”工具 （快捷鍵 R）繪製一個矩形，然後從上到下將矩形填充為淺紫色（R:248，G:214，B:247）至淺藍紫色（R:198，G:187，B:231）的線性漸變效果，如圖所示。

02 雙擊矩形，使其呈編輯狀態，依次選中頂部的第1個錨點和第2個錨點，將其向中間進行等距離移動，如圖所示。

03 再次使用“矩形”工具 繪製一個矩形，然後從上到下將矩形填充為淺紫色（R:147，G:129，B:188）至淺一點兒的淺紫色（R:176，G:160，B:227）的線性漸變效果，如圖1所示，得到的界面整體效果如圖2所示。

圖1

圖2

04 將製作好的矩形複製3個，然後連同原來的矩形一起選中，按快捷鍵Command+G將其進行打組，如圖所示。

05 選中上一步創建好的圖層組，然後複製一個並命名圖層組為“橋樑02”，選中“橋樑02”圖層組，單擊“水平翻轉”工具 ，將該圖層組進行水平翻轉處理，並調整到合適位置，得到圖所示的界面效果。

繪製小女孩

01 使用“鋼筆”工具繪製一個四邊形，填充為淺紫色（R:173，G:129，B:201），如圖所示。

02 雙擊上一步繪製的四邊形，使其呈編輯狀態，然後分別按快捷鍵1、快捷鍵2、快捷鍵3和快捷鍵4激活屬性欄中的“直角”命令 、“對稱”命令 、“斷開連接”命令 、“不對稱”命令 ，調整錨點到合適位置，得到的界面整體效果如圖所示。

03 使用“鋼筆”工具 繪製一個不規則圖形，填充為白色（R:255，G:255，B:255），如圖所示。

04 雙擊上一步繪製好的圖形，使其呈編輯狀態，然後分別按快捷鍵1、快捷鍵2、快捷鍵3和快捷鍵4激活屬性欄中的“直角”命令 、“對稱”命令 、“斷開連接”命令 、“不對稱”命令 ，調整錨點到合適位置，得到的界面整體效果如圖所示。

05 選擇“鋼筆”工具 ，按照以上同樣的操作，繪製出女孩的裙子部分，如圖所示。

06 繼續按照同樣的操作，繪製出小女孩的四肢，填充為淺紫色（R:254，G:250，B:255），如圖所示。

07 繪製出鞋子部分，然後填充為淺紫色（R:254，G:248，B:255），如圖1所示，得到的界面整體效果如圖2所示。

圖1

圖2

添加倒影

01 選擇所有星星圖形，然後按快捷鍵Command+G將其打組，形成圖層組，將圖層組複製一個，單擊“垂直翻轉”工具 ，對其進行翻轉，最後調整到界面中的合適位置，如圖所示。

02 選擇月牙圖形並複製一個，然後單擊“垂直翻轉”工具 ，將複製的月牙圖形進行翻轉處理，調整到界面中的合適位置，如圖所示。

添加文字和斜線

01 使用“文本”工具 在界面中添加一段文字，然後填充為白色（R:255，G:255，B:255），設置合適的字體樣式，如圖所示。

02 使用“鋼筆”工具 依照文字的走勢繪製兩條線，設置描邊“顏色”為白色，“粗細”為1px，作為裝飾線，如圖所示。

製作立體效果

將做好的圖形制作為手機的界面效果，如圖所示。