程序员工具使用Sketch UI设计Web前端开发

sketch新手启蒙

2015-12-24  本文已影响2768人  崽orz

在学习sketch的过程中找资料、找教程花费了很多的时间。在此做一个集合方便自己回顾,也提供给正在学习sketch的盆友~

放不了歌的!

sketch是个什么鬼

sketch一点都不难、一点都不难、一点都不难!学习sketch最大的原因是学不会ps(别笑我~~),ps就像一道坎,各种使用的流程就想被下了诅咒一样一遍两遍都记不住。想出个高保真的原型磨磨唧唧一天都搞不定。于是就查询各种其它可代替的工具,然后就被安利了sketch(主要是因为图标好看)。

sketch是一款矢量设计工具,适合所有的设计师。作为产品对于我最大的作用是出一些演示用的原型方案,通常跟运营喵和程序猿沟通的时候他们看到高保真原型的感兴趣程度要比线框图高很多,当然产品经理最重要的还是考虑功能和交互,设计就让专业的设计师来。如果你有一颗折腾不停的心,想独立完成UI设计并切图开发,sketch就最适合你不过了。 

sketch去哪里下载

你是不是已经被安利的不行不行的,就差下载了,目前仅支持mac,官方版本有30天的试用期(30天足够你熟悉工具并考虑是不是要出好多大洋买下它了)。

传送门http://www.sketchapp.com

sketch怎么学

下载完打开全英文是不是已经吓尿了。。。看不懂没关系的其实,宝宝别怕。里面的工具都有图形标识,等你跟着教程走一遍,就知道对应的是什么功能了。

以下所有的教程都来自网络,出处见链接,非原创。感谢愿意分享的大牛们,让我们这些小白少走了很多弯路。

教程一:用sketch画个萌萌大大白

传送门http://www.ui.cn/detail/43326.html

1

画完是不是觉得自己很腻害~~~啦啦啦,抓紧学习下个教程吧,比画大白还简单呢。

教程二:创建 Google Sheets 图标

传送门http://www.cellier.me/2015/04/13/Sketch-3-Tutorial-Create-Google-Sheets-Icon/

2

是不是很简单!!感觉自己分分钟可以成为一个UI设计师了?请注意你是在模仿!模仿!模仿!距离设计师还很远~~~~~~~远~~~~

教程三:制作长阴影效果

传送门http://www.sketchs.cn/tutorials/detail/222.html

3

在导出的时候遇到的困难,不能导出,尝试组成组合图层后,点击右下角的make exportable,就可以导出啦~~

教程四:用Sketch制作一枚精美摄影图标

传送门http://www.zcool.com.cn/article/ZMTc5MjI4.html#

其中一个拖拽的步骤没有掌握好,导致图标有些变形。对于颜色的把握还需要加强。

4

教程五:沉默灭绝中的长颈鹿

传送门:https://zhuanlan.zhihu.com/p/26167166?group_id=832617644971675648

有一个步骤用到了剪刀工具,选中图形,然后点击工具栏中的剪刀工具,或执行菜单命令图层(Layer)> 路径(Paths)> 剪刀工具(Scissors)来使用。

5

sketch你真的学会了么

http://sketch.im  (这个一定要看)

这个网站提供了非常多的国外设计师的作品,都有源文件可以下载。在熟悉了sketch之后,可以模仿设计稿作品来画,画完对比源文件看看自己欠缺的地方。对于掌握一些细节和不常用但很有用的工具是非常有帮助的。

sketch中国http://www.sketchs.cn/index.html

sketch中文网http://www.sketchcn.com/index.html

这个网站提供了sketch中文手册,详细的讲解了每个功能的使用方式。不记得的时候去翻一翻很有帮助。

完成了几个教程之后是不是觉得自己已经无敌了,可以抢设计师饭碗了~~~现实总是残酷的。工具永远只是表达思想的工具,会用工具不代表你就有好的创意和想法。正在学习sketch的小伙伴我们一起努力哈~~

上一篇下一篇

猜你喜欢

热点阅读