用PS打造传统色彩按钮
Posted by Kevin | Filed under HTML/CSS/JS | 2009-03-27
由于liupeng最近做设计图时,需要用到比较传统的良好色彩的按钮(实在不愿意称其为所谓的WEB2.0),以前都是自己摸索的方法,无非是几个图层叠加的制作方法。维护起来比较麻烦而且缩放按钮的时候,整体色彩感不是很好。于是采用了一个图层方法。
1、打开ps新建一个图层
2、用圆角矩形拉出一个按钮,双击图层查看属性。下面是关键步骤。
3、选择渐变叠加,进行如下设置
a.混合模式:正常
b.渐变颜色:(0%位置:#94c516 )( 52%位置:#8eb92a #72aa00)(92%位置:#a8c732) (100%位置:#b9ce44)
c.样式:线性
d.角度90°(为了实现垂直的颜色渐变)
e.缩放100%
4、接下来是描边
a.大小:1像素
b.混合模式:正常
c.不透明100%
d.填充类型:颜色
e.颜色:#679800
5、内发光效果
a.结构:(混合模式:正常)(不透明度40%)(颜色#ffffff)
b.图素:(方法:柔和 杂色0%)(阻塞:0%大小:7像素)
c.品质:(范围50%)
原理就是利用渐变色的中间位置设置2个相近颜色实现实现颜色的视觉跳跃,模拟白色透明层。内发光让按钮看起来更有层次感。要实现上面的按钮效果,最重要的就是要处理好渐变色的颜色选择,一个色系的4种颜色深度。当然还有更简单的方法,就是用PS样式实现这种。



2009-03-27, 9:34 PM
很实用,谢谢了~
2009-03-30, 10:06 AM
一般我都偷懒了。
用样式解决了!
2009-03-31, 7:48 PM
我以前也用样式.现在不碰PS了..网上好多web2.0按钮样式.
不过还是要懂怎么做才行,样式不是万能的
2009-04-07, 4:09 PM
有时候做的麻烦,直接是用两种颜色弄下
感觉就差不多了
呵呵
2009-07-13, 4:47 PM
我讨厌Ps,我喜欢SEO~~