字体的转曲-sketch从入门到精通

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

在Sketch里会出现一种情况,就是打字的时候,字体的边框有的会直接和文字自适应,有的字体边框会高出很多,这样就会造成当你想知道第一行字和第二行字的间距是多少时,就会容易造成误差。因为当你按住ALL键时,出现间距间的距离是多少,但它都是以元素的边框来开使计算的。这样当字体的边框高的时候,计算间距就会有问题了,因为我们是要按照字体最近的底端开始计算到下面另一个元素的顶端间距值的。我放个图,可以看下:

clip_image002

 

我把字体选中时的边框用红框圈了起来,你会发现上面的字体边框距离字体的间距就不一样。上面字体的选中边框离字体本身的底部还要多出很多,下面的可能看起来还好,偏差不大。这是什么原因造成的呢,假如我想快速知道上面的字体和下面的字体间距是多少,怎么办呢?这就需要用到字体的转曲功能。鼠标移到字体处右键,如下图:

clip_image004

我们选最后一个Convert to Outlines 字体转曲,看看字体有什么变化:

clip_image006

边框是按最贴近字体的边缘出现的。而不是像之前那样间距那么大。这样的化就

不会影响间距的大小了。再来看看左边图层区域字体的变化,如下图:

clip_image008每个字体都被转曲了,分好图层了已经,这样一来,也就方便对字体进行再设计和编辑了。好像AI里面的字体路径一样。但是需要注意的是,字体转曲以后,就不能改字体的大小数值了,这样就需要你在字体转曲前,要定好字体的大小颜色,然后再进行转曲,如果做的时候发现字体想更改,那么最好原来的字体大小值和颜色值要记住,希望Sketch以后的版本里能把这个字体转曲再优化一下,要是可以转曲完也能想没转曲时可以自定义的话,那真的就是完美了。字体的转曲就先说这么多,大家可以试一下,随便在画板上打一些字,试着转曲字体,对字体任意变形,重新设计一下,你会发现很有趣。

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

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

(0)
iouedioued
上一篇 2015-07-13 09:29
下一篇 2015-07-13

相关推荐

  • 使用 Sketch 搭建动态布局

    如果你在设计交互,你可能会经常遇到一些重复性的元素,比如列表中的行,或者网格化元素。尽管Sketch提供了一些方法,通过使用Symbols将一些样式应用到元素中,但如果你想让布局更有适应性或者动态变化,它恐怕就很…

    2017-12-28
  • Sketch从入门到精通-Sketch3 复制旋转功能的运用

    复制旋转功能是一个算是很特别很好玩的一个功能,当你需要对一个图形重复旋转的时候,如果手动调一定会有偏差,这个时候就需要复制旋转功能来实现,在菜单栏中进入图层 — 路径 ­­— 复制旋转 (Layer > Paths >…

    2015-08-03
  • Sketch 3.6的更新

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

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

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

    2016-05-31
  • 6个实用技巧提升Sketch使用效率

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

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

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

    2018-04-18
  • Sketch从入门到精通 怎样切图及导出图片尺寸 免费版

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

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

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

    2015-07-13
  • 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
  • UserFlows一款能在Sketch画板生成流程图的插件

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

    2016-12-08