渐变颜色(渐变颜色代码)

微博黄v号购买 2022年09月03日 15:33 361 admin

渐变作为视觉设计师经常使用的手法之一，几乎每个设计师在页面中或多或少都会做一个渐变（绝不夸张。。。）大家都知道渐变是PS里的基本功能，而且十分简单，在渐变工具设置好不同颜色，一拉就出来了，这还需要研究吗？实际上,如何选用一个合适的渐变是设计师的基本功，也更是一门艺术。

一、效果渐变（强渐变）

这种渐变主要运用在一些需要展示效果的页面上，比如风格夸张迥异的专题设计和banner，炫酷的游戏界面、时尚的娱乐性软件等。这些页面需要在短时间内抓住用户眼球，吸引用户继续阅读。这种渐变饱和度高、跨度大，亮暗部色相可以不一致，塑造的质感比较厚重，往往营造的氛围十分强烈。

专题页

德州扑克游戏界面

banner图

展开全文

二、功能渐变（弱渐变）

主要运用在一些以功能为主的操作型页面，比如电商、邮箱、资讯、门户。这些页面需要用户视线停留较长时间，以阅读信息为主。所以应该去掉华丽的渐变，给用户创造出简单舒服的感觉，降低视觉噪音。

腾讯网门户导航：平直微弱的蓝色渐变加上边角处点缀的白色渐变，创造迷人的材质。

淘宝搜索框：微弱有效的渐变，可以区分和组织内容。

网易邮箱：明度跨度小，亮部和暗部色相保持一致，质感比较平实。

三、调色小TIPS：

Ps里的所有颜色是用HSB模式来控制的。HSB分别表示指色相、饱和度、明度。色相（H）表示什么颜色，比如红色；如果说这个红色比较淡，就是饱和度（S）比较低，如果说红色比较暗，那就是明度（B）比较低。效果渐变在色相、饱和度、明度都在变化，而且三个要素的变化幅度都很大。功能渐变则一般固定色相（H），饱和度（S）和明度（B）发生微小的变化。

知道这几个变化值以后，调整渐变颜色就可通过调数字来解决（不用再死盯着拾色器盲目选择颜色啦！！）比如你想做一个所谓”大气、简约、国际化”的功能型渐变，在选好色相（H）以后，固定饱和度（S）的值不变，通过调节不同的明度（B）就能够调出比较自然的渐变。在调这种微弱渐变时，常常渐变上会有色阶。因为每个人做渐变的方法都不一样，比如用图层效果来拉很微弱的渐变或者若干图层用不同混合模式叠加之后（大家不要眨眼，仔细盯着下图看…），这种渐变常常会有色阶，会显得不柔和。那么，有个小技巧这里跟大家分享一下~

（左图为使用图层效果的渐变，右图为直接使用渐变效果的结果）

就是先把这个渐变转化成智能对象，然后以此选择【滤镜】-【画笔描边】-【喷笔】，数值可以参考如下：

原理就是通过让色阶”抖动”变得模糊，让渐变过渡得更柔和。

四、几点心得体会：）

1、一个界面上不应该超过4种色彩体系的渐变，否则界面显得杂乱无章。所谓色彩体系，就是同一色相（H）下的不同颜色。如果想让页面尽可能的突出彩色，可以用灰色进行大面积调和，红、绿、蓝保留一点点足矣，下图的网站就是个好例子。

2、同一个界面上的渐变尽量保持明度跨度一致，比如A渐变明度跨度为+20，那么渐变B的明度跨度就不要+40。但是也不必死板，因为色彩是微妙感性的。比如下图三种颜色的渐变明度跨度都是20，但蓝色渐变就显得过渡小，绿色红色渐变显得过渡大。所以，不必太过于遵循数理逻辑，但严谨的色彩体系一定是要有系统有意识的控制颜色。

渐变颜色(渐变颜色代码)