sketch3 基礎介紹
DESCRIPTION
Sketch 3 基礎介紹TRANSCRIPT
Sketch 3Professional digital design for Mac.
特別感謝
⾼高雄前端社群
Who am I ?本名蘇雅⽂文 Karen、阿滋都是我的綽號 雲⽅方科技資訊 設計 會寫 CSS 跟 Sass
Introducing Sketch 3
http://goo.gl/elHcLb
Sketch 3 基本介紹
Sketch 3 By Bohemian Coding
www.bohemiancoding.com/sketch/
圖層區
⼯工具區
⼯工作區 設定區
⼯工具區介紹
Toolbar (⼯工具區)
• 新增物件
• 放⼤大 / 縮⼩小 / 各種編輯
• 路徑管理員
• 網格設定
• 輸出
• 可⾃自定常⽤用⼯工具列(⼯工具列右鍵) !!!
複製旋轉 使⽤用鋼筆編輯展開框線 網格管理
顯⽰示佈局
Rotate Copies (複製旋轉)• 複製物件繞成⼀一個圓
• 選擇複製數量後可調整疏密及旋轉
• 複製的數量不包含物件本⾝身
Vector (鋼筆編輯)
• 快速鍵 V
• 四種模式:直線(Straight)鏡像(Mirrored)斷開連魂結(Disconnected)不對稱(Asymmetric)
• 編輯已存在物件:在物件上點兩下就會看到節點
Vectorize Stroke (展開框線)
• 等於 illustrator 的外框筆畫
• 展開物件框線後還可更換布林⽅方式
Layout Settings (佈局設定)• 可編輯、顯⽰示佈局欄位寬度並預覽
• offset:版⾯面最左⾄至Layout距離
• Gutter on outside:最外圍要不要留空隙
• Make default:現有設定設為預設
總寬偏移列數
兩列之間寬列寬
外圍寬
將此設定設為預設
Make Grid (網格管理)
• 可⼀一次排列多個物件(⽤用於多物件的情況)
• 固定框架排列:物件以框架寬⾼高為主體計算距離
• 如果只是少量物件:Alt + 拖移,再Cmd + D
重複⾏行數
重複列數
固定框架 排列
間距
圖層區介紹
圖層區
• 融合⾴頁數 /⼯工作區域 /資料夾群組的概念
• 可增加多個⾴頁⾯面(Page 1)
• 顯⽰示畫板 / 圖層
• 顯⽰示群組 / 物件
• 搜尋物件
• 顯⽰示 / 隱藏物件、切⽚片
增減⾴頁⾯面畫板名稱
物件切⽚片群組
搜尋
顯⽰示 / 隱藏物件
顯⽰示 / 隱藏切⽚片
遮罩
被鎖定物件被隱藏物件
⼯工作區介紹
Artboard (畫板)
• 新增畫板:快速鍵 A
• 同 illustrator ⼯工作區域,可複製 / 修改⼤大⼩小
• 內建多種螢幕尺⼨寸可直接新增
• 畫板名稱會顯⽰示在左上⾓角
設定區介紹
樣式設定
• 上半部為通⽤用設定,有對⿑齊、坐標、套⽤用樣式...等
• 下半部為樣式設定,可做點⼩小⼩小的特效,不需要時把前⾯面的勾勾點掉
為什麼 Sketch 3 吸引我 ?
集合AI與PS好處• ⽀支援向量編輯
• 切換像素預視
• 佈局、格線顯⽰示
• ⼯工作區域
• 快速鍵操作 / ⾃自定快速鍵組合
• UI Kits 或 Plugin 等網路資源
常⽤用快速鍵see more:http://sketchshortcuts.com/
Name 功能 快速鍵
Vector 鋼筆 VPencil 鉛筆 P Line 線段 L
Rectangle 四⽅方形 R Oval 圓形 O
Rounded 圓⾓角四⽅方形 R Text ⽂文字 T
Artboard 畫板 ASlice 切⽚片 S
Zoom 放⼤大 Z
⾃自定快速鍵
網路資源http://goo.gl/AVy2YH
網路資源http://goo.gl/J2Xe3Z
!
來幾個好像很威的 Plugin
• Sketch Toolboxhttp://sketchtoolbox.com/
• 管理Plugin
來幾個好像很威的 Plugin
• sketch-measurehttp://goo.gl/tQ9jGY
• 跟Mark Man 類似的功能:在物件增加標⽰示註解
來幾個好像很威的 Plugin• Sizes:物件寬⾼高
• Margin or Padding:邊跟留⽩白
• Distances:物件之間距離
• Properties:物件狀態註解,如字型、邊線顏⾊色
• Coordinates:經緯度、坐標
• Settings:畫⾯面單位設定、標⽰示顏⾊色設定
• Lite:隱藏圖案,只顯⽰示標注
其他特點• 單⼀一單位(px)
• 建⽴立專屬⾃自⼰己的物件樣式(Symbol) 以及⽂文字樣式 (Text Style)
• 好⽤用的切⽚片⼯工具
• 複製 CSS 樣式
• 內建 & ⾃自製Template
• ⾃自動存檔
• 輕量軟體
Symbols & Text Style Demo
Slice (切⽚片⼯工具)
• 可⼀一次轉存多種尺⼨寸圖⽚片
• 物件切⽚片:快速鍵S +點擊想轉出的圖⽚片
• 在圖層區拖拉物件到資料夾也可以直接轉圖(但只有1x)
複製 CSS 樣式border-radius: 3px;
/* Rectangle 11: */
background: #FFFFFF;
-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.30);
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.30);
!font-family: NotoSansHant-DemiLight;
font-size: 16px;
color: #2B5F75;
line-height: 16px;
letter-spacing: 1px;
!font-family: NotoSansHant-Regular;
font-size: 13px;
color: #555555;
line-height: 20px;
內建 & ⾃自製Template
• 內建各種樣版,不必特地記憶
• 可⾃自⾏行建⽴立樣板儲存供⽇日後套⽤用
輕量軟體
兩位數跟三位數的差別
阿都給你講就好啦
看起來好像優點很多
缺點• MAC only
• English only 網路⽂文章看⼀一段要休息半⼩小時
• 不像 Sublime text 可以永久試⽤用(請⽀支持正版)
• 無法直接開啟與直轉 psd, ai 檔但可開啓svg檔
• 使⽤用習慣差異
其他教學 / 資源• UI week http://uiweek.com/
• Sketch 3 Tutorials (Youtube) http://goo.gl/La1tyL
• Design + Code https://designcode.io/
Thanks!