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

 

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

在Sketch的右侧检查器里,就有四种节点模式,分别是: 直线角 (Straight);镜像 (Mirrored);不对称 (Asymmetric);断开连接 (Disconnected)。当你想要对一个图形的边缘线进行编辑的时候,回车或者双击两下,就会看见图形边缘多了四个节点,右侧检查器出现了四种节点模式,就是我们刚才说的那四种模式。接下来具体讲讲这四种节点模式。

clip_image002

1. 直线角 (Straight)模式: 按照字面上的理解,就是当你选中这个直线角的时候再去调节节点,会发现完全没有弧度,都是直的。

2. 镜像 (Mirrored): 选择镜像模式的时候,节点会以中心的节点两边还分别由各节点。

3. 不对称 (Asymmetric): 节点会以单独的一个节点进行变化,两个锚点到主点之间的距离是独立的,但他们依然相互对应。

4. 断开连接 (Disconnected): 节点之间是相互独立的,没有什么变化。

如下图: 下面我把那四个节点放大一点,以便可以看得很清楚。

clip_image004

看见最下面有个Corners了么?这个是可以调节圆角弧度的,在Sketch里面,你可以任意调节图形上的某一个点,改变他的圆角弧度,这样对于做图标的时候特别有用,比如想做一个弧度大一点的圆角矩形时,你不需要去刻意画一个,只要改变节点的圆角弧度就好了,是不是很方便呢?

Sketch里节点上的即路径是可以开关或闭合的,这对于删除某一节点特别有用。闭合路径是图形的起始节点和结束节点是相连的,开启或关闭的选项在Layer— Paths — Close Path里,已经关闭路径的话,就是Open Path。下面分别是开启路径和闭合路径的状态,如图:

clip_image006

图一是开启路径的状态

clip_image008

图二是闭合路径的状态

而且,在开放路径的状态下,你可以随时添加新的节点,来实现你想要的效果。

还有一个小得快捷功能是当你在绘制矢量图形时,你可以按住 shift 键然后再画之后的点,Sketch会自动帮你对齐到前一点的45度角方向,这在你绘制直线时会非常方便。如果你是在两点之间添加新的锚点时按住 shift 键,你便会得到两点间的锚点。如果你按住 command 键,单击两点间的线条,Sketch则会帮你在线条的正中间添加锚点。

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

(0)
iouedioued
上一篇 2015-07-20
下一篇 2015-07-20

相关推荐

  • sktch打造knob开关icon 附sketch破解下载!

    小编:今天带来的是由小乔分享的knob拟物小教程,对于想学习sketch小伙伴们或者已经在用的同学们 练习起来都是不错的选择,当然没有mac用photoshop也是可以能设计出来的哟,快来开动你们的脑筋和动手能力吧!(附sk…

    2015-12-23
  • Sketch从入门到精通 怎样切图及导出图片尺寸 免费版

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

    2015-07-03
  • sketch 插件 sketch-measure 更新,又大大的提高了工作效率 ~

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

    Sketch 2016-07-25
  • Sketch从入门到精通 第一章 初识Sketch 免费版

    第一章 初识Sketch 1. Sketch 是什么? Sketch 是一款非常适合UI界面设计师们使用的矢量绘图应用。集合了PS和AI的优点,很容易上手使用。它可以很方便的进行网页,图标及移动端界面的设计制作和切图。 2. 为什么要…

    2015-07-03
  • 搞定设计版本控制!一份超详细的 Sketch git 插件使用指南

    一份超详细的 Sketch git 插件使用指南

    2016-05-31
  • 在Sketch里怎么切图?

    有了Sketch之后,切图变得越来越简单,之前在Sketch教程里有写过切图方面的教程,但还是有很多人想知道到底怎么用Sketch切图,这篇教程就作为一个Sketch的切图大综合,详细的讲一讲怎样在Sketch里面切图,以及切图…

    2015-11-30
  • Sketch从入门到精通-Sketch3布尔运算

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

    2015-07-20
  • Sketch导出icon神器插件App Asset export教程

    废话不多说,直接开整: 1.首先可以直接在 Sketch Tool 中搜索"App Asset Export" 这个插件直接安装 或者到源码主页下载双击安装插件Github开源下载地址 使用方法 建一个1024x1024大小图层进行Icon设计 打开Plugins…

    2018-03-13
  • 从零开始学Sketch——进阶篇

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

    2016-01-06
  • Mirror镜像的运用- Sketch从入门到精通

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

    2015-07-13