网络和辅助线的使用- Sketch从入门到精通

设计师一般在作图的时候都离不开网格和辅助线,以前在PS或AI里的时候辅助线你必须手动去调整辅助线的位置,有的时候也难免会有误差或者半像素的偏离。但在Sketch 3里面,辅助线极大的避免了失误,并且提高了效率。

Sketch 3里面辅助线是自动的,你只需把鼠标移到标尺那里,辅助线就自动出来,你想确认要这条辅助线只需单击一下即可,如果不想确认,只是想简单看下距离位置,那么可以不用单击,鼠标移到哪里,辅助线就自动跟到哪里,完全不用你去小心翼翼的去拉一条辅助线,然后去轻轻的对准你的图形。如下图:

clip_image002

看见红色那条辅助线没?你可以任意移动鼠标在标尺之间,我们现在就把中间的钻石(就是Sketch的logo)用辅助线轻松定好它的坐标,如下图:

clip_image004

这样你就能准确的知道这个logo的具体坐标值了。而且,按住ALL键,还能自动出现元素之间的间距大小,你要先以一个元素为基础,按住ALL键,就能快速知道这个基础元素和其他元素的上下左右的间距是多少了。是不是很给力?顺便说一下,在给程序员标注图的时候,有的时候也需要给出程序员的具体界面的具体坐标值,也有利于提高工作效率和沟通效率。因为你标注的时候,我们在做界面用的单位都是px(即像素)。而程序他们用的单位有时候是pt,有的时候是磅,所以给坐标轴是最精确的。而且辅助线是我们在做设计的时候必不可少的。版式设计或者做界面文字的排版的时候就需要大量的辅助线,来保证字的间距,左对齐及居中对齐。

当你的屏幕上已经被辅助线充满的时候,按住快捷键control+R,就能把那些辅助线隐藏起来了。常用快捷键也是一个好习惯。下面说说Sketch里的网格的使用,快捷键control+G 显示/隐藏网格,这个网格在Sketch里是既可以基于画板显示,也可以全局整个画布显示如下图,先是最基本的全画布显示网格:

clip_image006

然后是基于单个画板的显示,如下图点选一下左上角画板名称,然后control+G如下图:

clip_image008

就基于画板显示网格了。当然View里面也有网格,如果你不习惯用快捷键的话,如下图:

­clip_image010

View—Carvas—Show Grid,这里面除了可以显示网格,还可以显示布局,标尺,和像素,你们可以一个个点开试一下。网格也是可以设置的,看见倒数第二了Gird Settings没?单击,如下图:

clip_image012

你可以设置每个网格的大小,间距和颜色。网格对于设计师们来说也是辅助做图的好帮手,希望大家好好利用起来。

在线课程地址http://study.163.com/course/courseMain.htm?courseId=1176001

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/7024/

(0)
iouedioued
上一篇 2015-07-12
下一篇 2015-07-13

相关推荐

  • UserFlows一款能在Sketch画板生成流程图的插件

    UserFlows是一款能在Sketch中从画板生成流程图的插件。 定义链接 要定义两个画板之间的链接 - 选择一个图层和目标画板,然后运行定义链接命令(Cmd Shift K)。 添加条件逻辑 通过插件创建和管理条件,轻松显示条件…

    2016-12-08
  • Sketch从入门到精通-Sketch3蒙版的使用

    蒙版,顾名思义就是蒙上一层东西,只显示你想显示的部分,类似PS里面的遮罩。在Sketch里面,你可以有选择去显示想要显示的内容,比如你可以打开一张正方形的图片,然后想做一个圆形的头像,那么就需要在这个正方形…

    2015-07-20
  • sketch 3.6.1(破解版涵盖3.0以上版本) 安装and使用指南(20160303更新)

     截至2015  6月23 日  SKetch 常用版本  3.2.2 、 3.3.1 、3.3.2    3.4.4 截至2016 3月2日  常用版本 3.5.1 ,3.5.2  ,3.6.0  3.6.1 Sketch 安装指南 安装版本 : 3.2.2  3.3.1  3.3.2 安装环境:mac book pro 20…

    2016-04-13
  • 字体的转曲-sketch从入门到精通

    字体在设计中是不可缺少的元素,无论你是设计海报,广告牌,网站,还是手机界面,都离不开字体。字体的运用也是设计中重要的组成部分。尤其是在做手机端界面设计的时候,一个像素都不能差。所以这就涉及到每个元素…

    2015-07-13
  • UE网出品:Sketch从入门到精通[免费精品课程] | 阿西UED&Smiler

    Sketch从入门到精通  讲师:阿西UED Smiler 参加时间:2015年6月24日 17:40 最后更新:2015年6月24日 17:40 适用人群: UI设计师、美工、视觉设计师、 对UI有兴趣的人。 简介 Sketch从入门到精通是由www.iamue.com …

    2015-06-25
  • 6个实用技巧提升Sketch使用效率

    Sketch 3 - Bohemian Coding带给我们的这款优秀的设计工具,在速度及灵活性等方面的表现都是其竞争对手难以匹敌的。 我(英文原文作者)自己是一名自由交互设计师,很早就开始使用Sketch了,它已然成为我设计工作流程…

    2015-09-30
  • Sketch从入门到精通-Sketch3 颜色填充

    颜色在做设计中是重要又必不缺少的组成部分,颜色有很多变化,丰富的颜色变化会给你的设计加分,Sketch里边,就对颜色有各种填充的效果,下面具体介绍一下,Sketch里边一共有六种填充效果,虽然你平常只用一两种,…

    2015-07-29
  • Mirror镜像的运用- Sketch从入门到精通

    Mirror镜像这个只针对于设计手机界面的同学来说,比较有用。因为这是一个可以电脑做图和手机显示同步的一个功能。在Sketch的工具栏,你会发现这个Mirror,如下图: 看见了么?怎么样能实现和手机同步呢?首先你要在…

    2015-07-13
  • Sketch从入门到精通-Sketch3 插件的运用

    插件往往是最提高工作效率的,用过Sketch的人,都被Sketch强大的插件所折服,因为真的是太好用了。而且,Sketch还有个专门整合了插件的一个下载器,叫Sketch Toolbox的Mac应用,下载和安装Sketch的利器。 直接在里…

    2015-08-28
  • Sketch3.9 终于发布了原生的响应式设计解决方案

    Sketch3.9 终于发布了原生的响应式设计解决方案。

    只需要设置一个属性,便可以快速实现任意尺寸的适配。

    2016-06-27