discovering sketch

Discovering Sketchthe designer’s toolbox

Keep knowledge current跟国际接轨

更富有活力

容易上手

资源多

更适合当前的web design

更适合移动应用设计

2012 Apple Design Award winner

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

对移动端设计不友好

更新缓慢，运⾏行缓慢

贵...

old fashion

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

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

Features

when saving the file…

很难找回历史版本

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

Photoshop

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…

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.

If you’re a front-end developer…

Sketch have native Grid view support:

If you’re a front-end developer…

You can copy CSS properties from an object in 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.

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

Suggestions

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.

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

Suggestion 3

设计： !

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

编程：

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

Sketch Resources

http://www.sketchappsources.com/

http://www.sketchgems.com/

http://sketchmine.co/

Sketch official Web Site

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/

Thank you

peng.miao@yottaa.com

Give it a try