Sketch设计教室!从零开始学APP设计利器Sketch(二) - 优设网 - UISDC

Sketch设计教室!从零开始学APP设计利器Sketch(二)

2014/08/27 231288评论区

sketch-app-design-case-2-1

上篇介绍完Sketch令人惊喜的功能后,同学们纷纷表示:Sketch已经有了,就差Mac了。今天除了提醒大家可以用虚拟机外,直接上作者的新教程,让同学们迅速轻松掌握Sketch的工具使用,有Sketch的同学赶紧动手吧!

@JingDesign :上一篇教程中,静电和大家一起认识了Sketch 能为我们带来的惊喜之处。那么这一节的设计教室中,大家一起来认识一下我们的新朋友。 相信在经过这一节的教程,大家都能轻松上手了。上一节的教程后,很多朋友跟我反馈说:Sketch已经有了,就差Mac了。其实,对于操作系统,静电一直认为适合大家就好。Mac有Mac的优势,Windows有Windows的便利。 但非常遗憾的是,Sketch现在没有Windows版本,但没有Mac的朋友也不必失望,我们可以通过装虚拟机的方式体验下Sketch。相信万能的度娘和Google一定可以解决大家这个问题。

上篇教程戳:《SKETCH设计教室!从零开始学APP设计利器SKETCH(一)》
see-more-sketch1

首先我们打开这个美丽的宝石。主界面如下,我们看到,顶部是工具栏,一大堆的按钮。下边默认分三栏,左边是页面,图层等等的操作。 中间是空白的工作区(画布),右侧是属性栏,我们可以在这个界面中调节元素的各种属性。

这个时候有人可能会问,我的工具栏不是这个样子的,空空如也!你是怎么做到的? ok,要有一个舒服的工作流程,首先我们要把自己的工作区域弄的舒舒服服,各种工具随手拈来。

Sketch设计教室!从零开始学APP设计利器Sketch(二)

第一步:定义sketch的工具栏

在有图标的空白地方点击右键,在弹出的菜单中点击“customize toolbar”,在弹出的对话框中,我们会看到很多很多工具。 如果你英文不好,但估计关系也不大,我们来认一下。 钢笔工具,铅笔工具,文字工具,图像工具,切片,artboard(这个随后讲),直线工具,箭头工具,图形库,矩形,圆角矩形,圆形,三角形,多边形,星型,元件,有格式的文本,组合,解除组合,结合路径,接下来这三个就是两个矢量图像进行组合,挖空等等,接下来的forward,backward-这是对图层进行上一层,下一层的操作,tools(工具),变形,平面化,剪刀,图形排列,编辑路径,旋转,字符格式,描边,缩放,蒙版,view(内有标尺显示等等的工具),显示标尺,显示网格,显示布局,显示像素,导出,创建元件,mirror(一款类似于psplay的在手机上预览效果图的工具,另收费),缩放,制作网格,颜色,字体,空白,分隔空间(其实就是在toolbar上显示一条线。)

好了,经过上边的翻译,相信大家已经可以在自己的头脑中找到某些类似软件的影子了。现在,选择自己常用的工具,拖动到下方的框中或者直接拖动到工具栏上。这样就ok了!

Sketch设计教室!从零开始学APP设计利器Sketch(二)

第二步:使用artboard来绘图

自定义工具栏后,我们就可以开始小试牛刀了。那么底下这块空白区域就是我们可以绘制的“画布”。 有人会问,我不能自定义画布的大小吗?恩,刚开始静电也有这样的疑问,但试过刚才图标栏目下的artboard后,你就这样这样的操作是多余的了。 好的,我们选择artboard或者insert,选择插入一个artboard。这个时候鼠标变成了十字型,我们可以自己拖动鼠标画一个“画布”了,然后选择右侧的属性区域,精确定义“画布”的大小和位置。对了,在sketch中,我们最好不要把这个东西叫做“画布”,它是artboard(艺术板)。我们可以在同一个界面中创建多个artboard,非常方便,就如下图所示。左侧会出现artboard的名字,我们在图层名字上双击,即可修改artboard的名字了。

Sketch设计教室!从零开始学APP设计利器Sketch(二)

