源地址:http://mp.weixin.qq.com/s?__biz=MzA4MzI0MTkxOQ==&mid=200277398&idx=1&sn=4ae436fb2f09f4f6b2638d4da77a8f7f&key=2f5eb01238e84f7e150fa166794995b0373052a401c795d81b32806efa839c2168f2150b24f792d8fc4f3395333557c9&ascene=0&uin=NTI2NDgzMzM1&devicetype=iMac+MacBookPro9%2C2+OSX+OSX+10.10.1+build(14B25)&version=11020012&pass_ticket=EIkvkqnf54kj6IyItD%2FMZP4HneZK%2BvuiwiGPxGW8t3ywwPDObmQTZF7tjpQDQB0s

由于微信不方便观看,特转载!

谢谢静电!!

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

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

这个时候有人可能会问,我的工具栏不是这个样子的,空空如也!你是怎么做到的? 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的设计师出现。

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

Sketch使用教程(二)相关推荐

  1. 黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级) 本章介绍的是企业库加密应用程序模块 ...

  2. Konstrukt PHP REST框架 教程二

    Konstrukt PHP REST框架 教程二 入门 - 第2部分 在本教程中,我们假设你已经完成了第一个教程,因为它的基础上产生的代码从该. 谈判的Content-Type 在大多数情况下会发出一 ...

  3. Mac下Android studio 之NDK配置教程(二)

    Mac下Android studio 之NDK配置教程(二) (一)简述 从上一篇NDK配置教程(一) 中,我 简单的阐述了MAC下NDK的基本解压和环境配置步骤. 本节我讲详细描述android s ...

  4. python elasticsearch 入门教程(二) ---全文搜索

    python elasticsearch 入门教程(二) ---全文搜索 截止目前的搜索相对都很简单:单个姓名,通过年龄过滤.现在尝试下稍微高级点儿的全文搜索--一项 传统数据库确实很难搞定的任务. ...

  5. openlayers地图旋转_OpenLayers教程二:实现简单的地图显示

    本文衔接上一篇文章:不睡觉的怪叔叔:OpenLayers教程二:实现简单的地图显示​zhuanlan.zhihu.com 经过上一篇文章对OpenLayers的简单了解以后,现在让我们来实现一个简单的 ...

  6. 计算机java语言教程,计算机JAVA教程二讲Java语言基础知识.doc

    计算机JAVA教程二讲Java语言基础知识 2.1简单数据类型 2.1.1 标识符和保留字 1.标识符 程序员对程序中的各个元素加以命名时使用的命名记号称为标识符(identifier).Java语言 ...

  7. Java 结构体之 JavaStruct 使用教程二 JavaStruct 用例分析

    使用环境 前一篇在介绍 JavaStruct 类时指定了使用库使用环境为 Java 5 及以上,也即开发我们使用的 JDK 版本为1.5及以上就可以了.以下讲解的用例可以直接将 code 直接粘贴到 ...

  8. C#微信公众号开发系列教程二(新手接入指南)

    此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可直接跳过,也欢迎大神吐槽. 微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教 ...

  9. MIP开发教程(二) 使用MIP-CLI工具调试MIP网页

    初始化 MIP 配置 新建一个 MIP 网页 编写 MIP 网页代码 校验 MIP 网页 调试 MIP 网页 1. 初始化 MIP 配置 首先在html目录下进行初始化 MIP 配置: $ mip i ...

  10. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置

    前言 前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...

最新文章

  1. suse linux 命令
  2. .net 2.0 点击按钮用js控制是否回发关于vs2005的webproject补丁
  3. codeblocks、wxWidgets环境配置
  4. 中国氢能行业发展现状与投资规划深度研究报告2022-2027年版
  5. Android常用的一些make命令(转载)--不错
  6. java web filter链_filter过滤链:Filter链是如何构建的?
  7. java算术表达式求值-中缀表达式转后缀表达式
  8. oracle导入10个G的dmp,Oracle11g导出dmp并导入Oracle10g的操作记录
  9. 强烈推荐一个有情怀的跨平台Redis可视化客户端工具:RedisViewer
  10. solidworks流体模拟分析概述
  11. 自组织网络(Ad hoc)
  12. 富爸爸穷爸爸的所有书籍
  13. java多边形合并_geotools实现多边形的合并缓冲区
  14. PWM调光频率0.1-20KHz以内,共阳极控制高辉无频闪LED车灯调光电源驱动芯片方案FP7125/FP7122/FP7123
  15. 思科模拟器CISCO/华为模拟器ENSP配置一个完整的校园网(网络安全、数据冗余)
  16. Android Studio在项目文件夹/build/intermediates/下找不到bundles文件夹和packaged-classes文件夹
  17. 四柱排盘系统--命理学和程序开发的结合
  18. 荣耀YOYO建议新增快递取件服务
  19. 如何修改Win7系统的多系统启动菜单
  20. 抖音多帧延迟教你前端实现方式

热门文章

  1. python 线程池调用返回结果处理
  2. Android中广播的基本原理
  3. Linux系统中ls命令用法详解
  4. 用scratch编程圆内接三角形
  5. python不同颜色数值大小_python matplotlib:plt.scatter() 大小和颜色参数详解
  6. 如何通过python实现一个web自动化测试框架?
  7. 一网易少女,长文解密《一封来自艾泽拉斯的密码信》
  8. 利用神经网络实现手写字识别
  9. 反射型xss(跨站脚本攻击)
  10. Android 9 谷歌全面屏,跟虚拟导航栏说再见,安卓9.0将使用全面屏手势