sketch使用渐变：线性和径向渐变 – Sketch入门UI设计教程

上一章我们介绍了sketch符号和导出画板的操作，这一章我们详细讨论sketch渐变的使用，及其相关的详细操作步骤。

渐变的趋势

从Asana的重新设计到Instagram story的滤镜，corange(珊瑚橙色渐变)完全融入其中。

在学习了素描的基础知识后，下一步是学习更多关于颜色填充选项，了解如何在Sketch 3中创建和修改渐变，以及在调色板中加载预置。

1、建立文档

在sketch中创建一个新的文件和画板。(快捷方式：只需按A)

拖动画板工具创建你想要的大小。

2、创建一个形状

插入>形状>矩形或键盘快捷键R（Insert > Shape > Rectangle）。

然后让新建的矩形填满整个画板。

有趣的事实：你不能设置一个渐变作为你的画板背景颜色，这就是为什么我创建了这个矩形。

3、编辑形状

选定新形状后，通过取消选中此框来禁用边框。

点击填充颜色，从最上面一排的图标中选择“线性渐变”（Linear Gradient）。

单击新面板中的任何颜色，它将首先更改最左边的颜色，用你选择的任何颜色替换默认的白色，这里选择# F3B1B1。

4、更改颜色

现在，让我们来仔细想想。

点击黑色的颜色滑块，以同样的方式编辑它。

现在，选择一个不同的阴影来编辑第二个渐变颜色，这里选择#E64E4E。

5、编辑方向和停止颜色

不要碰任何东西，把注意力转移到画板上。选择的层应该有两个点由一条垂直线连接。

现在，向上拖动底部的圆点。这改变了渐变颜色的终点。

你还可以把这个点向旁边拖动来改变方向，看到了吗?

通过单击线条的中心，你还可以创建另一个颜色停止。

在填充面板中，更改这个新颜色停止的颜色，这应该编辑你的渐变中心点，这里选择# FBB1B1。

如果你选择了错误的颜色停止，你可以选择一个不同的在填充面板或画板本身。

我们再做一个。通过点击填充面板，你也可以创建新的颜色停止。现在你应该有四个了!

6、删除停止颜色

在画板或填充面板上选择一个颜色停止。

按下键盘上的删除键，就是这样!

让我们删除除两种颜色以外的所有颜色，在进入下一个步骤之前，试试你的移动方向和改变颜色的技巧。

7、径向渐变

到目前为止，我们一直在研究线性渐变，你现在应该对这个面板很熟悉了。

要保存到目前为止的进度，请单击此面板底部的+按钮。这保存你的渐变设置，使他们可以很容易地应用到任何形状在你的文件。

如果你想任何时候你打开sketch让你的自定义渐变显示，简单地添加它作为一个全局渐变。

提示：要删除渐变样本，只需将其拖出面板即可。噗!

现在，创建一个径向渐变层，让我们复制rectange。选择图层后，点击编辑>复制（Edit > Duplicate）或者使用快捷方式cmd + D。

在填充面板，选择径向渐变模式，看到一个巨大的圆圈出现。

我们为线性渐变编辑的那条线变成了一个圆的半径。

让我们改变一下颜色，这样我们就能知道哪个是哪个层了。我选择了#FD6BC4作为最左边的颜色停止…

…最右边是#EDB3D7。

现在，让我们通过拖动alpha滑块到左边来试验不透明度。当你降低一个颜色的不透明度时，它会使颜色更透明。这与改变整个图层的不透明度是不同的，因为你的其他颜色仍然可以保持100%的不透明度。

你还可以将光标放在A框中，并使用向上和向下箭头进行微调。

好，回到画板。就像线性渐变，你可以拖动点来改变颜色停止的位置。

你可以单击并拖动圆的中心，将其放置在不同的位置。

最后，你可以点击并拖动圆周上的一个点来改变形状，在这里，我已经拖动和压缩成一个椭圆。

请注意，颜色停止仍然在运行，但过渡是四舍五入的，而不是线性的。

捯饬全部完成!

我们学习了如何操作线性和径向梯度，以及如何保存和修改梯度样本。希望这对你有帮助!