作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Wojciech Dobry
验证专家 在设计

Wojciech是一位拥有8年经验的产品设计师和网页设计师.

以前在

亚马逊
分享

每个设计师都知道有许多不同的工具可以帮助你处理排版. 不用说, adobeindesign等应用程序, Scribus, Photoshop可能会是你的工具箱. 仍然, 尽管你可能听说过草图, 你可能忽略了它作为一个单纯的网页设计工具,而不是在处理字体时使用.

事情并不一定要这样. 实际上,草图可以成为创建令人难以置信的排版作品的最佳工具之一. The secret is simple; you need to know some savvy tips 和 tricks to help you along the way.

在本文中, 我们将讨论一些快速简单的方法,您可以解决草图在排版方面的小缺点. 这实际上是我们的第三篇文章 素描技巧 & 技巧 系列. 如果你想看看其他的,在这里快速浏览一下: 草图中的嵌套符号, 使用表情符号来管理草图文件.

排版在素描教程

草图排版

如果您已经了解CSS,那么您应该熟悉草图的基本排版功能. 这包括从选择字体到文本转换再到设置参数的所有内容, 例如字符间距和行高.

草图和排版指南

然而,草图的一些不太为人所知的功能并不是那么明显. 这就是知道一些额外的技巧会有很大帮助的地方. 事实上, 一旦你学会了, 你可以把草图变成更符合In设计的字体工具. 以下是你需要知道的:

OpenType特性:

许多字体都带有可选择的字符集,用于实现更易读性或风格目的, 比如不同的字体粗细. 正如你已经知道的,在Photoshop中,你只需要按一个按钮就可以打开它们. 与此同时,在草图中,这并不那么容易.

如果你想查看整个字体范围,你需要做一件额外的事情. 只要去 Menu 草图> View> Show Fonts点击齿轮图标,然后是排版. 之后,您将可以访问其他类型特性,例如 绑扎 以及其他字符集. 简单的!

在草图中使用字符和排版

路径上的文本:

如今,我们很少在网页设计中看到文字写在路径上. 尽管如此,它仍然是印刷甚至标志设计中相当常见的风格. 使用草图在路径上创建文本非常简单. 简单地用钢笔工具绘制路径,然后在该路径附近键入文本. 完成后,您应该从 草图 menu > Text> Text on path. 等好了!

草图排版和字体

字距和基线:

如果你是Photoshop的用户, 您可以从字符或段落面板访问几乎所有的排版功能. 在草图中,您会发现相同的功能,只是它们被隐藏起来了. 幸运的是,只要你知道怎么做,你可以很容易地找到它们. 如果你想打开更多的样式选项,如字距, 结扎, 和基线, 你只需要去 草图 Menu > Text. 就是这么简单!

草图中的字距排版

招聘美国全职自由UI设计师

草图中的样式

样式就是我们在使用草图时所说的排版预设. 更重要的是, 您可以通过位于右侧工具栏类型参数上方的样式下拉菜单轻松创建它们. 在使用此工具时,创建自己的样式是相当常见的做法. 然而,并不是每个人都知道他们的风格可以像符号一样被编目. (阅读更多关于这个过程在我的 前一篇文章 在这里.)

要创建具有排版样式的文件夹,命名步骤如下: Folder_name / style_name甚至folder1 / folder2 / folder3 / style_name. 看看下面这个例子,你就能明白我的意思了:

草图中的排版样式和字体

在这个例子中,我将我的样式分组到 合同 文件夹,然后为不同大小的文本创建另一个文件夹,为不同的颜色创建另一个文件夹. 所以样式的命名看起来像这样:*合同 / h1 / dark *.

聘请Toptal这方面的专家.
现在雇佣
Wojciech Dobry

Wojciech Dobry

验证专家 在设计

克拉科夫,波兰

2016年11月17日成为会员

作者简介

Wojciech是一位拥有8年经验的产品设计师和网页设计师.

作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

以前在

亚马逊

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 隐私政策.

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 隐私政策.

Toptal设计师

加入总冠军® 社区.