然后,在artboard上尽情绘制吧。 选择矩形,原型,三角或者星星,随便涂鸦。当然,你也可以在artboard外边画一些东西。当做注释。这个时候,左侧的图层会多出一些东西,你可以拖动他们调整图层位置,或者选择锁定或者隐藏某些图层。右侧的属性面板,在选择某个元素后,可以修改一些元素的属性,比如描边,字体颜色,大小等等。和常用的ps等软件基本类似。

Sketch设计教室!从零开始学APP设计利器Sketch(二)

第三步:sketch特色——体验强大的对齐功能

我们在artboard上绘制了一些元素,这个时候,我们可能会需要让他们对齐,或居中,或居右。 这个时候我们会发现sketch的强大对齐功能了,拖动某个元素,辅助线便会显示,但比起ps智能太多了,这个功能,只有自己亲自上手体验才能感受的到。

Sketch设计教室!从零开始学APP设计利器Sketch(二)

第四步:使用rotate copies创建神奇的图形

选中刚才画的星型,选择rotate copies,接着选择要复制的步数。我这里选择30.确定,看看发生了什么神奇的事情。如果你找不到rotate copies,那么看第一步中的操作,把图标从工具库中拖到toolbar上。

Sketch设计教室!从零开始学APP设计利器Sketch(二)

第五步:使用位图和创建遮罩

有时候我们需要导入一些位图到我们的工作项目中,虽然Sketch是一款矢量工具,但对于位图的基本处理也是非常棒的。首先选择image工具,在弹出的窗口中选择一张你要导入的图片。静电在这里导入两只可爱的小猫图像,同样,右侧的属性窗口中可以调节位图的一些属性,坐标,大小,透明度,边框,投影,模糊等等,你们看,其实他的位图功能还是蛮不错的哈。

接下来,我们要把这张小猫加上圆角。我们使用圆角矩形工具画一个圆角矩形,调节圆角矩形的弧度和位置,把这个圆角矩形盖在这个位图之上,选中这两个图形, 接着选择工具栏中的mask(如果找不到遮罩工具,可以看一下步骤一中的操作,把遮罩工具拖进来,其实我们还是应该记住一些快捷键,因为toolbar的位置非常有限),遮罩形成了,我们看到了变成圆角的位图。很简单吧?

clip_image007

ok,到这里,我们已经熟悉了很大一部分操作了,可以说这个软件的大部分操作都非常容易上手。大家跟随静电的步骤,一步步的实验吧,相信这个对每个人来说都是无比简单的。再唠叨一下,至于说英文不好,或者没有mac这样的理由,那压根就不是理由好么,第一,静电建议大家在使用软件的时候,尽量选择英文版,刚开始可能会有一些难度,但习惯之后,你会发现,大部分的词在每一个软件中都会出现,比如什么pencil啊,rotate(翻转)了之类。实在不懂,那索性用一下,就知道这个图标或文字所代表的功能了,反正就是折腾嘛,我们多按一个键,随便拖动一下,电脑又不会爆炸。大不了从头开始来过。

嗯哼。至于mac,静电建议大家装虚拟机试用,或者买一台macmini(为什么呢?很便宜性能又好有木有?初接触mac系统的同学推荐。)还有一招,除了虚拟机,我们可以在pc上安装苹果系统,但非常耗时而且得不到官方支持,静电最初接触苹果就是从“黑苹果”开始的,这个请自行斟酌。

最后,感谢好友rongfei和rongrong在sketch上对我的帮助,rongfei提供了折扣码让我以更优惠的价格买到了正版sketch,rongrong也是sketch的簇拥,最初接触的时候,一直缠着她各种问,真是辛苦了。 总之,大家相互学习与交流,希望有更多使用sketch的设计师出现。

下一讲静电与大家一起来学习sketch的特色独有功能。 请务必要关注jingdesign与静电的设计教室。 有疑问的朋友可以关注静电的微信公众号jingdesign91与我们一起进步。

扫描下面的二维码关注jingdesign公众号.

clip_image008

新手从零开始学好文合集!

学完直接晋级抠图高手!
《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》

超全面的设计师自学指南!
《超赞!设计师完全自学指南》

多位资深前辈经验合集!交互设计师自学指南!
《交互设计师修炼指南!教你从零开始成为优秀交互设计师》

原文地址:ui
作者:@JingDesign

AD11-cover-all

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量76万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/sketch-app-design-case-2

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 设计师干货 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 设计规范 海报设计 用户体验设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里