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

相关推荐

  • 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——进阶篇

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

    2016-01-06
  • sktch打造knob开关icon 附sketch破解下载!

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

    2015-12-23
  • 6个实用技巧提升Sketch使用效率

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

    2015-09-30
  • 最火的Sketch 的开发商 Bohemian Coding 是怎样一个公司?

    TL;DR: Bohemian Coding 是一个高效务实而且懂得做产品的小团队。但也因为团队小开发实力有限主打产品 Sketch 仍存在不少问题。先从这个小公司的历史说起。Bohemian Coding 在 2008 年成立,主要专注于开发 Mac 软…

    2015-06-29
  • Sketch汉化插件-SketchI18N最新版本

    安装使用 下载安装包,并解压,在安装包找到SketchI18N.sketchplugin 双击 SketchI18N.sketchplugin 完成安装 重启 Sketch 自动汉化后完成汉化 如果第三步没成功,试试 在 Sketch 中按快捷键 control command + x …

    2018-03-19
  • 如何使用Sketch3创建APP原型

    自从Fireworks逐渐衰落之后, 我一直在找其他好用的app和网站设计工具。后来我发现,只需用Sketch再加上其他一些简单的工具,就能构成一条非常不错的设计生产线。 在这篇文章中,我将谈谈我是如何利用Sketch搭配Flin…

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

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

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

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

    2015-07-13
  • 静电的SKETCH教室,全套教学视频免费分享下载。

    “静电的sketch设计教室”教学视频,对于新手自学来讲非常的合适,感谢静电,讲解的非常的清晰明了,视频就在这儿,剩下的就需要你付出时间去学习咯,祝大家学有所成!链接: https://pan.baidu.com/s/1iIbE-DI_yHLayj7wue49yQ 密码: mw25·—END—·

    2018-04-18