Sketch 55

Sketch 55是一款全球知名的UI設計軟件，這款軟件讓設計師們設計ui速度更快，尤其是在移動應用設計方面。其強大的擴展功能可以大大提高設計師的工作效率，支持自動切圖，并且具有移動設計模板，能夠大大節(jié)省設計師的時間和工作量，非常適合進行網站設計、移動應用設計、圖標設計等。

新版特色：

SVG代碼直接粘貼為SVG形狀

我們平時在使用矢量圖標的時候，經常會到一些網站去下載 SVG 格式，然后直接復制文件到 Sketch 中使用。比如 Iconfont 這個網站，相信大家都不陌生，里面的圖標提供 SVG、PNG、AI 三種格式，很貼心。

本次 Sketch 55 版本新增了 SVG 代碼直接粘貼為 SVG 形狀這個功能。只要擁有 SVG 圖標對應的代碼，就可以直接復制到 Sketch 中顯示為形狀。比如下面這個例子，直接把 UI黑客 logo 的 SVG 代碼復制到 Sketch 中即可使用。

假如在 Sketch 54 及以前版本中這么做，會粘貼為一大堆代碼。

不過，實際工作中直接下載 SVG 文件粘貼到 Sketch 會比拷貝代碼更方便�？雌饋硎且粋�比較雞肋的功能，但如果遇到無法直接下載的 SVG 圖標，就可以用到它了。

拿 Iconfont 主頁的 logo 做例子，本身是個 SVG 圖標而不是正常圖片格式，我們無法直接另存為使用，查看網頁元素是一堆代碼。那如何獲取這個圖標的文件呢？

可以這么做：在 Chrome 中右鍵查看元素，找到 svg 開頭的標簽，右鍵 – Copy – Copy element，然后粘貼到 Sketch 就可以看到形狀了。

關于 SVG，對于我們設計師來說是一個矢量的圖片格式，但它本身是指可伸縮矢量圖形（Scalable Vector Graphics），使用 XML 格式定義，是 W3C 的一個標準，被絕大部分瀏覽器支持。格式結構有點類似于網頁 HTML，也可以簡單理解為一種代碼的可視化。

圖層間距調整功能

我們經常會遇到多個對象間距調整的問題，一般情況下間距都是統(tǒng)一的，如果遇到間距修改就需要一個個調整�，F(xiàn)在在 55 版本中選中多個元素，右上角的屬性面板中會多增加個間距屬性，分為水平和垂直。

利用這個功能我們可以同時調整元素之間的間距。也可以把鼠標 hover 在全選的元素上，間距里面會出現(xiàn)白色的小豎條，通過拖動小豎條來統(tǒng)一改變間距數(shù)值。如下圖：

不過還有一點需要注意，目前只能通過多選元素來調節(jié)間距，如果做成組的話功能就無效了，大大降低了實用性。因為正常情況下為了保持圖層的可讀性和條理性，編組是一個很好的方法和習慣。只能看官方在正式版的時候能否優(yōu)化這個體驗了。

功能介紹：

Sketch界面

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鍵添加圖層時，創(chuàng)建的是正圓或者正方形或者正多邊形。

按住COMMAND+D可以批量復制圖層。

按住Alt鍵可以復制一個圖形。

可以將圖層歸為組。

圖形的編輯

點的控制手柄

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

圖形點的控制手柄

蒙版

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

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

ALPHA蒙版

通過設置ALPHA模板，可以讓圖片擁有漸變效果。

Step 1 選擇Mask的模式

設置ALPHA蒙版

Step 2 選擇漸變方式

fills選中漸變樣式

剪刀工具和復制旋轉工具

剪刀工具：可以剪切矩形的一條邊，讓它變成一個開口的矩形；

復制旋轉工具，可以得到一個圖形的360度旋轉復制后的效果，如下圖：

旋轉復制效果

文本處理
運用TEXT STYLE可以復用文字樣式

text style

將文本轉換為輪廓（矢量）

將文本的一筆一劃都變?yōu)閜ath。

將文本轉換為輪廓

轉化后，可以使用漸變作為文字樣式。

圖片編輯

位圖編輯

高斯模糊效果；

color adjust工具：亮度、對比度、飽和度；

建立選區(qū)、裁剪；

建立9宮格圖片，可以將圖片各部分的比例確定下來，進行大小改變。

實戰(zhàn)應用

下面這張圖片是我制作的簡書app登陸頁面，大家可以運用上面學到的技巧來進行制作。

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

制作步驟如下：

創(chuàng)建畫板：選擇artboard的iphone 5大小

設置背景：設置背景為白色

基本布局：調用sketch庫的template（在菜單欄file下面的第二個選項），選擇iOS UI design，選擇iphone上方的狀態(tài)欄為白色（圖中看不出來，因為背景色也是白色）；

畫出輸入框（利用布爾運算）

微博登陸按鈕：創(chuàng)建矩形。

注冊按鈕：橘黃色的箭頭。

文字：選擇宋體，轉化為輪廓。

細節(jié)完善：小圖標制作，線條顏色微調。

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