來人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】，BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營。

如果你是一枚交互設(shè)計師或者UI設(shè)計師，那么你一定知道Sketch這個強(qiáng)大的矢量設(shè)計軟件；如果你用過Photoshop，那么在你接觸了Sketch之后就能了解到這款產(chǎn)品相對于PS的優(yōu)點(diǎn)，說不定會跟我一樣變成一個Sketch的死忠粉。

扁平化設(shè)計的流行和屏幕分辨率的提升推動了Sketch這款軟件的流行。

什么是Sketch

Sketch是一款矢量繪圖應(yīng)用，而矢量繪圖無疑是目前進(jìn)行網(wǎng)頁、圖標(biāo)以及界面設(shè)計的最好方式。

Sketch有以下特點(diǎn)：

• 矢量文件，不失真；
• Symbol（圖形樣式）和Style（文本樣式）功能，有利于批量修改和復(fù)用；
• 每個圖層都支持多種填充模式（Fills可以添加/隱藏填充效果）；
• 多種尺寸導(dǎo)出功能，可導(dǎo)出部件；
• 自動保存所有歷史記錄，便于追溯修改。

但是Sketch也不是十全十美的，比如它對于位圖的處理能力就遠(yuǎn)不及PS。但這并不影響它成為一款優(yōu)秀的設(shè)計軟件。

Sketch界面

圖片來源：極客學(xué)院ERICYU

Sketch的界面重要包含五部分的內(nèi)容：page，layer，畫板，檢查器和工具欄。

Step 1 導(dǎo)入圖片+畫出一個正圓

導(dǎo)入圖片+畫出一個正圓

Step 2 將圖片置于正圓之上，并右鍵選中圓形，點(diǎn)擊“USE AS A MASK”

將圖片置于正圓之上，并右鍵選中圓形，點(diǎn)擊“USE AS A MASK”

Step 3 完成! 注意把圓形的邊框設(shè)置為透明。

完成，注意把圓形的邊框設(shè)置為透明

布爾運(yùn)算——圖層之間的關(guān)系

在剛剛的頭像下面，制作一個個性標(biāo)簽，運(yùn)用圖層之間的布爾運(yùn)算。

畫兩個一模一樣的圓形，其中一個圓形與矩形形成substract的關(guān)系。

（只需要在Layer中拖拽圓形至矩形即可）

Artboard內(nèi)置畫板

• 檢查器：
  • 通用屬性：可調(diào)整大小。
  • 樣式屬性：填充（顏色、圖片），模糊、漸變、陰影等效果。
• 工具欄
  右鍵工具欄選擇customize可以自定義工具欄。

自定義工具欄

Sketch基礎(chǔ)工具

添加、選擇、移動圖層

添加圖層

當(dāng)你按住Shift鍵添加圖層時，創(chuàng)建的是正圓或者正方形或者正多邊形。

按住COMMAND+D可以批量復(fù)制圖層。

按住Alt鍵可以復(fù)制一個圖形。

可以將圖層歸為組。

圖形的編輯

• 點(diǎn)的控制手柄
  當(dāng)創(chuàng)建一個矩形時，雙擊四個角上的錨點(diǎn)可以選擇不同類型的手柄。

圖形點(diǎn)的控制手柄

• 蒙版
  • 限制蒙版：不希望文字被蒙版所裁切，可以右鍵點(diǎn)擊“Ignoring underlying mask”。

在蒙版上創(chuàng)建文字，避免模板限制文字超出蒙版區(qū)域

• ALPHA蒙版
  通過設(shè)置ALPHA模板，可以讓圖片擁有漸變效果。

Step 1 選擇Mask的模式

設(shè)置ALPHA蒙版

Step 2 選擇漸變方式

fills選中漸變樣式

• 剪刀工具和復(fù)制旋轉(zhuǎn)工具
  • 剪刀工具：可以剪切矩形的一條邊，讓它變成一個開口的矩形；
  • 復(fù)制旋轉(zhuǎn)工具，可以得到一個圖形的360度旋轉(zhuǎn)復(fù)制后的效果，如下圖：

旋轉(zhuǎn)復(fù)制效果

文本處理

將文本轉(zhuǎn)換為輪廓

轉(zhuǎn)化后，可以使用漸變作為文字樣式。

圖片編輯

• 位圖編輯
  • 高斯模糊效果；
  • color adjust工具：亮度、對比度、飽和度；
  • 建立選區(qū)、裁剪；
  • 建立9宮格圖片，可以將圖片各部分的比例確定下來，進(jìn)行大小改變。

實(shí)戰(zhàn)應(yīng)用

下面這張圖片是我制作的簡書app登陸頁面，大家可以運(yùn)用上面學(xué)到的技巧來進(jìn)行制作。

簡書登陸頁面（自創(chuàng)版）

制作步驟如下：

• 創(chuàng)建畫板：選擇artboard的iphone 5大小
• 設(shè)置背景：設(shè)置背景為白色
• 基本布局：調(diào)用sketch庫的template（在菜單欄file下面的第二個選項(xiàng)），選擇iOS UI design，選擇iphone上方的狀態(tài)欄為白色（圖中看不出來，因?yàn)楸尘吧彩前咨?/li>
• 畫出輸入框（利用布爾運(yùn)算）
• 微博登陸按鈕：創(chuàng)建矩形。
• 注冊按鈕：橘黃色的箭頭。
• 文字：選擇宋體，轉(zhuǎn)化為輪廓。
• 細(xì)節(jié)完善：小圖標(biāo)制作，線條顏色微調(diào)。

快用Sketch動手做一個屬于你的登陸頁面吧！

本文轉(zhuǎn)載自：簡書作者：粽小喵