字体的转曲-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从入门到精通-Sketch3 颜色填充

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

    2015-07-29
  • 在Sketch里怎么切图?

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

    2015-11-30
  • 如何使用Sketch3创建APP原型

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

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

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

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

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

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

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

    2015-07-03
  • Sketch从入门到精通-Sketch3 神奇的测量键

    在做设计的时候经常离不开精准的测量,间距,字体的大小。尤其是在做移动端UI设计的时候,设计完的界面效果图还要输出标注规范给工程师们让他们去实现,这就离不开精准的测量。 在Sketch里面,有个神奇的测量键,你…

    2015-08-28
  • [译]使用Sketch的10个小技巧

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

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

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

    2017-03-16
  • Sketch从入门到精通-Sketch3四种模糊方式

    现在经常能看到界面上各种模糊效果,或者是背景模糊,然后上面排字,放图片;通常是做背景的时候用到的模糊效果。在Sketch里面就有基本的四种模糊方式,分别介绍一下。 首先是最常见的高斯模糊(Gaussian Blur),…

    2015-08-03