零基础也能学！一份全面系统的渐变色自学指南

　　配出上图这样的渐层其实非常容易，除了前面所提到的一些小技巧之外只要注意两个基本原则就可以啰，对于浅色系的渐层，如同浅色系渐层范例，明度的调整区间不宜太大(1/10)。在检色器上面我们可以改变彩度，色相来配出喜爱的渐层变化，但是上下移动的幅度就要保守一点，否则配出来的渐层就很容易产生脏脏的视觉效果。

　　△ 浅色系渐层范例

　　至于暗色系的渐层，明度的变化就可以大一点，但记得除非渐层一开始的选色就是相当深的暗色系，否则调整的幅度也请尽可能确保在明度的变化在1/4–1/5的区间来避免过脏或是颜色落差过大的问题。

　　△ 暗色系渐层范例

　　补上一个类似色搭配图形(透明度)变化的范例，蓝绿，绿色渐层的使用相当的普遍，当这类型颜色的明度及彩度较高时往往可以带给使用者一种活泼明亮的视觉印象。

　　高明度色系渐层

　　上面几组渐层的搭配彩度较高，现在我们来看一下该如何处理明度较高的渐层配色模式。基础的高明度渐层处理起来相对容易，确保选择的颜色都保持在检色器的上方1/5内，同时不要让彩度变化过大都可以情松达到如下图的效果。

　　莫名其妙好像写了一堆东西，我们利用一个范例来练习一下这些渐层的变化，这个范例是由设计师Adrian Fernandez运用渐层做出来的瀑布效果。

　　Step1.首先，我们将工作区块分割成三个区块，运用类似色选择相近的颜色填满色块，这边选择的蓝 → 蓝绿色跟作者使用的相同，练习时建议尝试不同的颜色。搭配白色透明度色块就可以快速的做出简单的渐层以及三维效果，注意喔，这边还没有使用到任何的渐层。

　　Step2.分别在三个区块中运用上浅下深的概念由上往下来做出渐层，拉出画面的层次感。

　　Step3.使用不同宽度的矩形(颜色选择高明度低彩度的蓝 → 蓝绿色，搭配透明度50%-100%不等的透明度)模拟出瀑布的水流。

　　Step4.为瀑度水流加上透明度渐层(<除了明度彩度的变化之外再加上透明度的调整)，让画面整体更具质感。

　　Step5. 作者实际的成品在这，有兴趣的朋友建议自行临摹完成练习，对于渐层的运用肯定会更加的得心应手。当然，从作者的成品当中可以发现离Step4还有不少的细节需要调整，因为渐层中颜色细微的变化，以及每个设计者对颜色的喜好，敏锐程度，即便是临摹的作品常常做到最后也会发现感觉完全不一样呢。

　　对比色渐层

　　什么是对比色?

　　在色相环当中，相对成180度，也就是直线两端的颜色，即为对比色〈又称为补色〉。基本上制作渐层的原则都是相当类似的，但是在运用对比色搭配渐层使用时，有几个小技巧是我会特别注意的：

　　对比选色的彩度差异不要太大。

　　在选色上不一定要拘泥于刚刚好180度，基本上160–200度这个区间都可以达到相当不错的效果。

　　建议画面的配置上一个做为主色一个作为副色。

　　请根据类似色渐层章节中的概念来制作渐层。

　　对比色渐层范例

　　相信大家应该也发现近年来渐层在接口设计/简报上面的运用其实都相当的普遍，像是我相当喜爱的一位泰国设计师Tintins跟美国的设计工作室Awesomed在作品中都使用了相当多的渐层元素。除此之外，我们也可以发现渐层常常可以莫名其妙地带出一些好像很厉害的感觉，有一种把光影融入设计里面的Feel。对于初学者而言，利用渐层做出干净易用的接口是相对难的，日后会多拿一些工作上的使用与经验和大家分享。底下几组是我利用上面提到的各种技巧拉出来的对比色渐层界面：

　　下一篇会跟大家聊聊金属渐层该如何使用，有时间会再谈谈放射状的渐层可以产生怎么样的视觉效果啰。

（编辑：网站开发网_马鞍山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!