渐变色怎么做教程（那些一看就很漂亮的渐变色调是如何做出来的）

渐变，是设计师最简单的手法之一，也是移动端APP背景设计常用的设计技巧。所以今天我来教大家如何巧妙运用渐变，迅速提升界面的格调。

我们都知道iOS7以后，界面设计已经趋于扁平化。实际界面设计中我们已经很少绘制写实图标。所以貌似现在的UI界面显得千篇一律。比较有经验的设计师会熟练运用插画设计还有动效设计，使自己的界面显得与众不同，然而这些技巧都是需要时间历练，短时间并不容易掌握这些知识。

有没有方法技巧简单实用，迅速提升界面的格调了？

图片来自于花瓣

不卖关子，给大家先上个图，这是用下面的方法调出来的部分渐变色，毫无抵抗力啊，当然还可以延展非常多。

打开Photoshop，拾色器默认情况都是下面这样的，也都习惯的在这个模式下去选择颜色，但今天会给大家介绍下其他模式的应用。

先简单介绍一下HSB,Lab,RGB,CMYK是什么功能，其实这是几种不同的色彩模式。

- HSB模式中：H表示色相，S表示饱和度，B表示亮度。

- RGB模式中：是指的三原色，R红色、G绿色、B蓝色

- Lab模式中：L表示亮度，a表示从红色至绿色范围的颜色分量，b表示从黄色至蓝色范围的颜色分量。

- CMYK模式中：C青色、M洋红（品红）、Y黄色、K黑色

很多刚接触Photoshop的这个软件的同学，如果打开拾色器是下图这样，拾色器中间的竖条不是默认的多色情况，多数会以为软件出问题了，然后搜索问题。

刚接触PS的我也是如此，但前几天的又一次鼠标意外，发现拖动滑块可以非常好的运用RGB模式去搭配颜色，尤其是临近色和纯色的的搭配（之前虽然知道类似的，但是这个能更直观的看到）下面举例红绿蓝颜色的搭配，当然还可以延伸出更多的色彩搭配，更多可以打开ps实践玩起来。

虽然得到了这些很棒的渐变色，可以帮助更好的进行选择，但是在选择的过程中依然要对饱和度、明度的细微调整才能使用。

除了用拾色器进行色彩的选择，还有其他的很多方法可以进行颜色的搭配，下面在列举一种纯懒人方法，我们经常会在电影中或者一些风景中看到非常棒的颜色搭配，我频繁使用的一个方法就是高斯模糊。

1、首先找到一张你满意的图片（网上搜的图，没有高清无码的，老司机自行脑补细节）这个方法不要求图片的大小，小图一样可以。

2、滤镜-模糊-高斯模糊，半径根据你选取的图片去调整。

3、模糊之后还是会显得画面发灰，那这个时候就需要你用曲线和色彩饱和度配合去调整，通常情况下发灰都是对比度不够，那就加对比，一个曲线解决不了，那就拉俩个。

4、最好一步，移动到合适的位置，也可以像我一样截取某一块进行拉伸，简单几步，你想要的颜色就出来了，初次用这个方法还可以用得到的图片加上图层混合模式去叠加在某张图片上， 也会有意外效果，熟练几次这个方法你一定会非常喜欢的，没事多多举一反三。

当然网络还有很多渐变色提取网站，也可以用用

快速提升设计格调几个方法技巧

一、垂直线性渐变

拉渐变是Photoshop的基础操作，那么如何运用的好看了？颜色选择才是关键

我们把一个渐变颜色拆分成A B C三个颜色，每个颜色用HSB标注颜色色值。

这是某App的一组引导画面，运用了三组渐变颜色，分别标注HSB的色值，通过这组色值的变化，分析如下。

A色 B值非常高，普遍50以上

从A色到B色，H值的变化范围为正负30到70，S值减少10，说明B颜色略变淡。

从B色到C色，H值的变化范围为正负30到40，S值增加15到50，说明C颜色开始变浓。

