從零開始學Sketch——入門篇-b

若是你是一枚交互設計師或者UI設計師，那麼你必定知道Sketch這個強大的矢量設計軟件；若是你用過Photoshop，那麼在你接觸了Sketch以後就能瞭解到這款產品相對於PS的優勢，說不定會跟我同樣變成一個Sketch的死忠粉。

扁平化設計的流行和屏幕分辨率的提高推進了Sketch這款軟件的流行。

什麼是Sketch

Sketch——矢量繪圖應用

Sketch是一款矢量繪圖應用，而矢量繪圖無疑是目前進行網頁、圖標以及界面設計的最好方式。

Sketch有如下特色：

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

可是Sketch也不是十全十美的，好比它對於位圖的處理能力就遠不及PS。但這並不影響它成爲一款優秀的設計軟件。

Sketch界面

圖片來源：極客學院ERICYU

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

• Page：頁面管理；
• Layer：頁面下的圖層；
  • 蒙版：圖片遮罩效果（右鍵，選擇use as a mask）

Step 1 導入圖片+畫出一個正圓

導入圖片+畫出一個正圓

Step 2 將圖片置於正圓之上，並右鍵選中圓形，點擊「USE AS A MASK」

將圖片置於正圓之上，並右鍵選中圓形，點擊「USE AS A MASK」

Step 3 完成! 注意把圓形的邊框設置爲透明。

完成，注意把圓形的邊框設置爲透明

布爾運算——圖層之間的關係
在剛剛的頭像下面，製做一個個性標籤，運用圖層之間的布爾運算。

畫兩個如出一轍的圓形，其中一個圓形與矩形造成substract的關係。
（只須要在Layer中拖拽圓形至矩形便可）

• Artboard：畫板，快捷鍵A，內置了多種尺寸的畫板；

Artboard內置畫板

• 檢查器：

  • 通用屬性：可調整大小。
  • 樣式屬性：填充（顏色、圖片），模糊、漸變、陰影等效果。

• 工具欄
  右鍵工具欄選擇customize能夠自定義工具欄。

自定義工具欄

Sketch基礎工具

添加、選擇、移動圖層

添加圖層

當你按住Shift鍵添加圖層時，建立的是正圓或者正方形或者正多邊形。
按住COMMAND+D能夠批量複製圖層。
按住Alt鍵能夠複製一個圖形。
能夠將圖層歸爲組。

圖形的編輯

• 點的控制手柄
  當建立一個矩形時，雙擊四個角上的錨點能夠選擇不一樣類型的手柄。

圖形點的控制手柄

• 蒙版
  • 限制蒙版：不但願文字被蒙版所裁切，能夠右鍵點擊「Ignoring underlying mask」。

在蒙版上建立文字，避免模板限制文字超出蒙版區域

• ALPHA蒙版
  經過設置ALPHA模板，可讓圖片擁有漸變效果。

Step 1 選擇Mask的模式

設置ALPHA蒙版

Step 2 選擇漸變方式

fills選中漸變樣式

• 剪刀工具和複製旋轉工具
  • 剪刀工具：能夠剪切矩形的一條邊，讓它變成一個開口的矩形；
  • 複製旋轉工具，能夠獲得一個圖形的360度旋轉複製後的效果，以下圖：

旋轉複製效果

文本處理

• 運用TEXT STYLE能夠複用文字樣式

text style

• 將文本轉換爲輪廓（矢量）
  將文本的一筆一劃都變爲path。

將文本轉換爲輪廓

轉化後，可使用漸變做爲文字樣式。

圖片編輯

• 位圖編輯
  • 高斯模糊效果；
  • color adjust工具：亮度、對比度、飽和度；
  • 創建選區、裁剪；
  • 創建9宮格圖片，能夠將圖片各部分的比例肯定下來，進行大小改變。

實戰應用

下面這張圖片是我製做的簡書app登錄頁面，你們能夠運用上面學到的技巧來進行製做。

簡書登錄頁面（自創版）

製做步驟以下：

• 建立畫板：選擇artboard的iphone 5大小
• 設置背景：設置背景爲白色
• 基本佈局：調用sketch庫的template（在菜單欄file下面的第二個選項），選擇iOS UI design，選擇iphone上方的狀態欄爲白色（圖中看不出來，由於背景色也是白色）；
• 畫出輸入框（利用布爾運算）
• 微博登錄按鈕：建立矩形。
• 註冊按鈕：橘黃色的箭頭。
• 文字：選擇宋體，轉化爲輪廓。
• 細節完善：小圖標製做，線條顏色微調。

快用Sketch動手作一個屬於你的登錄頁面吧！

文／糉小喵（簡書做者） 原文連接：http://www.jianshu.com/p/5d504b39ae9f 著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。