当前位置：首页 → 问答吧 → web2.0渐变量产方法研究放送

web2.0渐变量产方法研究放送

时间：2009-11-19

来源：互联网

一个下午我都在研究下载来的web2.0渐变，相信你和我一样都很喜欢这些减半。但是都是别人做好的。如何才能自己来做自己喜欢的颜色的渐变呢？

通过研究后我发现了一条规律。用这条规律我能做出很多颜色的漂亮渐变，不信你可以按照我的方法试试。

同时也请高手指正可行性。

首先大家来看看效果：

做法如下:
1.用矩形工具画一个长方形按钮。

2.添加样式-->渐变叠加-->改变左边滑块的颜色值（这个颜色你自己选，注意如果你选的颜色的H S B中的B的值大于84，则用于右边滑块）

3.改变右边滑块的颜色值（同样输入左边的那个颜色）-->别动，关键就在这步。将这个颜色的值的H S B属性中的B的值加上16！

4.添加样式-->描边色彩依然是渐变色的值。然后改变这个值的H S B 中的B的值减去8！

5.最后一步：添加样式-->内阴影-->白色-->混合模式为正常-->百分之七十五的透明度，90度，1像素距离，0像素大小。

这样就OK了。

看完了记得交作业。遇到问题请提出来探讨。

[ 本帖最后由 mobaihuo 于 2009-11-19 16:32 编辑 ]

作者: mobaihuo 发布时间: 2009-11-19

感谢分享，交作业啦

附件

11.jpg (2.93 KB)

2009-11-19 16:46

作者: huileiforever 发布时间: 2009-11-19

谢谢分享。试了下。渐变颜色搭配是挺舒服。

附件

02.jpg (16.04 KB)

2009-11-20 11:37

作者: xenia 发布时间: 2009-11-20

还不错

附件

1.JPG (37.33 KB)

2009-11-20 14:25

作者: shang83211 发布时间: 2009-11-20

恩几位做的都挺不错

作者: mobaihuo 发布时间: 2009-11-20

交作业：试了一下确实如此，谢谢。

作者: kkxxzq 发布时间: 2009-11-22

交个作业

附件

未标题-1.jpg (8.15 KB)

2009-11-23 09:58

作者: lixiaoqingde 发布时间: 2009-11-23

7楼的渐变也反了。。。

作者: mobaihuo 发布时间: 2009-11-23

WEB2.0只是个样式，取色和配色才是更重要的。
样式是死的，颜色是活的，不管Style如何，颜色搭配好了，一样很精彩

楼主的颜色看的就很舒服，楼下的就很刺眼，反差很大呵呵

作者: angele20000 发布时间: 2009-11-23

这个方法不错

作者: 20108847 发布时间: 2009-11-23

嘿嘿，惭愧，我是太粗心了

作者: lixiaoqingde 发布时间: 2009-11-23

貌似效果不太好

作者: clkuny 发布时间: 2009-11-23

貌似你做的计较好

作者: clkuny 发布时间: 2009-11-23

谢谢楼主的教程等下交作业比较笨只能用渐变库做的

[ 本帖最后由 xin266 于 2009-11-23 16:47 编辑 ]

附件

未标题-1.gif (1.88 KB)

2009-11-23 16:47

作者: xin266 发布时间: 2009-11-23

不错，谢谢楼主，又学一招

作者: klzw8 发布时间: 2009-11-23

下班了
交个作业

附件

QQ截图未命名.png (1.58 KB)

2009-12-2 17:41

作者: dummy12px 发布时间: 2009-12-02

引用:

原帖由 xenia 于 2009-11-20 11:37 发表
谢谢分享。试了下。渐变颜色搭配是挺舒服。

有毛点点的背景是怎么做出来的啊？

作者: dummy12px 发布时间: 2009-12-02

谢谢！！终于知道这种按钮是怎么做出来的了学习了！！

作者: qinxu234 发布时间: 2009-12-07

强悍！这规律都能发现！#！#！！！

作者: jxwinter1986 发布时间: 2009-12-08

ｌｚ你真的是太有才了

作者: lba8610 发布时间: 2009-12-09

交作业啦

附件

未标题-1.jpg (59.76 KB)

2009-12-9 15:37

作者: ypn1920 发布时间: 2009-12-09

交作业!谢谢楼主！

附件

web2.jpg (47.52 KB)

2009-12-17 12:40

作者: guohongyuan2151 发布时间: 2009-12-17

22楼做的很对了加油

作者: mobaihuo 发布时间: 2009-12-17

这个方法蛮好，以前用好几个图层做的，如果一个界面多个按钮都不方便，这个方法直接拷贝图层样式就可以了。

作者: lijuan1230 发布时间: 2009-12-23

感谢lz 的独家秘诀分享~~~
学习受用了~~

作者: yudian010 发布时间: 2009-12-23

说到点子上了

作者: mobaihuo 发布时间: 2009-12-23

交作业了，呵呵！

附件

未标题-1_03.jpg (7.88 KB)

2009-12-23 14:18

作者: huangtianxinwu 发布时间: 2009-12-23

还有谢谢楼主了，以前看到很多这样的不会做，今天终于会了！

作者: huangtianxinwu 发布时间: 2009-12-23

不客气。你做得很好。加油。

作者: mobaihuo 发布时间: 2009-12-23

呵呵

附件

QQ截图未命名.png (936 Bytes)

2009-12-24 17:16

作者: 120798587 发布时间: 2009-12-24

做得非常nice！

作者: mobaihuo 发布时间: 2009-12-25

交作业喽.
老师,我的作品及格不?
给评个分呀.

附件

Mindo作品-web2.0渐变.jpg (34.13 KB)

2009-12-25 23:10

作者: Mindo 发布时间: 2009-12-25

做得很好哦。
颜色很好。就是内阴影的设置不对。

正确设置得出的白色线条是1px，那样更好看些。加油。

作者: mobaihuo 发布时间: 2009-12-26

学习了感谢分享

作者: uk51 发布时间: 2009-12-27

谢谢楼主啊

作者: aseer 发布时间: 2009-12-28

楼主看我做的正确不？

附件

02.jpg (10.34 KB)

2010-1-3 19:59

作者: midejingdian 发布时间: 2010-01-03

刚才的好模糊啊。描边的那个值是要小于84的那个值减去8吗？

附件

02.jpg (14.25 KB)

2010-1-3 20:12

作者: midejingdian 发布时间: 2010-01-03

37楼的作业第一个和第二个做得很好

作者: mobaihuo 发布时间: 2010-01-04

没事凑个热闹我也做了做呵呵

附件

名.jpg (18.2 KB)

2010-1-4 11:14

作者: cainiao9527 发布时间: 2010-01-04

谢谢楼主评价。呵呵。

作者: midejingdian 发布时间: 2010-01-06

不错不错，我也来交个作业

附件

ex.jpg (32.52 KB)

2010-1-10 10:52

作者: Maximys 发布时间: 2010-01-10

lz这个规律还挺实用的，作标准化的东西有帮助。

附件

web2.0.jpg (13 KB)

2010-1-10 15:27

作者: 14862961 发布时间: 2010-01-10

交作业了，可以适当调整内阴影的不透明度。

很实用的方法，谢谢楼主分享。
还有一个问题请教楼主，你那个颜色是什么研究出来的，注意如果你选的颜色的H S B中的B的值大于84，则用于右边滑块
还有加16 减8这个是有根据还是？
色彩方面挺模糊的，看别人配的好好看，自己一配怎么看都不啥舒服。在此请教一下楼主。

作者: wengmendou 发布时间: 2010-01-10

交作业