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