Photoshop绘制质感的立体按钮的处理教程

　　前言：做网页效果图时经常遇到要做按钮，为了让效果更逼真，让老板更直观看到结果，肯定不会放过按钮这个细节。当然，如果要自定义更让人有点击欲望的按钮，那就直接用背景图吧。这里仅讨论不加修饰，系统默认状态下的按钮效果。

　　正文：

　　以我的习惯，拿到一个东西会先把玩，然后拆解，最后重组，这样，才会让自己觉得摸透了这个东西。

　　对于按钮也一样。

　　第一步，认识按钮。按钮有三种状态，正常（normal），鼠标悬浮（hover），按下（active）。

　　第二步，拆解分析。先对悬浮时的状态分析吧。

　　主要元素有：蓝色边框，浅色内发光，内部渐变，左右两侧的光泽。从大的开始：

　　①内部渐变，主要是两种颜色，解决方案有两种，一种是变化不大的渐变，加上柔光模式的内阴影，但其缺点是，内阴影的覆盖度是固定的，按钮高度变化时不会跟着变化。另一种方案是两种主色的渐变，中间交界可以保持在高度50%的'位置，也就是中间位置。

　　②蓝色边框，这个简单，一个内描边解决掉。

　　③浅色内发光，直接使用内发光，降低扩散度的方法是把阻塞的滑块往右拉。

　　④光泽，角度为0的光泽样式就可以了。

　　以上四种图层样式组合，就可以搞定这个按钮了。使用时很简单，拷贝图层样式，粘贴图层样式即可。

　　对于正常状态下的按钮样式，跟悬浮状态比较可以发现，少了色相，这个可以通过添加一个灰色的效果来实现，方法是增加一个混合模式为“饱和度”的灰色颜色叠加，然后再修改边框颜色，去掉光泽样式，再微调下内部的大渐变就可以了。

　　按下时的状态，则是增加一个内阴影的样式，角度无所谓，把距离调为0就行，调节阴影大小而已。

　　第三步，重组。

【Photoshop绘制质感的立体按钮的处理教程】相关文章：