藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù) 

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

很多剛接觸Sketch 的同學(xué)驚嘆它的好用強(qiáng)大，不過(guò)它還有很多鮮為人知的實(shí)用功能，今天我們將一一為你說(shuō)明這些特別好用的技巧，幫你加快設(shè)計(jì)流程 >>>

等一等，什么是 Sketch？

至去年 Sketch 第2版新舔的顏色設(shè)定后，越來(lái)越多的設(shè)計(jì)師已經(jīng)切換用 Sketch 了。它的簡(jiǎn)單的界面和性能使它比 Photoshop 更好用（不要忘了，Photoshop 最初是專(zhuān)為編輯和處理圖像以設(shè)計(jì)的），而其繪圖工具也很適用在向量圖形（vector） 上。Sketch 不是位圖影像（bitmap） 編輯工具。它配備了一個(gè)像素（pixel） 預(yù)覽，讓你更容易設(shè)計(jì)界面和圖標(biāo)。

1. 智能型對(duì)象（Smart Object）插件 – Symbols

最近 Tisho Georgiev 發(fā)布了一個(gè)非常好用的 Sketch 插件，稱(chēng)為 Symbols。它能讓設(shè)計(jì)師在設(shè)計(jì)時(shí)建立智能型對(duì)象（Smart Object），一個(gè) Sketch 目前不支持的功能。

 

智能型對(duì)象（Smart Object） 允許你在文件中重復(fù)使用同一個(gè)圖像。若你需要更改所有的圖像，你只需要編輯其中一個(gè)智能型對(duì)象 ，然后按 CMD + E 便可。

2. 智能型參考線(xiàn)（Smart Guides）

Sketch 支持多個(gè)鍵盤(pán)快捷鍵。”智能型參考線(xiàn)（Smart Guides）” 便是其中一個(gè)。

 

只要抓住一個(gè)圖像，然后按住 ALT（或OPTION），智能型參考線(xiàn)（Smart Guides） 便會(huì)顯示出來(lái)，同時(shí)也會(huì)顯示所選圖像和文件最大高度或?qū)挾戎g的距離。如果你要檢查所選圖像與另一個(gè)圖像之間的距離，只需將鼠標(biāo)懸停在那圖像上，智能型參考線(xiàn)（Smart Guides） 便會(huì)自動(dòng)調(diào)整。

3. 簡(jiǎn)易網(wǎng)格線(xiàn)（grid）

雖然制作網(wǎng)格線(xiàn)（grid） 不難，但 Sketch 令制作網(wǎng)格線(xiàn)（grid） 更簡(jiǎn)單容易！

 

Sketch 有一個(gè)稱(chēng)為 “Create grid” 的功能。點(diǎn)擊工具欄中的四個(gè)方格（如圖右上方的圖像），就會(huì)跳出一個(gè)菜單，在這里你可以設(shè)定你所需的行數(shù)和列數(shù)。

如果你設(shè)定每個(gè)物體四周的間距，你可以選擇 Boxed 選項(xiàng)。

4. 畫(huà)板（Artboards） 預(yù)設(shè)

當(dāng)你使用畫(huà)板（Artboards）（Sketch 有很多默認(rèn)的畫(huà)布（Canvas））時(shí)，畫(huà)板的預(yù)設(shè)也是很有用的。點(diǎn)擊工具欄上的畫(huà)板（Artboards）按鈕時(shí)，你便可以從工具欄中選擇不用的設(shè)定。

 

這些是可以立刻使用的設(shè)定。

這些預(yù)設(shè)的設(shè)定可讓你更有效地編寫(xiě)你的工作。例如，你可以建立一個(gè)有不同大小的畫(huà)板（Artboards）的文件，那你就不必記住各個(gè)圖標(biāo)或圖像的尺寸了！

5. 范本（Templates）

Sketch 可讓你直接從范本（Templates） 創(chuàng)建一個(gè)新的文件，點(diǎn)擊菜單選項(xiàng) File > New from template 便可。你也可以把當(dāng)前的文件保存為模板（Templates），點(diǎn)擊 File > Save as template 便成。

 

這是個(gè)又方便又好用的功能。例如，為iOS設(shè)計(jì)時(shí)，你建立一個(gè)包括狀態(tài)區(qū)和菜單選項(xiàng)的文件文件，然后將其保存為模板（Templates），這樣你便可以用在其他iOS設(shè)計(jì)中。

6. 快捷鍵（Shortcuts）

之前也提到，Sketch 提供了許多快捷鍵。例如 Robert van Klinken 和 Jeffrey de Groot 寫(xiě)的 Sketch Shortcuts。它（幾乎）說(shuō)明了有每個(gè) Sketch 的快捷鍵的使用方法。

您也可以通過(guò)OS X的系統(tǒng)偏好設(shè)置 設(shè)定你自己的快捷鍵。其中一些例子都寫(xiě)在Sketch Shortcuts的底部。

 

7. 顏色編輯清單（Color Picker）

想輕松地從屏幕上挑選顏色，只要按下 CTRL + C ，一個(gè)放大鏡便會(huì)出現(xiàn)，方便你選擇你想要的顏色。即方便又簡(jiǎn)單。

 

8. 完美的像素

這可是 Sketch 最好的功能！它能把每個(gè)像素點(diǎn)準(zhǔn)確地定位。

例如，你的圖層（layer）中的圖像包含不完整的像素（pixel），或位置點(diǎn)不完整。你可能會(huì)為（在其他的圖形軟件）調(diào)整這些不完整的像素點(diǎn)而頭疼，但在Sketch中，只要點(diǎn)擊Edit > Round to nearest pixels edge（或者自定快捷鍵），整個(gè)圖層（layer）的圖像和圖像地址便會(huì)自動(dòng)調(diào)整。

 

給你的建議：自定快捷鍵!

當(dāng)你需要匯入圖目標(biāo)時(shí)候，這個(gè)功能可讓不完整的像素（pixel） 調(diào)整至正數(shù)。

注：如果你的設(shè)計(jì)是用@2X（用于高像素密度的屏幕），但卻要在匯出@1X時(shí)，要留意每個(gè)位置的像素都需要是 2 的整除，否則像素又會(huì)變得不完整和模糊。

9. 匯出（Exporting）

Sketch 擁有最強(qiáng)的導(dǎo)出功能，只要點(diǎn)擊 File > Export 和畫(huà)出你所需要的切片（slices） 便可。你也可以用@1x匯出@2x的解像度。相對(duì)地，你也可以用@2x導(dǎo)出@1x的圖像。

 

Sketch 提供很多切割（slices） 功能。在菜單中點(diǎn)選 File > Add Slice from Selection，你可以選擇你剛建立的圖層（layer），然后點(diǎn)選那圖像便會(huì)自動(dòng)畫(huà)出跟圖像一樣大小的切片。

結(jié)論

Sketch 還有許多實(shí)用，簡(jiǎn)易又快捷的功能和插件，你可以用上述的技巧提高你的工作流程。