Sketch初学者秘籍

用户头像
杭州/网页设计师/9年前/2450浏览
Sketch初学者秘籍
用户头像
M麦麦

sk初学者经验分享

写在前边er~从接触sk至今已有三个月有余,其实一开始我是拒绝的,毕竟哥们之前一直用的是“鹅逗B”的ps啊,突然让我用sk那多别扭,这就和跟人干仗一样,哥们本来是耍贱啊不耍剑的高手,你非整根狼牙棒塞我手里,招式全乱了好嘛,家伙也不趁手啊,但是,对这里是转折,但是在我用了这根棒子一段时间后,我贱贱的爱上了它,简直不能自拨er好嘛,甚至我见到一个同行就逮着人家给人家推荐sk,人家都是用一种这个人怎么了的眼光瞅着我,是转行做销售了吗!好了,屁话不多扯了,下面我把我从接触sk到现在发现的好玩的东西及经验分享给大家,当然,这里分享的大部分的知识可能都是网上都有的,但是都比较散,不利于初学者发现,我只是把这些散的知识整理在一起并加以自己的理解呈现给大家!

 

初识sketch

 

Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页,图标以及界面设计的最好方式。但除了矢量编辑的功能之外,我们同样添加了一些基本的位图工具,比如模糊和色彩校正。

 

我们尽力让 Sketch 容易理解并上手简单,有经验的设计师花上几个小时便能将自己的设计技巧在Sketch中自如运用。对于绝大多数的数字产品设计,Sketch 都能替代 Adobe Photoshop,Illustrator 和 Fireworks。

 

展开阅读:http://www.sketchcn.com/sketch-chinese-user-manual.html

下载地址:http://www.uigreat.com/group/3/thread/2596

 

快捷键

 

万万不可小瞧的一部分,我为什么把快捷放这么靠前给大家提出来,不怕大家笑话,我现在用ps的时候大部分还是用鼠标点击工具栏选中工具操作,而不是快捷键,就是因为我在初学ps的时候没有先接触快捷键,后来ps用熟了以后反而忽视了快捷键这些,但是我在一开始接触sk的时候在还没特别熟悉的时候就使用快捷键操作,所以现在工作效率提高了很多。所以建议大家从一开始就要使用快捷键操作,虽然开始的时候可能显得笨手笨脚,但是我敢保证不出半个月你就会爱上你的手指(怎么感觉哪里不对~),行云流水般的操作,很爽的一件事情啊。

 

我在这里主要给大家分享一些冷门但是绝对常用的快捷键,一些是我自己发现的,有些事同事推荐的。

复制图层    command+d

上移/下移图层    alt+command+⬆/⬇

上移/下移到最顶层    control+alt+command+⬆/⬇

 

查看所有画板    command+1

查看当前选中元素    command+2

全屏    command+.

复制/粘贴图层样式    alt+command+c/v

选取某一元素   按住command+鼠标左键

sk的很多快捷键和ps是一样的,大胆的尝试!

快捷键:http://www.jianshu.com/p/bf3e4a9e076e

 

小技巧

比如说现在我的这个矩形高度是150 我想改成180那么它会默认基于顶部增加30,如图:

如果我们想基于底部增加30的话可以这么做

1a7458a17629a8012060c8a0d345.jpg

在需要改变尺寸的数字后面加个b(bottom),它就会基于底部增加30

同理基于头部增加后面加t(top)  基于左侧加l(left)  基于右侧加r(righ)  基于中心加m/c(middle/center) 

同时sk还支持运算 +-*/ 都可以

假如说我们想把这个矩形变成基于中心缩小一倍那么我们就可以这么做 

 中间的小锁要点上,这样输入完毕后点回车就变为我们想要的结果,如图


插件

 

在这里向大家推荐几款我接触sk迄今为止比较常用和好用的插件

1. 标注插件Sketch Measuer  下载地址:https://github.com/utom/sketch-measure

2. Craft,这个插件一句半句解释不清楚,下面我会发一个栗子老师的教程,里面讲解很详细  下载地址:https://www.invisionapp.com/craft

3. 一键随机生成中文名  下载地址:http://sketch.im/plugins/68

还有很多好玩的插件等着大家自己去发现。

 

Symbols and Style

 

这就是SK的终极大招,元件和样式,为什么说sk的工作效率高,团队合作起来更方便,就是因为这两个必杀技的存在。

什么事symbols呢,MD...symbols就是元件啊,用语言解释好无力,你看反正这个东西是这样用的:

da8d58a176d4a801219c77024137.jpg

选中你要创建元件的元素点击左上角的按钮,命名你的元件名字(命名的时候要遵循自己的规则,如若不然在你面临超大型项目的时候超多的元件将会杂乱无章),点击ok完成创建,创建后使用的时候点击中间的那个元件按钮找到你要用的元件拖动到你要放的位置即可:

