时光博客 - WEB开发中的可用性和用户体验
Tag: button

用PS打造传统色彩按钮

btn.jpg

大小: 19.6 K
尺寸: 261 x 134
浏览: 308 次
点击打开新窗口浏览全图

由于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样式实现这种。