Sketch3 學習筆記

Transcript

1. Sketch 3 學習筆記
2. 官網： http://www.bohemiancoding.com/sketch/
 ⽂文件： http://bohemiancoding.com/sketch/support/documentation/
3. 優點 ⽀支援向量 ⾃自動存檔、⾃自動保存和版本備份 ( File / Revert to / Browse all Versions ) 適合繪製UI、Icon、Web、Prototype... 內建樣版 & 可⾃自⾏行客製 Template ( File / Save as Template ) UI Kits、Plugin等網路資源可運⽤用
4. 缺點 MAC only 軟體越賣越貴...要買要快免得⽇日後再漲⼜又後悔 不⽀支援PS、AI格式...可另存SVG、EPS、PDF等格式
5. 界⾯面
7. Toolbar ⼯工具列
8. ⾃自定⼯工具列
9. 新增物件功能：圖形、圖⽚片、符號等 縮放、群組、變形等編輯功能 Vectorize Stroke ( 轉外框線 )＆處理布林運算來合併圖層 遮罩 ( Use as Mask ) 匯出 (Export) 切⽚片⼯工具：可匯出為單⼀一或多尺⼨寸圖⽚片 常⽤用⼯工具列
10. Rotate Copies (複製旋轉)
11. Vector (鋼筆編輯) 快速鍵： V 四種模式： 直線（Straight） 鏡像（Mirrored） 斷開連接（Disconnected） 不對稱（Asymmetric）
12. Make Grid (網格設置)
13. Layout Settings (佈局設定)
14. Layer List 圖層列表
15. 可增加多個⾴頁⾯面/列表（Page 1） 每個⾴頁⾯面亦可新增多個畫板/圖層列表， 以及有資料夾群組/隱藏/鎖定等概念 可建⽴立共⽤用的物件樣式( Symbol ) 及⽂文 字樣式 ( Text Style ) 切⽚片( Slice ) 遮罩( User as Mask ) 搜尋、顯⽰示、隱藏功能 Page 1 (⾴頁⾯面)
16. Canvas 桌布
17. 無限⼤大的畫布 新增多個畫板(Artboard) ; 快捷鍵：A 內建樣板或⾃自訂樣板 ( Edit / File / Save as Template ) 複製 CSS 樣式 ⽀支援像素預覽 測量間距⼯工具 ( option / Alt 鍵 ) 標尺 ( Control+R )，參考線，網格 Artboard (畫板)
18. Inspector 設定檢視
19. px 單位 填⾊色、外框、陰影效果可以多層疊加 Type / Text on Path ⽂文字轉曲線 匯出圖層 vs 切⽚片，皆可⽀支援多倍數圖⽚片 ⼀一次匯出！匯出前尺⼨寸先畫 2x，則再去 縮放 0.5 倍及 1.5 倍 樣式設定
20. 匯⼊入
21. JPG：不⽀支持透明度 PNG：⽀支持透明度 TIFF：⽀支持透明度，但⽂文件會更⼤大 SVG PDF or EPS ⽀支援格式
22. 不⽀支援 PSD、AI格式 挑戰使⽤用習慣、轉前想清楚....⼩小⼼心⽤用了上癮會回不去...XD
23. Demo
24. Android
25. iOS
26. Web
27. 有點少的快速鍵
28. 通⽤用快速鍵 Control+H：觸發選區⼿手柄 Control+L：觸發⾃自動參考線 Control+G：觸發網格 Space：抓⼿手⼯工具 Enter：編輯所選圖層 ⌘+3：滾動⾄至所選圖層 ⌘+2：放⼤大所選圖層 Z：放⼤大⼯工具 按住Z 鍵，⽤用⿏鼠標單擊拖拽出⼀一個區域放⼤大 縮⼩小則使⽤用Z + alt 再⽤用⿏鼠標單擊 Escape：退出當前⼯工具，取消選擇所有圖層 或返回檢查器 Tab/Shift-tab：在當前群組中切換不同圖層
29. 新增圖層 R：矩形 O：圓形 U：圓⾓角矩形 T：⽂文字 L：直線 A：畫板 V：⽮矢量編輯 S：切⽚片 P：鉛筆
30. 移動圖層 & 更改尺⼨寸 Alt + 拖拽⿏鼠標：複製⼀一個圖層 Alt + ⿏鼠標懸停：顯⽰示兩個圖層之間的距離 Alt + 更改圖形尺⼨寸：兩邊對稱的更改圖形尺⼨寸 Shift + 更改圖形尺⼨寸：等⽐比更改圖形⼤大⼩小
31. 資源
32. iOS Mirror http://bohemiancoding.com/sketch/features/#mirror
33. Plugins Sketch Toolbox 外掛管理⼯工具
35. Content-generator- sketch-plugin
36. Sketch-measure 跟Mark Man 類似的功能，可標⽰示及註解資訊 Sizes：寬⾼高 Margin or Padding：外距跟內距 Distances：物件間距 Properties： 物件註解資訊 Coordinates：經緯度、座標 Settings： 單位標⽰示、顏⾊色設定 Lite：隱藏圖案，只顯⽰示標注
37. 資源下載 Design + Code (必推)
 https://designcode.io/ SketchAppSources (必推)
 http:// www.sketchappsources.com/ Sketch resources
 http://goo.gl/knefyG Sketchdesign
 http://sketchdesign.io/ UI week
 http://uiweek.com/ learn.ustwo 
 http://learn.ustwo.com/sketch- resources
38. 提⾼高⼯工作效率
39. 如何運⽤用 建⽴立樣版 資源整理 當Prototype⽤用？ 使⽤用習慣統⼀一？ 還有...
40. Chuan Yang 
 GUI / UX Designer www.facebook.com/imchuan 歡迎⼀一起學習、交流
41. Thank you~