20
Discovering Sketch the designer’s toolbox

Discovering sketch

Embed Size (px)

DESCRIPTION

对Skytch的简单介绍

Citation preview

Page 1: Discovering sketch

Discovering Sketchthe designer’s toolbox

Page 2: Discovering sketch

Keep knowledge current跟国际接轨

Page 3: Discovering sketch

更富有活力

容易上手

资源多

更适合当前的web design

更适合移动应用设计

2012 Apple Design Award winner

⽤用来做web design是⼤大炮打蚊⼦子

对移动端设计不友好

更新缓慢,运⾏行缓慢

贵...

Page 4: Discovering sketch

old fashion

以图⽚片作为排版和装饰元素的设计越来越少

Page 5: Discovering sketch

the trend扁平化⻛风格流⾏行,以⼤大量⾊色块和⽮矢量图标为主

Page 6: Discovering sketch

Features

Page 7: Discovering sketch

when saving the file…

很难找回历史版本

每次保存时记录⼀一个版本,Revert to > Browse all versions 可以找回任何时候的版本

Photoshop

Sketch

Page 8: Discovering sketch

when drawing rounded shapes…

You can dynamically edit corner radius in Sketch:

With PS, you can’t do it dynamically, you had to draw a new shape…

Page 9: Discovering sketch

If you’re a UI designer…

In Sketch: You have a non-limit canvas. Smart Guide will help you a lot in aligning objects. Link Styles will help you when you edit multiple objects.

Page 10: Discovering sketch

If you’re a front-end developer…

Sketch have native Grid view support:

Page 11: Discovering sketch

If you’re a front-end developer…

You can copy CSS properties from an object in Sketch

Page 12: Discovering sketch

If you’re a programmer…

You can extend Sketch by plugins, get them on Github, or write your custom scripts with JSTalk - Talking to cocoa with javascript.

Page 13: Discovering sketch

If you’re a mobile UI designer…

you can preview Sketch design on mobile devices with Sketch Mirror

Install Sketch Mirror on you iPhone and open it Your iPhone and computer must in a wifi network Choose an artboard in sketch Click connect

Page 14: Discovering sketch

Suggestions

Page 15: Discovering sketch

Efficiently Rename Layers 起个好名

Suggestion 1

Tips:Efficiently rename your layers, groups, artboard and link styles.Select a layer. Hit ⌘ + R. Start typing. Hit Enter to save.

After renaming your first layer, press Tab to go to the next layer (or Shift

+ Tab for the previous), then hit ⌘ + R to rename it.Create Artboards before start, name your artboards with device name or

page name. If you want to export to sub folder, you should add sub

folder name and ‘/’ to a prefix for your artboard name.

Page 16: Discovering sketch

create multiple design in one page 万物霜天竞⾃自由

Suggestion 2

Tips:Canvas is non-limit size.Create artboards and groups to manage your layers.Select multiple layers, then hit ⌘ + G to create layer group.

⌘ + + to zoom-in, ⌘ + - to zoom-out⌘ + 1 to reset view, select a layer and ⌘ + 2 to view it, ⌘ + 3 to put it

in the center. Arrows or space + drag to move your view port.

If you want to export your design, hit ⌘ + Shift + E

Page 17: Discovering sketch

Suggestion 3

设计: !

创造力 > 复制风格 > 复制样式 !

编程:

复制思想 > 复制模式 > 复制代码

Page 18: Discovering sketch

Sketch Resources

http://www.sketchappsources.com/

http://www.sketchgems.com/

http://sketchmine.co/

Sketch official Web Site

Page 19: Discovering sketch

Sketch Articles

Sketch 中⽂文⼿手册

http://blog.mengto.com/photoshop-users-how-to-switch-to-sketch/

http://blog.mengto.com/sketch-vs-photoshop/

http://blog.mengto.com/sketch-vs-fireworks/

http://blog.mengto.com/how-to-wireframe-an-iphone-app-in-sketch/

Discovering Sketch

知乎:界⾯面设计⼯工具 Sketch 的使⽤用体验如何?

初识Sketch:设计师的⼯工具箱

Sketch:⺩王冠上的钻⽯石

Supercharge your Workflow in Sketchhttp://sketchtips.tumblr.com/

Page 20: Discovering sketch

Thank you

[email protected]

Give it a try