当前位置:主页 > 网页教程 > 图片制作 > Photoshop教程 > 内容欢迎大家投稿

利用Photoshop样式制作网页按钮

时间:2011-08-15 11:29来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

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

正文:
以我的习惯,拿到一个东西会先把玩,然后拆解,最后重组,这样,才会让自己觉得摸透了这个东西。
对于按钮也一样。

第一步,认识按钮。按钮有三种状态,正常(normal),鼠标悬浮(hover),按下(active)。

第二步,拆解分析。先对悬浮时的状态分析吧。
       主要元素有:蓝色边框,浅色内发光,内部渐变,左右两侧的光泽。从大的开始:

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

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

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

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

       以上四种图层样式组合,就可以搞定这个按钮了。使用时很简单,拷贝图层样式,粘贴图层样式即可。
对于正常状态下的按钮样式,跟悬浮状态比较可以发现,少了色相,这个可以通过添加一个灰色的效果来实现,方法是增加一个混合模式为“饱和度”的灰色颜色叠加,然后再修改边框颜色,去掉光泽样式,再微调下内部的大渐变就可以了。
       按下时的状态,则是增加一个内阴影的样式,角度无所谓,把距离调为0就行,调节阴影大小而已。


第三步,重组。具体参数如下图:




个人平时喜欢用图层样式做些效果,PS的图层样式很强很暴力,还可以复制粘贴,用得好还可以提供效率,推荐PS爱好者多多研究 XD
 

(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接