UI設計利器!9個你應該知道的Sketch實用技巧 - 優設網 - UISDC

UI設計利器!9個你應該知道的Sketch實用技巧

2015/05/22 34797評論區

9-sketch-features-for-webdesign-1

很多剛接觸Sketch 的同學驚嘆它的好用強大,不過它還有很多鮮為人知的實用功能,今天我們將一一為你說明這些特別好用的技巧,幫你加快設計流程 >>>

等一等,什么是 Sketch?

至去年 Sketch 第2版新舔的顏色設定后,越來越多的設計師已經切換用 Sketch 了。它的簡單的界面和性能使它比 Photoshop 更好用(不要忘了,Photoshop 最初是專為編輯和處理圖像以設計的),而其繪圖工具也很適用在向量圖形(vector) 上。Sketch 不是位圖影像(bitmap) 編輯工具。它配備了一個像素(pixel) 預覽,讓你更容易設計界面和圖標。

1. 智能型對象(Smart Object)插件 – Symbols

最近 Tisho Georgiev 發布了一個非常好用的 Sketch 插件,稱為 Symbols。它能讓設計師在設計時建立智能型對象(Smart Object),一個 Sketch 目前不支持的功能。

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

2. 智能型參考線(Smart Guides)

Sketch 支持多個鍵盤快捷鍵。”智能型參考線(Smart Guides)” 便是其中一個。

2-smart-guides

只要抓住一個圖像,然后按住 ALT(或 OPTION),智能型參考線(Smart Guides) 便會顯示出來,同時也會顯示所選圖像和文件最大高度或寬度之間的距離。如果你要檢查所選圖像與另一個圖像之間的距離,只需將鼠標懸停在那圖像上,智能型參考線(Smart Guides) 便會自動調整。

3. 簡易網格線(grid)

雖然制作網格線(grid) 不難,但 Sketch 令制作網格線(grid) 更簡單容易!

3-grids

Sketch 有一個稱為 “Create grid” 的功能。點擊工具欄中的四個方格(如圖右上方的圖像),就會跳出一個菜單,在這里你可以設定你所需的行數和列數。

如果你設定每個物體四周的間距,你可以選擇 Boxed 選項。

4. 畫板(Artboards) 預設

當你使用 畫板(Artboards)(Sketch 有很多默認的畫布(Canvas))時,畫板的預設也是很有用的。點擊工具欄上的畫板(Artboards) 按鈕時,你便可以從工具欄中選擇不用的設定。

這些是可以立刻使用的設定。

這些是可以立刻使用的設定。

這些預設的設定可讓你更有效地編寫你的工作。例如,你可以建立一個有不同大小的畫板(Artboards)的文件,那你就不必記住各個圖標或圖像的尺寸了!

5. 范本(Templates)

Sketch 可讓你直接從范本(Templates) 創建一個新的文件,點擊菜單選項 File > New from template 便可。你也可以把當前的文件保存為模板(Templates),點擊 File > Save as template 便成。

5-templates

這是個又方便又好用的功能。例如,為iOS設計時,你建立一個包括狀態區和菜單選項的文件文件,然后將其保存為模板(Templates),這樣你便可以用在其他iOS設計中。

6. 快捷鍵(Shortcuts)

之前也提到,Sketch 提供了許多快捷鍵。例如 Robert van KlinkenJeffrey de Groot 寫的 Sketch Shortcuts。它(幾乎)說明了有每個 Sketch 的快捷鍵的使用方法。

您也可以通過OS X的系統偏好設置 設定你自己的快捷鍵。其中一些例子都寫在Sketch Shortcuts的底部。

sketch-settings

7. 顏色編輯清單(Color Picker)

想輕松地從屏幕上挑選顏色,只要按下 CTRL + C ,一個放大鏡便會出現,方便你選擇你想要的顏色。即方便又簡單。

8-color-picker

8. 完美的像素

這可是 Sketch 最好的功能!它能把每個像素點準確地定位。

例如,你的圖層(layer) 中的圖像包含不完整的像素(pixel),或位置點不完整。你可能會為(在其他的圖形軟件)調整這些不完整的像素點而頭疼,但在 Sketch 中,只要點擊Edit > Round to nearest pixels edge(或者自定快捷鍵),整個圖層(layer) 的圖像和圖像地址便會自動調整。

7-round-to-nearest-pixels

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

當你需要匯入圖目標時候,這個功能可讓不完整的像素(pixel) 調整至正數。

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

9. 匯出(Exporting)

Sketch 擁有最強的導出功能,只要點擊 File > Export 和畫出你所需要的切片(slices) 便可。你也可以用@1x匯出@2x的解像度。相對地,你也可以用@2x導出@1x的圖像。

sketch-export

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

結論

Sketch 還有許多實用,簡易又快捷的功能和插件,你可以用上述的技巧提高你的工作流程。當然如果你有什么意見,也歡迎留言!

靜電的Sketch教程合集持續更新中:

  1. 《SKETCH設計教室!從零開始學APP設計利器SKETCH(一)》
  2. 《SKETCH設計教室!從零開始學APP設計利器SKETCH(二)》
  3. 《SKETCH設計教室!帶你了解超好用的SKETCH插件》
  4. 《想要一稿過不加班?SKETCH絕配神器MIRROR搶先體驗》

靜電的Xcode教程合集持續更新中:

  1. 《搞定一像素不求人!為設計師量身打造的XCODE教程(1)》
  2. 《搞定一像素不求人!為設計師量身打造的XCODE教程(2)》
  3. 《零代碼搞定交互動畫!為設計師量身打造的XCODE教程(3)》
  4. 《搞定Tab bar交互!為設計師量身打造的XCODE教程(4)》

原文地址:webdesign.tutsplus

【優設網 原創文章 投稿郵箱:[email protected]

================關于優設網================
“優設網阿贾克斯对热刺“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航://hao.uisdc.com/book/。
設計微博:擁有粉絲量95萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航://hao.www.utsvcz.com.cn
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

sdcweixin

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/9-sketch-features-for-webdesign

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 優設專訪 優設大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規范 用戶體驗設計 海報設計 設計趨勢 平面設計 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里