以上色值仅供参考，实际使用并非整数。根据以上规律去有规则的使用渐变色。

二、垂直线性渐变 球形渐变

Web界面面积比较大，在大面积使用渐变的时候。如果只是使用垂直的线性渐变是略显单调的，这个时候我们需要加一个球形的渐变。

A B C色构成一个渐变，这时候我们再补充一个D色的球形渐变并高斯模糊。D色的圆形矢量形状要转换为智能对象，这样调节高斯模糊及大小的时候可以无损调整。如果界面上需要运用图片，我们再补充一个80%透明度的E色，叠加在去色后的图片上。这样界面会层次会更加丰富。

三、多角度球形渐变

想让界面更加绚丽，这时候我们可以考虑多组球形渐变搭配使用。例如最新改版的instagram就是一组线性渐变，加两组球形渐变组成。球形渐变也是由多组颜色构成。

四、色块渐变

渐变的颜色不只可以运用在一个色块上，还可以运用在一组色块上。设计师运用一组近似性色彩，将每个菜单项清晰区分开，让界面平衡在一个频率上，这样的画面更有节奏感和舒适性。

如何选择色块的颜色了？一样运用HSB，逐级加H色值，H色值越大，S相应的色值也要逐渐变小。至于希望你的界面整体颜色跨度大还是小，取决你逐级H色值加的多少。

相信通过我的HSB调色分析，你可以熟练运用颜色创造各种高大上的渐变。

五：扁平化配色与渐变

渐变配色的回归正巧是在扁平化大行其道的今天，所以它不可避免地同大量扁平化的元素搭配到了一起，而其中最值得考虑的因素，就是色彩。某些用色最大胆、跨度范围最大的渐变色设计干脆直接就从扁平化配色中“借用”色彩。

六：双色调的加入

双色渐变是渐变设计中的很重要的组成部分。而双色渐变同其他设计趋势的结合效果拔群，这一点值得再三强调。

而双色调渐变的唯一缺点，大概是……被用的太多了。如果你稍加注意就会发现，确确实实有一大堆网站采用了双色渐变来作为背景或者主要视觉模块，似乎没有哪种双色搭配没人用过。蓝绿和橙红搭配是用的最多的。

谨慎使用这一趋势，因为确实很容易与别的网站“撞衫”。

七：渐变背景图

渐变的回归，使得我们再次可以看到许多拥有景深或者纵深的背景图。虚拟现实的流行让越来越多的设计师尝试更加现实、更加立体的网站设计，毫无疑问，你会在未来看到更多这样的设计。

扁平化设计确实时尚而更易于接受，但是它缺少富有现实质感的元素也是不争的试试。试想一下自然中元素给人的感受和体验。渐变色的使用很好地缓解了这个局面，毕竟自然界中很少有特别纯粹特别单一的色彩。

不难想象，渐变色和阴影背后的概念和规则是相通的。它们为设计创造了深度和层次。

八：图片上的渐变色叠加

作为一种设计趋势，在图片上叠加色彩已经流行了相当长的一段时间。而从图片上的单色色彩叠加，到渐变色的叠加，是一个相当自然的“推导”过程。

在页面的背景、头图中加入渐变的色彩叠加，可以让它们的整体感更强，从而让用户注意到其他的更加重要、关键的元素，强化页面的可读性。这种设计对于大图的作用尤其明显。

在图片上叠加渐变色的技巧在于平衡色彩和图片之间的关系。色调是否要同图片的含义相匹配？叠加后能否看清图片中的细节？不同的色彩搭配方式带来的结果可能是截然相反的。

九、微妙的渐变与UI元素

和渐变色的流行做法不同，有些设计师选择在UI元素中使用微妙的渐变色。在较小的UI元素中，色彩变化幅度更加微妙，并且通常使用的都是单色调。

欣赏案例

最后给大家看一下相关精彩案例，可临摹学习。

～此文转载，如有侵权，请联系删除

,