Contents
  1. 1. 前言:
  2. 2. Sketch3 亮點整理如下:
  3. 3. 推薦的 plugin
  4. 4. 名詞解釋
  5. 5. 常用快捷鍵:
  6. 6. 參考資源:

前言:

以前使用 Windows 的時候,一直有耳聞搞設計的都熱愛用 Mac,而自己使用了 Mac 一陣子卻感覺不出來差異,直到最近遇到了 Sketch3!這套設計界的神兵利器,讓我眼睛為之一亮!

這顆「黃鑽石」可以說是設計界的 Sublime Text,都是很輕量、又支援超多外掛,用起來就是一整個行雲流水呀~

尤其在 web design 與圖形設計方面,平常使用幾乎可以取代 photoshop、illustrator。

Sketch3 亮點整理如下:

  1. 超輕量,讓你愛上的瞬開的體驗
  2. 外掛超多,各種神奇的套件都有
  3. 操作容易上手,行雲流水的境界
  4. 可自訂 symbols、text styles 方便 reuse
  5. 各種尺寸的圖片輸出
  6. 支援向量圖檔編輯
  7. 可快速切換像素預覽
  8. 常見的 web design 應用:
  9. mock up
  10. 開發 RWD 超方便,可快速切換在不同解析度下做預覽
  11. 還可以輸出 Asset、CSS
  12. 自建 template
  13. 搭配 Bootstrap 3 UI Kit 快速建立 mock up 教學
  14. 下載 Bootstrap 3 Vector UI圖示 http://bootstrapuikit.com/
  15. 可將 arborad 輸出到 zeplin
  16. 有支援 Google 官方 Material Design

推薦的 plugin

  1. sketch toolbox // 套件管理工具,必裝!之後其他套件都透過它來安裝
  2. Content Generator // 自動填充假文、假圖,方便 mock up 佔位內容
  3. Dynamic Button // button 會隨內文寬度調整
  4. sketch measure // 量測尺寸
  5. AEFlowchart // 畫流程圖
  6. Skala Preview // 丟到手機上預覽
  7. Sketch Notebook // 來標註設計稿說明有哪些圖,以及它們的名稱是什麼,讓RD開發起來更有效率。
  8. Sketch Commands // 許多常用的 workflow task 也可將素材輸出
  9. Sketch Dockpreview // preview your current artboard in the Dock
  10. sketch set line height // 行高
  11. Renameit // 重新命名
  12. Clear-styles // 清除樣式
  13. Swap-Fill-Border // 填滿邊框交換
  14. zeplin-sketch-plugin // zeplin

名詞解釋

簡單的作個名詞解釋方便快速上手,詳見參考資源:

  1. Page:像是沒有邊界的畫布,一個檔裡可分很多 Page,而 Page 裡可以放很多 Artboard。
    Arboard:像是有尺寸的畫布 (就是 AI 的畫布),本身有內建各種尺寸可選擇(eg. iOS、Android、RWD)。而內容元素只有在 arboard 1. 範圍內是可視的。
  2. Symbol:針對一個 group 設定成模組,方便之後 reuse。

常用快捷鍵:

  1. R 畫矩形
  2. O 畫圓形
  3. L 畫線
  4. T 插入文字
  5. cmd + g 群組化
  6. cmd + d 複製並貼上
  7. cmd + 加、減 放大縮小
  8. 點選元件 + option 快速檢視與其他元件的距
  9. UI將物件拖拉到桌面即可產生 png 圖

參考資源:

  1. http://leveluptuts.com 詳細影片教學
  2. http://sketchcn.com sketch 簡體中文網
  3. http://sketchshortcuts.com/ sketch 快捷鍵一覽表
  4. Sketch Keyboard Shortcuts
  5. 來用 Sketch 畫你的 UI 吧
  6. Plugins 清單彙整 算是半官方 github

Bobo內心旁白:「再見了 Adobe 家族!胖胖的軟體真的不是我的菜…」

Contents
  1. 1. 前言:
  2. 2. Sketch3 亮點整理如下:
  3. 3. 推薦的 plugin
  4. 4. 名詞解釋
  5. 5. 常用快捷鍵:
  6. 6. 參考資源: