[交互设计]Sketch小技巧大讲堂 第一期

Posted 2021-04-26 马克笔设计留学

Sketch是MAC上一款可以代替PS、AI等软件进行适量绘图的软件，对于交互设计而言大量应用于界面绘制，非常的方便，可以有效的提升非设计部分的工作效率，如果你目前正在学习交互设计，那么Sketch是一个非常适合你上手使用的软件。

马克笔设计留学专注于设计专业留学作品集辅导和留学申请服务，我们将不定期带来有关Sketch的小技巧，希望同学们能够更熟练的去使用这款软件。

---

1.如何将文字图层转换成向量图

在Sketch中很好用的功能「Covert to Outline」，这个功能通常我们会用在两个情境：

• 将文字转成向量图

• 将图层框线（Border）转换成填满（Fill）

这个功能在哪里？

Covert to Outline功能属于图层相关的功能，所以我们可以在菜单Layer中找到它，如果你忘记藏在哪里，你可以使用系统帮助菜单找到它。

除了功能菜单以外，你也可以在自定义工具栏中找到它，名称为「Outline」，现在把它拖曳至Sketch的工具栏。

1.将文字转成向量图

有时候我们会使用某些字体样式作为基础，调整细节来制作为标题、强调文字，在Sketch中我们可以透过Covert to Outline来达到这个目的，如下：

---

2.将图层框线（Border）转换成填满（Fill）

将外框转换为填满图层功能我们再制作小图标时也非常的常用，例如我们想要制作一个空心且外框宽度为20px的圆形图标，可以这样做：

---

2.自定义Sketch图层的预设样式

在设计界面的时候我们常常有这样的体验，在画面拖曳一个图层，取消外框、修改背景色、修改圆角、修改….等，Sketch预设拖曳出来的图层样式往往不是我们想要的。今天我们要介绍Sketch提供的一个非常方便的功能Set Style as Default。

顾名思义Set Style as Default能够让我们自己设定Sketch中图层的预设样式，譬如说我个人非常喜欢Open Sans这个字体，然后颜色是#333030，然后通常会使用16px字体大小，然后行距是…，然后段距是…，如果这样的设定超级常用的，这时候我就会使用Set Style as Default将他设定成预设文字图层样式，如下动画说明。

首先将要成为未来预设样式的图层拖曳并设定好想要的样式

接着点击菜单上的Edit > Set Style as Default选项

试着新增更多空白的图层

你可以随时根据项目的需求，重新定这些预设选项。很多Sketch老手会透过其他更有效率的方式来处理这样的问题，例如共享样式、共享元件等等。

---

3.键盘0 - 9的妙用

在设计界面，我们时常会透过透明度的调整制作出深浅、渐层、模糊等效果，在细节调整的时候，我们常常都需要尝试着这种透明值的效果，以前我会在Opacity上输入我想要的数值，不断修改来达到这个目的。

某次点击数字键0-9意外发现更快速设定透明度的方法

我时常拿这个功能来取得某个颜色在浅10%-90%的颜色色码，或者快速把一群透明的图层透明度还原（点击0）。

---

4.更快速设定图片背景的方式

可以使用⌘+ V粘贴的方式来设定背景，方法十分容易！

首先点选任意图片右键，接着选择复制图片（在某些软件中你可以直接提取图片然后⌘+ C）接着赶仅回到Sketch开启图层的Fill菜单，鼠标左键点击Fill菜单预览外框（也就是那个正方形外框），接着使用键盘⌘+ V粘贴！

这个小技巧除了可以搭配很多不同的软件使用以外，我们还可以在Sketch内部使用，把已经设定过的图片背景复制给其他图层（注：复制整个图层样式有时候也能达到这样的需求，但是你会一起把外框线、阴影也都复制），让我们来看看怎么使用！