Sketch 55

Sketch 55是一款全球知名的UI設(shè)計(jì)軟件，這款軟件讓設(shè)計(jì)師們?cè)O(shè)計(jì)ui速度更快，尤其是在移動(dòng)應(yīng)用設(shè)計(jì)方面。其強(qiáng)大的擴(kuò)展功能可以大大提高設(shè)計(jì)師的工作效率，支持自動(dòng)切圖，并且具有移動(dòng)設(shè)計(jì)模板，能夠大大節(jié)省設(shè)計(jì)師的時(shí)間和工作量，非常適合進(jìn)行網(wǎng)站設(shè)計(jì)、移動(dòng)應(yīng)用設(shè)計(jì)、圖標(biāo)設(shè)計(jì)等。

新版特色：

SVG代碼直接粘貼為SVG形狀

我們平時(shí)在使用矢量圖標(biāo)的時(shí)候，經(jīng)常會(huì)到一些網(wǎng)站去下載 SVG 格式，然后直接復(fù)制文件到 Sketch 中使用。比如 Iconfont 這個(gè)網(wǎng)站，相信大家都不陌生，里面的圖標(biāo)提供 SVG、PNG、AI 三種格式，很貼心。

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

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

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

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

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

關(guān)于 SVG，對(duì)于我們?cè)O(shè)計(jì)師來說是一個(gè)矢量的圖片格式，但它本身是指可伸縮矢量圖形（Scalable Vector Graphics），使用 XML 格式定義，是 W3C 的一個(gè)標(biāo)準(zhǔn)，被絕大部分瀏覽器支持。格式結(jié)構(gòu)有點(diǎn)類似于網(wǎng)頁 HTML，也可以簡(jiǎn)單理解為一種代碼的可視化。

圖層間距調(diào)整功能

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

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

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

功能介紹：

Sketch界面

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

Page：頁面管理；

Layer：頁面下的圖層；

蒙版：圖片遮罩效果（右鍵，選擇use as a mask）

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

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

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

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

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

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

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

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

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

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

Artboard：畫板，快捷鍵A，內(nèi)置了多種尺寸的畫板；

Artboard內(nèi)置畫板

檢查器：

通用屬性：可調(diào)整大小。

樣式屬性：填充（顏色、圖片），模糊、漸變、陰影等效果。

工具欄

右鍵工具欄選擇customize可以自定義工具欄。

自定義工具欄

Sketch基礎(chǔ)工具

添加、選擇、移動(dòng)圖層

添加圖層

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

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

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

可以將圖層歸為組。

圖形的編輯

點(diǎn)的控制手柄

當(dāng)創(chuàng)建一個(gè)矩形時(shí)，雙擊四個(gè)角上的錨點(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)工具

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

復(fù)制旋轉(zhuǎn)工具，可以得到一個(gè)圖形的360度旋轉(zhuǎn)復(fù)制后的效果，如下圖：

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

文本處理
運(yùn)用TEXT STYLE可以復(fù)用文字樣式

text style

將文本轉(zhuǎn)換為輪廓（矢量）

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

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

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

圖片編輯

位圖編輯

高斯模糊效果；

color adjust工具：亮度、對(duì)比度、飽和度；

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

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

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

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

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

制作步驟如下：

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

設(shè)置背景：設(shè)置背景為白色

基本布局：調(diào)用sketch庫的template（在菜單欄file下面的第二個(gè)選項(xiàng)），選擇iOS UI design，選擇iphone上方的狀態(tài)欄為白色（圖中看不出來，因?yàn)楸尘吧�也是白色）�?/p>

畫出輸入框（利用布爾運(yùn)算）

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

注冊(cè)按鈕：橘黃色的箭頭。

文字：選擇宋體，轉(zhuǎn)化為輪廓。

細(xì)節(jié)完善：小圖標(biāo)制作，線條顏色微調(diào)。

快用Sketch動(dòng)手做一個(gè)屬于你的登陸頁面吧！