Sketch3设计教程，教你做出优雅大气的渐变色背景

本文品索教育将为大家来介绍一个Sketch3设计教程，这个教程将会教导大家做出优雅大气的渐变色背景，大家可以一起来看看，相信一定能够让大家觉得惊艳，同时希望大家能够将之运用在实践中。

Step 1. 去饱和度

在 Sketch3 图层面板中选取你的影像之后，于右下角的控制面板内用力的把饱和度拉到0来让影像转成灰阶吧，这个步骤的原因其实非常单纯，就只是为了避免后期覆盖的颜色跟照片原本的颜色混合产生…意想不到的效果（当然，您时间很多的话也是可以不去饱和度慢慢的调整）。

去除饱和度后的影像应该要类似下图，一种看起来很厉害，充满大师级的黑白感受。

Step 2. 选择覆盖颜色

前面都讲了那么多该怎么做出好像很厉害的渐层了，这边当然要用渐层做范例啊！对于渐层该如何配色，欢迎伙伴们由上方链接去好好恶补一下喔。（下方渐层配色：#71E7F1 → #50F0B4）

Step 3. 调整透明度

选择好您的覆盖颜色之后，我们会利用调整透明度的方式让在底下的影像也可以显现出来。透明度的调整其实只要能达到您期待的效果就可以啰，不过我们还是简单说明一下小弟两种常用的调整方式吧：

1. 超级懒人法：选取渐层色块，直接调整透明度到约70% -80%（如果您选择的是类似色渐层，透明度调整到太低的话会几乎看不出渐层的效果喔）。

2. 分部调整法：针对渐层色两侧（甚至切割多部分）分别调整透明度（个人偏好这款，因为出来的成品看起来比较厉害）；简单来说，为了达到凸显一侧较清晰一侧淡出画面的效果，小弟会让一侧的透明度较高（90%），一侧的透明度较低（50% -70%）。

Step 4. 调整影像透明度/影像对比数值

在最后的最后，我通常还会再额外做两个步骤，分别是降低影像的透明度与调高影像的对比数值；这两个步骤都是为了让影像与画面的结合度更高，避免影像边缘过硬或是不自然的状况发生。（调高影像的对比数值会让影像的部分区域较突出，随着透明度的增加画面上面保留的对比高区域会保留下来）

Step 5. 实际运用

当您尝试在UI/海报或是其他设计排版使用到多张影像的时候，想必您也常常发现当影像之间彼此色调差异过大时往往会让画面产生一种相当杂乱或是无法聚焦的感受。藉由降低对比饱和，提升亮度来让影像在某个基准上面达到一个平衡，就是这个莫名其妙补充的目的啦。