网络和辅助线的使用- 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

相关推荐

  • Sketch从入门到精通-Sketch3节点的模式运用

      在进行对图形的具体编辑的时候,会经常用到节点,或者叫点也可以。当你用钢笔画出一个图形的时候,然后回车一下,你就会发现有好多个节点组成了一条线,这个时候我们要对具体某个图形编辑的时候,就可以调节…

    2015-07-20
  • Sketch汉化插件: SketchI18N 一键汉化

    推广:五丰 美仑达 赣南脐橙 【国家地理标志产品】供港央企品质保障,原产地直采,进口专业分选设备,品质始终如一,脆嫩香甜,味美多汁 SketchI18N SketchI18N is multi-language plugin for Sketch.app Language …

    2017-03-16
  • Sketch从入门到精通-Sketch3布尔运算

      在Sketch里面,如果你发现一些基本的图形都不适合你,你想组合或者用更多的图形时,这时候就离不开布尔运算。当然,如果钢笔工具用的熟练的话,用钢笔工具也可以画出自己想要的复杂图形,但有些时候我们其实…

    2015-07-20
  • Sketch 3.6的更新

    Sketch 3.6 带来了许多新的更新,终于盼来了文本渲染和SVG的改进,以及性能增强和bug修复。 固定基准 之前不一致的基线导致在设计的时候出现了很多问题,新的版本中当改变一个文本图层的字体和字体大小时,该图层出…

    2016-03-08
  • 从零开始学Sketch——进阶篇

    从零开始学Sketch——进阶篇 Sketch是一款矢量绘图应用,而矢量绘图无疑是目前进行网页、图标以及界面设计的最好方式。 在初识了Sketch的界面布局和基础工具之后,我们就可以开始进入高阶的Sketch工具篇学习了。这篇…

    2016-01-06
  • 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
  • 从零开始学Sketch——入门篇

    如果你是一枚交互设计师或者UI设计师,那么你一定知道Sketch这个强大的矢量设计软件;如果你用过Photoshop,那么在你接触了Sketch之后就能了解到这款产品相对于PS的优点,说不定会跟我一样变成一个Sketch的死忠粉。…

    2016-01-06
  • sketch 插件 sketch-measure 更新,又大大的提高了工作效率 ~

    今天更新了一下sketch measure的插件,下面说一下都更新了哪些地方 1.新的UI界面 友好的ui界面使你标记起来更加便捷,新界面是不是看起来更加专业了许多,视觉上更加直观 2.输出出口 自动生成HTML的样式,而不仅仅…

    Sketch 2016-07-25
  • Sketch从入门到精通 怎样切图及导出图片尺寸 免费版

    怎样切图及导出图片尺寸 在讲这一章之前,先把上一章提到的布尔运算给大家讲一下(如下图) 这是顶部工具栏区域的一小部分。布尔运算有四种形式,你可以根据你的需求来选择不同的方式。 合并形状 (Union):合并的结果…

    2015-07-03
  • [译]使用Sketch的10个小技巧

    随着Sketch越来越受到广大设计师们的欢迎,在这分享10个Sketch使用小技巧,希望能够帮助到正在学习Sketch的同学提升相关技能。 1、学会“Insert”的快捷键 什么是你在设计中最常用的?创建一个新的Artboard A,插入文…

    2016-07-20