ps渐变 PS默认渐变色又土又丑，好看的渐变怎么做？

◎文章版权:荣360ued转载，请签名。

郭沫若说:“宇宙中没有什么东西是死的，只是因为有一种节奏(可以说是生命)流过它。”我说宇宙中没有东西是死的，因为有很多颜色装饰着我们面前的世界。“天之色”是流动的，这种流动的变化形成了无限的渐变秩序，而生活则是充满渐变色彩的世界。

iOS7之后，界面设计变得扁平化。平面设计兴起时，渐变是设计师最简单的方法之一，也是手机APP设计的常用设计技巧。

什么是渐变颜色

所谓渐变色，是指一个物体从亮到暗，或者从深到亮，或者从一种颜色到另一种颜色的颜色，充满了神秘和浪漫的色彩。

色彩可以给我们不同的感受和情绪，而渐变色彩可以给我们更多的想象力空。纯粹的渐变让色彩更加生动轻松，而不是单调，既能丰富整体设计感，又不增加视觉负担。渐变色彩的合理使用可以吸引用户的视觉焦点，渲染气氛，增强美感，传达情感。

知道了什么是渐变，我们来分析一下颜色的渐变现象和表现形式:

渐变现象

渐变现象有两种:色调渐变和明度渐变。

首先介绍一下色调渐变。牛顿通过菱形镜将太阳光折射成红、橙、黄、绿、蓝、紫光谱，获得全色调色环。渐变颜色形式的色调渐变是将颜色按照色调环的顺序排列组合而成。色调渐变就是简单的从一种颜色到另一种颜色的渐变或者多种颜色的渐变(如下图)。

其次，有两种明度。第一，同一个色调不同的明度，在同一个颜色中加入黑色或白色后，可以产生不同层次的明暗。第二，各种颜色的纯度不同，每种颜色都有相应的亮度。颜色亮度的变化也会影响纯度。(如下图)添加黑色时蓝色的亮度降低，添加白色时亮度增加。

渐变的表现

这里我们简单介绍一下渐变颜色有五种形式，线性渐变，径向渐变，角度渐变，对称渐变，菱角渐变。日常设计工作中经常用到线性渐变和径向渐变(如下图所示)。

在了解了渐变颜色的一些基本概念后，我们将分析使用渐变颜色过程中的几种常见表达方式:

首先，双色渐变

双色渐变是渐变设计的重要组成部分，是设计师最常用的创意手法之一。其渐变现象可以多种多样。渐变方向主要指从一种颜色到另一种颜色的渐变，如下图5所示，从A到B，有三种方式:水平渐变、垂直渐变、对角线渐变。

这项技术可以作为设计的主要视觉存在，也可以是许多特征之一。它的效果是独特的，可以使画面更加丰富生动，同时使画面更加统一，增强美感。下面我们欣赏双色渐变表现手法的案例设计作品。

第二，画面上的渐变叠加

在图片上叠加颜色已经流行了很长时间。这种渐变通常用在背景和照片中，可以让画面更加神秘、优雅、吸引人，让用户关注到上面更重要、更关键的元素。半透明叠加可以让画面更加细腻，同时也奠定了画面的主色调。这种设计对于大图特别有效，能给画面带来耳目一新的感觉。使用时要注意背景图像的选择，色调要与内容的含义相匹配。叠加后要加强页面信息的可读性，不能只为了修饰而修饰，否则呈现的结果会完全相反。下面，我们欣赏图片渐变叠加技术中的案例设计作品。

整个页面上很多地方都采用了渐变，包括图片底部为头部和双色水平渐变，中间卡片和下面的按钮中的车票信息都采用了双色水平渐变。

头部采用绿色双色水平渐变，整体页面控制使画面在绿色调下更加和谐，同时保持信息的可读性。

以上均采用卡片设计，每张卡片都给出了均匀的低透明度双色渐变，更好的增强了图片本身的氛围，让图片更神秘，更吸引用户。

第三，多级梯度叠加

Instagram放弃了复古相机风格的应用图标，引入了更简单的用户界面。这次修改的主要目的是让用户更加关注别人分享的内容。斯普拉特说:“我们认为彩色内容应该直接来自社区用户分享的照片和视频。我们剥离了界面中的颜色和噪点，用户的内容应该在中心。”无论设计是好是坏，你都不得不承认彩虹色让你一见钟情。还有，让我们重新认识到，在UI设计中正确使用渐变颜色，可以快速提高界面和图标的设计感。

Instagram图标主要由一组线性对角渐变和两组球形径向渐变组成。

顶部由第1层双色渐变和第2、3层单色低透明度渐变组成，使画面更柔和，层次感更强。

第四，色块渐变

渐变颜色不仅可以应用于一个颜色块，还可以应用于一组颜色块。设计师会用同色、相近色、近似色、对比色、补色来清晰区分每个菜单项，让界面在一个频率上达到平衡，让画面更加丰富多彩，更有节奏感和舒适感。

动词 （verb的缩写）网格梯度

AI网格工具绘制的成品不低于3D，是一种很好的矢量绘制方法。绘画技巧相对复杂和要求高，因此在平面设计作品中被广泛使用。网格配色的应用考验设计师的配色技巧，调整每个瞄准点使色彩过渡自然，也可以采用多层叠加的方法。

现实的技术需要耐心来进行微小的调整，并注意瞄准透明度的使用

渐变颜色的几种使用方法到此结束，还有更多的方法供大家探索。

安利时间

对于设计师来说，想要很好的使用渐变颜色，就需要有更好的色彩感，在配色和透明度上多下功夫。这里推荐下面两个网页，特别实用。他们可以在线调整渐变颜色的方向，在线生成css代码进行开发。

配色网站推荐一(webgradients)

http://webgradients.com

配色网站推荐ii (uigradients)

https://uigradients.com/#BradyBradyFunFun

到目前为止，我们已经花了很多时间讲解渐变颜色的定义和作用，渐变颜色的两种现象和两种表现形式，安利举例说明的渐变颜色的五种表现方式。因此，我们通过展望未来来结束对渐变颜色的讨论。

瑞士美学家伊顿认为“主观色彩兴趣不足以解决所有的色彩问题，客观规律知识对于正确评价和使用色彩是非常必要的”，这说明系统地了解色彩的知识体系是非常重要的。在当今互联网飞速发展的时代，渐变色彩在网络领域或物理成品中被人们充分使用和认可，但相反，人们对视觉效果的要求越来越高，人们的审美水平也在不断发展。在UI设计中，渐变多与投影和外部光照结合使用，以增强渐变的立体感。所以，渐变色彩虽然是设计领域常用的表现手段，但它有自己独特的表现方式，显示出自己独特的应用价值，但不要为了渐变而渐变。如果对功能和可读性有不好的影响，就会以作品的失败告终。所以渐变颜色并不代表你想往上走，即使你坚持往上走，也要注意方向。

-结束-

这个内容来源于互联网，版权归原作者所有，用于学习和交流。严禁商业用途。如有侵权，请联系我们删除。