楠木軒

聽說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,作為裝飾線,如圖所示。

製作立體效果

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