这是一篇Sketch使用教程，教大家用Sketch画出大自然中最美的渐变色，涉及操作的部分比较简单，主要是一些应用感悟。

1.大自然中的渐变色

大家对渐变色肯定不陌生，趋于成熟的香蕉、秋天泛黄的叶子、绚丽多彩的晚霞，这些从明到暗、从深到浅或者从一个色彩到另一个色彩过渡，充满浪漫气息的颜色，就是大自然中最为常见的美丽的渐变色。这种由渐变色衍生出来的美感，同样也被广泛应用在产品设计当中，这也是我们为什么看到漂亮的渐变色，都觉得毫无违和感的原因。

2.在产品设计中的应用

和纯色相比，渐变色显得更年轻、活泼和多变，经常被用在一些年轻化的品牌/产品身上，例如主打青年良品的魅蓝手机、更年轻有活力的手机淘宝，不仅如此，使用渐变色制作的logo，颜色风格也是独一无二的。渐变色在网页或者UI设计中，是极为流行的元素，甚至在一些严肃重要的发布会场合，都能看到它的身影，例如iPhone发布会御用的渐变色PPT。

3.用Sketch制作渐变按钮

了解渐变色的由来和应用后，我们就来看看如何使用Sketch生成想要的渐变色，这里以制作一个渐变色按钮制作为例进行讲解，色值参考手机淘宝。

第1步，使用矩形工具拉出一个300x60的矩形，并且设置圆角，即“Radius”的值为100。

第2步，取消描边，并点击填充“Fills”调出色板，并选中“Linear gradient（线性渐变）”，注意，这里一共有三种渐变效果，分别是线性渐变、径向渐变和环形渐变，三者的效果各不相同，我们这次只需要选择线性渐变即可。

第3步，拖动设置渐变色时出现的横条，将渐变的方向从垂直变成水平。

第4步，选中下图中滑条中的色块，分别设置色值为“#FF9000”、“FF5000”，就完成了一个从“#FF9000”到“FF5000”颜色渐变的按钮。

如果需要在中间加入更多的颜色渐变，则可以在横条中鼠标单击增加渐变点，分别对应色块设置渐变色即可，色块的位置可以滑动，也可以通过键盘数字1~9进行等分。

4.渐变色开发实现标注

我们制作渐变色，最终是为产品设计服务的，要开发实现我们想要的渐变效果，需要给予准确的标注，标注包括渐变色值的代码以及渐变的方向。

---

更多我的原创精彩的文章推荐（读完多点赞哦）

精品（过万阅读，700+赞）：干货：让你全方位学习成为一名交互设计师（1.6万字诚意之作）

交互设计系列：资源有限时怎么对待细节优化？

Sketch教程：Sketch进阶教程：这可能是Symbol最详细的使用说明书