b67358a176eda801219c777ea686.jpg

简单的给大家演示一下symbol的强大之处,在你设计完成100多个页面甚至更的页面的时候,老板说:“哎?我觉得左边栏的背景颜色有点浅啊,改的深一些我看看效果!”,以前遇到这种情况有很多同学会在心里:“我@#¥#%……*!@的!”,但是现在请绅士的微笑着告诉你的老板、客户、产品经理说:“好的,给我10秒钟!”。

双击leftmenu_bg元件跳到symbols页面,对元件进行修改

87fd58a17721a8012060c845f3ae.jpg

 

修改前的页面:

7c4458a17742a801219c77400dc6.jpg

 

修改后的:

b74558a17769a801219c77f8fb24.jpg

就这么简单秒秒钟搞定。你不是要深颜色的吗,现在够深了吧!  -. –

 

什么是Style,就是样式,如果在做设计的你会写css+html,那么恭喜你,这里的style几乎和css没有区别,使用方法:

485d58a17788a801219c778c703b.jpg

选中字体,设置好对齐方式,字体样式等属性后点击Not Text Style下面的新建字体样式,命名样式就ok了

29b358a1779da801219c77cb5e84.jpg

使用的时候选中字体然后右边选择相应的样式就可以

472958a177baa8012060c88bc366.jpg

25c258a177d4a8012060c8e84b1a.jpg

 

修改样式的时候随便选中一个你用到样式的文字修改然后点击刷新,所有用到这个样式的字体都会更新

 

 

这里简单的给大家介绍一下这个两个大招的使用方法,大家可以动手去感受一下,要深入了解使用symbol和style需要大家到具体项目中去实践并体会。

 

symbol和style何时创建,如何创建?


其实symbol和style的创建时间和规范的创建时间是一致的,创建规范的时候把symbol和style做到里面就哦了,一举两得。如何创建要根据具体项目定了,文末我会发一个我女神根据实际项目创建的规范!(如果大家对这块有兴趣,我可以邀请我女神出一篇教程给大家!包括怎样创建元件、样式,如何正确的命名等。)


规范何时创建?http://www.uigreat.com/article/208 请耐心读完它,如有必要你可以深情并茂的读出来! -,-

事后诸葛亮的规范尽量避免。

 

SK能用英文版别用中文版


1.因为我们做的是设计行业,这个行业的b格很重要,用英文要比中文版的b格高。

2.计算机语言都是英文,英文的识别性要比中文的高很多。

 

相关答疑


为什么新建app的时候要用375*667的尺寸

http://www.sketchchina.com/read-573.html

 

为什么我的插件不能用?

1. 需要升级?

2. 版本问题,可能你用的插件不是sk自己开发的,版本升级后可能会导致无法使用。

 

为什么我的插件无法升级?

一些国外的插件需要翻墙后才能升级,推荐大家使用蓝灯翻墙神器,免费好用,免费流量基本够用。

 

如果你之前是用ps做设计的设计师,在仔细看完这篇江湖失传已久的独门秘籍并且把里面链接的地址的视频看完后还是没能初步掌握SK技巧的话,你来找我,我帮你问问我家隔壁的工地还招不招搬砖工!

 

写在后边er~,这篇文章是我接触sk以来一些经验总结,给大家分享出来希望大家在学习的时候尽量少走弯路,当然我分享的这些东西可能存在瑕疵,如有不对的地方希望大家下面评论提提建议,也希望大家有好的东西拿出来与大家分享!如果大家遇到什么问题,欢迎大家留言咨询。

 

Sk学习网站:

http://sketch.im

http://www.sketchchina.com/index.php

http://www.uigreat.com

墙裂推荐大家看一下栗子老师的视频教程:

http://www.uigreat.com/course/21

27
举报
|
44
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
平面风格黄绿色系花朵装饰
金色颗粒质地的平面
金色颗粒质地的平面
空的平台平面和自然景观
城阙凡花
牛奶乳液层次平面平铺平面
水蜜桃和李子的平面水果图案
空的平台平面和自然景观
海底世界插画
金色颗粒质地的平面
金色颗粒质地的平面
金色颗粒质地的平面
“知识宅急送”外卖,快递,平面,海报,素材,教育
平面设计 吊牌设计
古风平面仕女与瓷器
平面插画设计女孩喝咖啡
金色颗粒质地的平面
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
倒计时,海报,平面
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
平面花卉图案扁平简约无缝拼接插画
平面男孩喝咖啡插画设计
平面书法字手写
平面插画情侣/矢量
城市园林平面布局航拍
登录注册