从零开始学APP设计SKETCH

SKETCH设计教室!从零开始学APP设计SKETCH

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

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

第一步:定义sketch的工具栏

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

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

第二步:使用artboard来绘图

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

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

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

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

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

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

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

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

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

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

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

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

时间: 2024-10-07 03:19:39

从零开始学APP设计SKETCH的相关文章

APP设计Sketch教程(04)-钢笔与路径

sketch是一款矢量软件,提起矢量软件,那么大家一定会想到各种路径,想到路径,就有节点,想到节点,就有贝塞尔曲线,然后一定会有的东西就是钢笔.扯到钢笔,对于很多人来说,这一定是个不太愉快的回忆,钢笔是绘图软件中很难掌握的工具之一.如果用不好,我们就没法画出各种不规则的形状出来,要么不够平滑,要么奇形怪状惨不忍睹. 那么sketch中的钢笔工具会是什么样子呢?我们在界面中找到钢笔形状的图标,如果找不到,可以在工具栏中右键,然后选择自定义工具栏,将钢笔工具拖动到工具栏中便于使用,顺带一提,钢笔工具

从零开始学Sketch——进阶篇

本文转自 http://www.jianshu.com/p/ff70b5f35c8f 从零开始学Sketch——进阶篇 Sketch是一款矢量绘图应用,而矢量绘图无疑是目前进行网页.图标以及界面设计的最好方式. 在初识了Sketch的界面布局和基础工具之后,我们就可以开始进入高阶的Sketch工具篇学习了.这篇文章主要会涉及Sketch模板.插件的使用,以及Sketch在具体使用过程中的一些技巧分享. 如果你曾接触过PS.AI.Axure等软件,那么接下来的内容你应该不会陌生,因为所有的设计软件

从零开始学Sketch——进阶篇-b

从零开始学Sketch——进阶篇 Sketch是一款矢量绘图应用,而矢量绘图无疑是目前进行网页.图标以及界面设计的最好方式. 在初识了Sketch的界面布局和基础工具之后,我们就可以开始进入高阶的Sketch工具篇学习了.这篇文章主要会涉及Sketch模板.插件的使用,以及Sketch在具体使用过程中的一些技巧分享. 如果你曾接触过PS.AI.Axure等软件,那么接下来的内容你应该不会陌生,因为所有的设计软件学习的路径都是相似的,都是从认识基本功能框架到外部资源整合运用,最终形成个人风格的一个

从零开始学ios开发(三):第一个有交互的app

感谢大家的关注,也给我一份动力,让我继续前进.有了自己的家庭有了孩子,过着上有老下有小的生活,能够挤出点时间学习真的很难,每天弄好孩子睡觉已经是晚上10点左右了,然后再弄自己的事情,一转眼很快就到12点了,就要去睡了,现在身体汤不牢啊,如果不早点睡,第二天上班肯定没精神,要靠红牛了,呵呵,在这样的情况下再挤出时间学习ios真的很困难,只能是见缝插针,抓紧一切可用的时间学习,时间,挤一挤总归是有的,只是多少问题. 这几天看来书的第三章,主要讲了如何添加按钮,然后为按钮添加响应事件,当点击按钮后,触

APP设计利器Sketch

APP设计利器Sketch,这几天的练习作业. 玻璃杯牛奶.png 灵感星球.png 注:灵感星球造型来自游戏Walkr. 水滴.png 水滴依然不会画,画得不通透,求指教. 晚上照着图片画,水滴没画出心得,倒是找到一个画鸡蛋黄的方法,我也是醉了... 水滴2.png Icon 这是在简书上找的教程画的,可以直接搜索:<Sketch 练习 - iOS 图标> 从此看到不爽的UI可以直接自己调整了,爽! Branch UI设计

转:从零开始做app需要做的事情列表

https://qdan.me/list/VaXl7N8emfv1ayWg 从零开始做App的Bootstrap 做一个App,需要很多东西. 不定期更新. 团队 工欲善其事,必先利其器. 需求管理 支持版本.迭代.需求的创建与管理. 产品经理在上面录入需求,开发参照开发,测试参照写测试用例,并进行状态流转. 国内大厂如腾讯都有内部自己开发的管理平台如tapd. 小团队可以使用轻量级的平台如: 国外:Trello.Basecamp.Jira.Asana 国内:Tower.Teambition.F

关东升的《从零开始学Swift》3月9日已经上架

大家一直期盼的<从零开始学Swift>于3月9日已经上架,它是关东升老师历时8个月的呕心沥血所编著,全书600多页,此本书基于Swift 2.x,通过大量案例全面介绍苹果平台的应用开发.全书共分5 部分,包括Swift语法篇.Cocoa Touch框架编程篇.混合编程篇.进阶篇和项目实战篇,囊括了开发工具介绍.语言基础知识,直至应用在App Store上线的所有内容.此外,本书前20 章专门配有同步练习,以帮助读者掌握所学知识.本书更加适合Swift开发者.大家可以看一下. http://it

关东升的《从零开始学Swift》 即将出版

大家好: 苹果2015WWDC大会发布了Swift2.0,它较之前的版本Swift1.x有很大的变化,所以我即将出版<从零开始学Swift> <从零开始学Swift>将在<Swift开发指南>第1版的基础上添加Swift2.0的内容,同时摒弃第1版的一些不合理的内容,使得本书更加适合Swift开发者.我将连续发一些<从零开始学Swift>的学习笔记,有兴趣者,可以看一下. 附<从零开始学Swift> 此书目录: 第1章 准备起航1.1 本书约定1

从零开始学ios开发(十二):Table Views(上)

这次学习的控件非常重要且非常强大,是ios应用中使用率非常高的一个控件,可以说几乎每个app都会使用到它,它就是功能异常强大的Table Views.可以打开你的iphone中的phone.Messages.Contacts.Mail.Settings等等等等,这些都用到了Table Views. 在Table Views中,Table是用来显示一系列数据的,每条数据占用且只占用一行(一个table cell),在ios中没有规定table到底可以容纳多少行数据,也就是说,只要内存足够多,tab