Sketch3 學習筆記

41
Sketch 3 䋊聜執懿

Transcript of Sketch3 學習筆記

Page 1: Sketch3 學習筆記

Sketch 3

Page 2: Sketch3 學習筆記

http://www.bohemiancoding.com/sketch/ http://bohemiancoding.com/sketch/support/documentation/

Page 3: Sketch3 學習筆記

( File / Revert to / Browse all Versions )

UI Icon Web Prototype...

& Template ( File / Save as Template )

UI Kits Plugin

Page 4: Sketch3 學習筆記

MAC only

...

PS AI ... SVG EPS PDF

Page 5: Sketch3 學習筆記
Page 6: Sketch3 學習筆記
Page 7: Sketch3 學習筆記

Toolbar

Page 8: Sketch3 學習筆記
Page 9: Sketch3 學習筆記

Vectorize Stroke ( )

( Use as Mask )

(Export)

Page 10: Sketch3 學習筆記

Rotate Copies ( )

Page 11: Sketch3 學習筆記

Vector ( )

V

Straight

Mirrored

Disconnected

Asymmetric

Page 12: Sketch3 學習筆記

Make Grid ( )

Page 13: Sketch3 學習筆記

Layout Settings ( )

Page 14: Sketch3 學習筆記

Layer List

Page 15: Sketch3 學習筆記

/ Page 1

// /

( Symbol ) ( Text Style )

( Slice )

( User as Mask )

Page 1 ( )

Page 16: Sketch3 學習筆記

Canvas

Page 17: Sketch3 學習筆記

(Artboard) ; A

( Edit /  File / Save as Template )

CSS

( option / Alt )

( Control+R )

Artboard ( )

Page 18: Sketch3 學習筆記

Inspector

Page 19: Sketch3 學習筆記

px

Type / Text on Path

vs 2x

0.5 1.5

Page 20: Sketch3 學習筆記
Page 21: Sketch3 學習筆記

JPG

PNG

TIFF

SVG

PDF or EPS

Page 22: Sketch3 學習筆記

PSD AI.... ...XD

Page 23: Sketch3 學習筆記

Demo

Page 24: Sketch3 學習筆記

Android

Page 25: Sketch3 學習筆記

iOS

Page 26: Sketch3 學習筆記

Web

Page 27: Sketch3 學習筆記
Page 28: Sketch3 學習筆記

Control+H

Control+L

Control+G

Space

Enter

⌘+3

⌘+2

Z

Z

Z + alt

Escape

Tab/Shift-tab

Page 29: Sketch3 學習筆記

R

O

U

T

L

A

V

S

P

Page 30: Sketch3 學習筆記

&

Alt +

Alt +

Alt +

Shift +

Page 31: Sketch3 學習筆記
Page 32: Sketch3 學習筆記

iOS Mirror

http://bohemiancoding.com/sketch/features/#mirror

Page 33: Sketch3 學習筆記

Plugins

Sketch Toolbox

Page 34: Sketch3 學習筆記
Page 35: Sketch3 學習筆記

Content-generator- sketch-plugin

Page 36: Sketch3 學習筆記

Sketch-measureA measure tool for measurements & design specs, Sketch 3.3+ support.

How-to 1. Create Overlay

2. Measure Size

3. Measure Spacing

4. Get Property

5. Create Note

Page 37: Sketch3 學習筆記

1. Create Overlay ⌃ + ⇧ + 1

2. Measure Size ⌃ + ⇧ + 2

3. Measure Spacing ⌃ + ⇧ + 3

4. Get Property ⌃ + ⇧ + 4

5. Create Note ⌃ + ⇧ + 5

6. Spec Export ⌃ + ⇧ + E

7. Toggle All Measure Hidden ⌃ + ⇧ + H

8. Toggle All Measure Locked ⌃ + ⇧ + L

9. Reset(Clear) Artboard Measure

https://github.com/utom/sketch-measure

Page 38: Sketch3 學習筆記

prototyping

...

Page 39: Sketch3 學習筆記

Design + Code ( )https://designcode.io/A Comprehensive Guide to Designinghttps://designcode.io/sketch-mastering

SketchAppSources ( )http://www.sketchappsources.com/

Sketch resourceshttp://goo.gl/knefyG

Sketch plugin-directoryhttps://github.com/sketchplugins/plugin-directoryhttps://gist.github.com/ymcheung/10899164

UI weekhttp://uiweek.com/

learn.ustwo http://learn.ustwo.com/sketch-resources

Page 40: Sketch3 學習筆記

Chuan Yanghttps://twitter.com/chuantw

Page 41: Sketch3 學習筆記

Thank you!