sketch文本、对齐和SVG – Sketch入门UI设计教程

这是本教程第1部分的延续(sketch画板和形状),在这一部分中,我们将介绍文本工具、对齐方式以及如何在Sketch中使用导入的矢量图形SVG。
文本和对齐现在,让我们打开Insert插入菜单并写一些文本!

sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
写入文本“Bananas”,选中文本后,查看屏幕右侧的检查器。字体大小为36,文字居中对齐,填充白色。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
可以看到,文本并没有相对于矩形居中,要解决这个问题,按住Shift键,同时选择矩形和文本。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
接下来,找到检查器顶部的对齐按钮,并选择我在下面列出的两个,它们是水平对齐和垂直对齐。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
现在让我们在页面的白色部分添加一些文本,写上“There’ s always money in the banana stand”。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
我用的是24号的Avenir,中间对齐,另外确保在对齐设置中水平对齐到画板的中心。
导入矢量让我们学习如何导入矢量文件并编辑它们,你可以下载其他的矢量图标进行操作。
下载并解压缩SVG文件之后,将其直接拖到sketch画板中。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
选择图标后,让我们在屏幕左侧的Layers菜单中做一点检查。这个SVG包含在名为“_59767_cc”的层组中。如果单击箭头展开它,你将看到三个名为Layer_1、Layer_2和Layer_3的子层,以及其他的一些文本层。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
这里通过点击delete来删除嵌入的不必要的文本层。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
现在是做一些侦探工作的时候了,总是这样做时,导入向量文件,以清理空和不必要的层。选择Layer_1和Layer_2后,注意这些层是空的,可以删除它们。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
如果展开Layer_3,你将看到图标的核心路径在这里。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
选择了这三层后,你可以更改填充或边框颜色。我把填充改为#90B8DC。注意:如果你选择了父组(“group”),Sketch将不允许你更改填充颜色。你必须在组中选择三个单独的层来编辑颜色!
现在你有了一只应该是浅蓝色的猴子,要调整大小,按住shift并将光标移动到形状的一角。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
按住shift,拖动图像的一角,直到它变大。按住shift键可以确保图像的比例与原始比例一致。
使用画板接下来我们要做的是改变画板的名字,现在改名为“Portrait – 5/5S/5C”,但我们想要更具体的东西,因为这将成为你导出的PNG文件的名称。如果你在图层窗口双击画板的名字,它会选择你想要的名字,这里输入了” Banana Stand” 。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
最后,我做了一些调整,把文字移到猴子下面。然后我使用在检查器的顶部对齐工具居中所有的东西。结果如下:
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
现在激动人心的部分开始了!我们可以很容易地复制整个画板。右键点击图层窗口中的画板,选择“Duplicate/复制”。或者使用快捷键?+ D的画板选择(提示: 这也适用于层)。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
sketch将创建另一个复制的画板,一定要记得更改每个屏幕的画板名称,因为这是Sketch在导出你的png时将使用这个名称。
共享样式和文本样式共享样式允许你一次更改多个层的样式。为了了解它是如何工作的,我们首先从任何画板中选择一个蓝色矩形。如果你看右边的检查器,你会看到一个下拉菜单,上面写着“没有共享样式(No Shared Style)”。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
【sketch文本、对齐和SVG – Sketch入门UI设计教程】点击这个下拉菜单,选择“创建新的共享样式”并命名它。我把这个命名为Top Rectangle
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
现在选择第二个画板中的另一个蓝色矩形,并应用“顶部矩形”样式。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
现在,这部分很重要:确保你只选择了一个矩形,而不是两个,编辑填充为#F5C923。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
你在这里所做的是改变一个形状与“顶部矩形”风格,这影响了两个矩形在你的项目。你还可以对文本样式执行此操作。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
选择其中一行黑色文本并创建一个新的文本样式。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
现在重复我们对矩形所做的。选择第二个画板上的文字,应用样式“Body Text”。现在我们可以看到更多的操作。只选择一个文本层,并将字体粗体…
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
这时两行文本都将变为粗体,即使只选择了其中一行。
你可能已经看到结果了。我们要做第三种风格的图标。要做到这一点,你必须选择层组中的三个单独的层,像这样:
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
点击“创建新的共享样式”,输入“Sock Monkey”。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
这一次,我们要做一些不同的事情。不要把这种风格应用到另一只猴子身上。首先,让我们把这个颜色改为黄色#F5C923。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
接下来,通过扩展层组并选择组成图标的三个层来选择另一个monkey。然后转到右边的检查器,选择图层样式下拉菜单,选择你刚刚创建的“Sock Monkey”样式。
sketch文本、对齐和SVG – Sketch入门UI设计教程

文章图片
如你所见,“袜子猴子”风格已经被应用,改变我们的图标从蓝色到黄色。

    推荐阅读