文本

Sketch使用操作系统原生的字体渲染模式,因此字体显示看起来很不错。使用原生字体渲染的好处就是当你进行网页设计时,你可确定设计稿中的字体效果和真实网页中效果一致。Sketch 同时支持文本样式,所以可以让多个文本图层使用共同的字体、大小、和字间距等。

添加文本

你可以从工具栏中选择文本(Text)工具。当光标变成文本输入样式时,在画布中任何区域点击以添加文本图层。你会看见新的文本图层已被选定,直接开始打字吧。

你也可以点击并拖拽鼠标以创造一个固定尺寸的文本框,当文本内容大于文本框时,会自动向下扩展文本框高度。而普通的不固定尺寸的文本框则会增加宽度以适应文本内容。

调整文本大小

当你直接拖拽文本框,文本框内文字本身的大小并不会相应改变,但你可拉动文本框底部的缩放手柄来一起控制文本框和文字大小。

bottom-resize@2x.png

文本检查器

当选中一段文本,你会发现属性检查器随之变成了编辑文本所需的属性。

在基本的图层属性下面是共享样式区域。

紧接着是选择字体和字重,点击齿轮按钮(Options),可选择一些列表样式和文字修饰样式,比如下划线和删除线。再往下区域可选择字间距、分别可以调整字间距(Kerning)、行间距和段落间距(段间距以是否输入回车来区分)。

text-options@2x.png

文本颜色

编辑文本时,你可以通过字号和齿轮中间的颜色按钮为文本设置单独的颜色。

你也可为文本图层应用一个通用的填充式样,例如渐变,但任何填充都将针对整个文本图层,这将覆盖之前对文本的颜色设置。

值得注意的是,要在文本上渲染渐变效果,必须先将文本转化为矢量图形。

自动和固定大小文本框

文本框的宽度属性(位于对齐选项的下面)可设置为自动或固定。自动大小文本框意味着它会自动扩展以容纳你输入的一切文本。固定大小文本框则会在你输入更多内容时保持现有宽度不变,而增加文本框的高度。

flexible-width@2x.png

行高

Sketch 在调整行高时,总会保持一致的基线对齐方式。如果修改了字体或字号,这个文本图层会改变自身的位置,但是基线的位置是不会变动的。

只要文本图层有固定行高,一致的基线位置边缘同样会保持一致,不管你是否更换字体。这种方式会产生良好的排版效果。当不设定固定的行高时,Sketch 会使用字体默认的行高。

fixed-baseline.gif

当创建一个新的文本图层时,它会使用自动行高而非之前设置的数值。文本图层的自动行高和设定相同数值的自动行高是有区别的,属性检查器中默认使用自动行高数值作为占位。


共享样式

你会经常想将多个文本设置为同一样式,共享样式能实现这一点,它们会将你分散在不同图层中的文本都保持同步。

值得注意的是,文本样式只能在单独的文档中共享,同个文档中的不同页面不同画板都能够共用。

创建样式

想要创建新的文本样式,你需要先选中一个文本框,然后执行菜单命令 图层(Layer)> 创建共享样式(Create Shared Style),此时你会发现属性检查器立即显示出了当前图层的文本样式,你也可以在这里给样式重命名。

new-style@2x.png

如果文本属性发生任何改变,都会自动与其它使用同一样式的文本保持同步。

新的文本图层

你可和通常一样的添加方式添加第二个文本图层,然后在属性检查器中给这个文本使用之前创建好的样式。另一个直接添加特定样式文本图层的方法是,执行菜单命令(Insert)> 样式文本(Styled Text),然后选择你想要的样式,接下来的步骤和添加普通的文本图层一样的了。

insert-style@2x.png值得注意的是:在 Sketch 2 中就已经有了文本共享样式的功能,在 Sketch 3 中又进一步升级了。最大的变化就是,现在渐变填充、阴影和内阴影都能包含在文本样式当中了。



文本路径

Sketch 支持文本渲染路径,例如下面的例子:

只需两块内容来实现这个效果:一个矢量图形和一个文本图层。执行菜单命令文本(Type)> 文本路径(Text on Path),Sketch 就会将文本图层贴合的放在它下一层的矢量图形上面。值得注意的是,两者的顺序必须是矢量图形在文本图层的下面,才可得到这样的效果。

text-on-path@2x.png放置文本图层时你只需将文本横向拖至矢量图形,这点很难用文字表述,但你可以在创作中非常直观的看到它们如何实现。


转化为轮廓

文本可以被转换成矢量图形,执行菜单命令文本(Type)> 转换为轮廓(Covert Text to Outlines)来实现。这会将文本中的每个字母都转成图形,你可向编辑任何其它图形一样单独编辑每一个路径和节点。

警告

但是,请额外留心这个操作。不要将很长一段文字都转化为矢量图形,这会大大降低文档的运行速度。

将一小段文字转化为大量包含布尔运算的子路径是非常消耗系统内存的,如果不得不转换一段文字,那么你可以先将一段文字尽可能分成多个短文本,再转化为矢量图形。

不过现在可直接在文本上运用渐变等效果,大多数时候都不需要将文本转化为轮廓。


图片

Sketch 不是一个位图编辑器,所以位图编辑功能比较有限。但 Sketch 3 改进了这一点,现在能更好的处理文档中的位图。

值得注意的是,你可将任何图层转换成一个扁平的位图,执行菜单命令图层(Layer)> 将选区变成位图(Flatten Selection to Bitmap)。


位图编辑

Sketch 的位图编辑已有很大的提升,现在也有一个得体的 UI 界面来专门呈现它。

editing@2x.png

选中一个位图,双击它进入编辑模式,你会看见属性检查器里出现了一组特殊的工具,但你需要先在位图上设立一个选区,然后再使用编辑工具。

・选区(Selection):在位图上选择一个矩形区域。

・魔棒(Magic Wand):点击位图上任一点开始拖拽以选择一个区域,拖拽的范围越大,容差就会越大。

值得注意的是,你可按 shift  键来同时添加多个选区,或按 option  键从已有选区中取差集。一旦确立好选区,你可以剪切 / 复制选区来创建一个新的位图,或用以下 4 种工具再来编辑。

・反选(Invert):当前未被选中的区域会被选中,反之亦然。

・裁切(Crop):减去选区之外的区域,只保留选中部分。

・填色(Fill):为选区填充特定颜色。会出现拾色器供你选择颜色。

・矢量化(Vectorize):将选区转变为的形状图层,与魔棒工具结合能发挥强大功能。

当你要结束对位图的编辑,只需点击位图外任一点,或按 return / esc 键即可退出编辑模式。


色彩调整

如果想微调一张现有位图的色彩,可使用属性检查器中的色彩调整面板来实现,在这,你可调整位图的色相、饱和度、亮度和对比度。

color-adjust@2x.png 

需要注意的是,此项调节不会破坏原图,你随后可再次更改这些数值。


 

亲!小编正在上传资源中,请稍等。

文章来源:UI酷设计

关注UI酷设计公众号

领取100+交互体验pdf电子书