究极解读：渐变技巧大揭密
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
究极解读：渐变技巧大揭密
chenxin： 渐变在我们生活中随处可见，是一种很普遍的视觉现象。这种现象运用在视觉设计中能产生强烈的透视感和空间感，是一种有顺序、有节奏的变化。
渐变作为视觉设计师经常使用的手法之一，几乎每个设计师在页面中或多或少都会做一个渐变（绝不夸张。。。）大家都知道渐变是PS里的基本功能，而且 十分简单，在渐变工具设置好不同颜色，一拉就出来了，这还需要研究吗？实际上,如何选用一个合适的渐变是设计师的基本功，也更是一门艺术。
渐变幅度在设计中非常重要。渐变的幅度太大，速度太快，就容易失去渐变所特有的规律性效果，给人以不连贯和视觉上的跃动感。反之，如果渐变的幅度太 小，会产生重复之感，但慢的渐变在设计中会显示出细致的效果。所以，就有人把渐变分成强渐变和弱渐变。从功能角度上，也有人分为效果渐变和功能渐变两类， 个人觉得，到底哪一种分类更准确无可厚非，其目的还是希望设计师能够了解各种渐变的特点、使用场合以及制作技巧等等。
一、效果渐变（强渐变）
这种渐变主要运用在一些需要展示效果的页面上，比如风格夸张迥异的专题设计和banner，炫酷的游戏界面、时尚的娱乐性软件等。这些页面需要在短 时间内抓住用户眼球，吸引用户继续阅读。这种渐变饱和度高、跨度大，亮暗部色相可以不一致，塑造的质感比较厚重，往往营造的氛围十分强烈。
德州扑克游戏界面
二、功能渐变（弱渐变）
主要运用在一些以功能为主的操作型页面，比如电商、邮箱、资讯、门户。这些页面需要用户视线停留较长时间，以阅读信息为主。所以应该去掉华丽的渐变，给用户创造出简单舒服的感觉，降低视觉噪音。
腾讯网门户导航：平直微弱的蓝色渐变加上边角处点缀的白色渐变，创造迷人的材质。
淘宝搜索框：微弱有效的渐变，可以区分和组织内容。
网易邮箱：明度跨度小，亮部和暗部色相保持一致，质感比较平实。
三、调色小TIPS：
Ps里的所有颜色是用HSB模式来控制的。HSB分别表示指色相、饱和度、明度。色相（H）表示什么颜色，比如红色；如果说这个红色比较淡，就是饱 和度（S）比较低，如果说红色比较暗，那就是明度（B）比较低。效果渐变在色相、饱和度、明度都在变化，而且三个要素的变化幅度都很大。功能渐变则一般固 定色相（H），饱和度（S）和明度（B）发生微小的变化。
知道这几个变化值以后，调整渐变颜色就可通过调数字来解决（不用再死盯着拾色器盲目选择颜色啦！！）比如你想做一个所谓”大气、简约、国际化”的功 能型渐变，在选好色相（H）以后，固定饱和度（S）的值不变，通过调节不同的明度（B）就能够调出比较自然的渐变。在调这种微弱渐变时，常常渐变上会有色 阶。因为每个人做渐变的方法都不一样，比如用图层效果来拉很微弱的渐变或者若干图层用不同混合模式叠加之后（大家不要眨眼，仔细盯着下图看…），这种渐变 常常会有色阶，会显得不柔和。那么，有个小技巧这里跟大家分享一下~
（左图为使用图层效果的渐变，右图为直接使用渐变效果的结果）
就是先把这个渐变转化成智能对象，然后以此选择【滤镜】-【画笔描边】-【喷笔】，数值可以参考如下：
原理就是通过让色阶”抖动”变得模糊，让渐变过渡得更柔和。
四、几点心得体会：）
一个界面上不应该超过4种色彩体系的渐变，否则界面显得杂乱无章。所谓色彩体系，就是同一色相（H）下的不同颜色。如果想让页面尽可能的突出彩色，可以用灰色进行大面积调和，红、绿、蓝保留一点点足矣，下图的网站就是个好例子。
同一个界面上的渐变尽量保持明度跨度一致，比如A渐变明度跨度为+20，那么渐变B的明度跨度就不要+40。但是也不必死板，因为色彩是微妙感性的。比如 下图三种颜色的渐变明度跨度都是20，但蓝色渐变就显得过渡小，绿色红色渐变显得过渡大。所以，不必太过于遵循数理逻辑，但严谨的色彩体系一定是要有系统 有意识的控制颜色。
我们常说要用”高级灰！高级灰！”灰色的渐变其实很难把控，用的好则会使你的界面更有档次，更统一高雅，用的不好则会让界面显得脏而灰，无闪光 亮点。下图灰色的径向渐变有很好的视线聚焦效果。为了打破大面积灰色带来的沉闷，在hover状态下的展示效果变成彩色，这种交互效果其实可以用在很多图 片展示上。
渐变应该与整个界面气质保持一致，如果整个页面走平实路线，那么就要统一到底，不要突然无厘头的冒出一种玻璃质感。如果整个页面走小清新风格，就不要突然来一笔浓墨重彩的质感渐变。
利用渐变创造深度和立体感。我们要学会控制好渐变的位置。在 ps中线性渐变或径向渐变为页面创造了独特的气氛，比如蓝色渐变模拟蓝天、海洋等。比如下图用渐变营造的晚霞效果。
最后，我们作图时，可以用图层样式做渐变叠加，这样可以保证渐变的可编辑性。
写在最后：
Windows 8的Metro风格向我们证实界面设计可以抛弃渐变，但是当我们处于一片密集的色块挤压中，是否又会想念那些温柔的渐变，滋润你的双眼呢？Last but not least，好的形式需要依附好的功能，渐变仅仅是视觉表现的一种手段，为什么使用渐变，在何处使用渐变才是我们思考的重心~
原文地址：
作者：chenxin
================微信推荐================
想在手机上、被窝里获取网页设计教程、无线端设计和各种意想不到的资源”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
我们的团队
大家在关注photoshop径向渐变工具在哪？
photoshop径向渐变工具在哪？
09-03-13 &
仔细看完这个ps渐变工具视频教程，其中包括径向渐变工具!
请登录后再发表评论!
在那个画笔下的第二个图标中，你要先选择工具栏的渐变工具（G），点击它之后，在文件下面的那一排中第二个就是径向渐变了
请登录后再发表评论!当前位置： >
> ps渐变出现的色阶问题如何处理？
ps渐变出现的色阶问题如何处理？
说起色阶问题，相信大家在使用ps拉出渐变的时候都会出现&色带&问题，那么要如何解决呢？往下看...
接下来让我们学习两个简单的步骤解决色带为我们带来的麻烦把。 在ps中，由黑到白有255个层级，也就是当你拉出一个黑白的径向渐变，是由255个圈环组成的，其他颜色也是一样的。&
那么现在就让我们切入正题吧。
下面是一个灰色的渐变，由于白色没有到255.黑色也没有到0，所以这个渐变可能只有100个圈环，当然这只是可能哟~
1.首先我们打开滤镜-画笔描边-喷溅。 先将平滑度直接调成1，再调喷色半径。当然这一步我们使用 添加杂色也是i可以实现的，但是相较于这个还是这个方法比较简单。
确定以后我们会看到以下的效果：
2.细心一点你会观察到其实这个平滑效果是存在噪点的，现在就是解决躁点。当然主要使用到的还是高斯模糊了。当然高斯模糊的数值千万别太大了，否则一切都白做了啊。
这个教程里面使用的是灰色，其他颜色也是适用的，大家不妨可以试试。
阅读本文后您有什么感想?
版权声明：本站部分Photoshop教程是由网络收集，然后整理编辑而成，版权归原作者所有，如果由此而造成的侵权，请与我们联系，审核属实后立即删除，谢谢！ 本站刊载的资料仅为提供更多信息，不代表同意其说法，也不构成任何建议。意见联系：QQ:
本站的最终解释权归 PS之家 所有 如果有问题请联系我们。canvas径向渐变详解
（仅支持单关键字）
canvas径向渐变详解
〖 作者：-nothing- 〗〖 发布日期： 〗
创建径向渐变步骤如下：
1，创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1)，其中x0,y0,r0分别为起始圆的位置坐标和半径，x1,y1,r1为终止圆的坐标和半径。
&&2，设置渐变颜色 addColorStop(position,color)，position为从0.0~1.0之间的值，表示渐变的相对位置；color是一个有效的css颜色值。
&&3，设置画笔颜色为该径向渐变对象。
&&4，画图。
&var c = document.getElementById('mycanvas').getContext('2d');
&var radial = c.createRadialGradient(100,100,20,120,120,50);
&radial.addColorStop(0,'#EE84AA');
&radial.addColorStop(0.9,'#FF0188');
// 颜色值 #FF0188 == rgba(255,1,136,1)
&radial.addColorStop(1,'rgba(255,1,136,0)');
&c.fillStyle =
&c.fillRect(0,0,500,500);
　　效果图如下，这个立体的球形。
&&这个简单的步骤中需要设置至少3个位置坐标和半径，各种坐标和半径组合会出现奇怪的形状，什么时候会出现奇怪的形状，怎么设置会出现我们想要的圆形呢？看下面试验。
求解1：创建对象时，两个圆的关系。
在以上基础上，如果把创建对象代码改为：
radial = c.createRadialGradient(80,80,20,120,120,50);
//左边效果图
radial = c.createRadialGradient(100,100,20,130,130,50);
// 右边效果图
效果图，和圆形差的太远了，倒是可以做箭头效果。。。
这个形状怎么来的? 这时让我想起一张twitter logo的图片，大概是这样。所以，辅助线走起来~
代码恢复至正常球形效果，并添加辅助线后，代码如下：
&var c = document.getElementById('mycanvas').getContext('2d');
&var radial = c.createRadialGradient(100,100,20,120,120,50);
&radial.addColorStop(0,'#EE84AA');
&radial.addColorStop(0.9,'#FF0188');
&radial.addColorStop(1,'rgba(255,1,136,0)');
&c.fillStyle =
&c.fillRect(0,0,500,500);
&//以下是添加的辅助线
&c.arc(100,100,20,0,2*Math.PI);
&c.moveTo(170,120);
&c.arc(120,120,50,0,2*Math.PI);
&c.stroke();
　效果图：
从效果图可以看到起始圆完全在结束圆的包裹内。
改变起始圆和其对应辅助线的位置，代码如下：
&var radial = c.createRadialGradient(80,80,20,120,120,50);
&radial.addColorStop(0,'#EE84AA');
&radial.addColorStop(0.9,'#FF0188');
&radial.addColorStop(1,'rgba(255,1,136,0)');
&c.fillStyle =
&c.fillRect(0,0,500,500);
&//以下是添加的辅助线
&c.arc(80,80,20,0,2*Math.PI);
&c.moveTo(170,120);
&c.arc(120,120,50,0,2*Math.PI);
&c.stroke();
　效果图：
在正常圆球基础上，改变结束圆和其对应辅助线位置
var radial = c.createRadialGradient(100,100,20,130,130,50);
&&radial.addColorStop(0,'#EE84AA');
&&radial.addColorStop(0.9,'#FF0188');
&&radial.addColorStop(1,'rgba(255,1,136,0)');
&&c.fillStyle =
&&c.fillRect(0,0,500,500);
&//以下是添加的辅助线
&c.arc(100,100,20,0,2*Math.PI);
&c.moveTo(180,130);
&c.arc(130,130,50,0,2*Math.PI);
&c.stroke();
　效果图：
现在再来看那些形状就没有那么奇怪了吧。
为了使效果更加明显，在举个栗子：
&var radial = c.createRadialGradient(70,70,20,130,130,50);
&radial.addColorStop(0,'#EE84AA');
&radial.addColorStop(0.9,'#FF0188');
&radial.addColorStop(1,'rgba(255,1,136,0)');
&c.fillStyle =
&c.fillRect(0,0,500,500);
&//以下是添加的辅助线
&c.arc(70,70,20,0,2*Math.PI);
&c.moveTo(180,130);
&c.arc(130,130,50,0,2*Math.PI);
&&c.stroke();
　效果图，so cute~
还有起始圆半径大于结束圆半径的情况，不再一一举例。
根据上面效果可知，如果起始圆不在结束圆内，被渲染部分为两个圆外切线和结束圆围成的锥形。
若要成为圆形，需保证起始圆在结束圆内部。
另外，根据html规范知：
1， r0或r1为负数，会报错。
2，若x0=x1, y0=y1, r0=r1，会跳过改步骤，不进行绘制。
求解二：渐变关系与绘制的图形的关系
以上的问题被避免了，但是绘图出现了这些形状：
前两个问题比较明显，是被截断的。如果告诉你第三个也是被截断的，你会不会相信~
第三个的确是被截断的，被圆形截断的！
为什么会被截断，就要说一下绘制图形是的注意事项了~
解第一题过程中为了避免这个问题的干扰，设置了大大的着色区域c.fillRect(0,0,500,500);
在正常圆球的基础上，使绘制区域减小c.fillRect(0,0,500,150)，便出现第一种情况。
使宽度和高度均小于圆球区域c.fillRect(0,0,300,150)，便出现第二种情况。
若绘制形状为圆形，当圆球在绘制范围内，则显示为正常球形，类似于题一中正常情况。
若圆球只有部分只绘制范围内，便会出现上图3的情况，如下代码：
&var radial = c.createRadialGradient(100,100,20,120,120,50);
&radial.addColorStop(0,'#EE84AA');
&radial.addColorStop(0.9,'#FF0188');
&radial.addColorStop(1,'rgba(255,1,136,0)');
&c.fillStyle =
&c.arc(80,100,60,0,2*Math.PI);
&c.fill();
&//以下是添加的辅助线
&c.moveTo(170,120);
&c.arc(120,120,50,0,2*Math.PI);
&c.stroke();
　辅助线效果图：
上面较大的圆为绘制区域，下面小点的是径向渐变圆。着色区域是两个圆相交的部分。
综上述，使用canvasGradient画一个正常的圆球效果，应遵循以下几点：
1. createRadialGradient()方法中，起始圆半径小于结束圆半径。
2.起始圆完全在终止圆的范围内
3.终止圆在绘制区域内
来源：/-nothing-/p/5039537.html
JavaScript探索者
Copyright@