在这篇Photoshop教程中,将教给你如何制作一个带有反转效果的web2.0风格的简洁干净的按钮效果,学习网页美工的同学可以来学习一下.最终的效果
出自:苏打苏塔 设计量贩铺

最终的效果

点击下面的图片，察看demo(鼠标滑过按钮的时候，按钮的颜色变成蓝色)。



如果你想要下载本教程中的源文件，下面的链接包含了psd源文件，和最终的导出的png图片，以及html demo 和相关的css样式文件。请到论坛二楼下载。

让我们开始慢慢的讲解如何来制作这样的一个效果吧：

新建一个文档

1 按钮的尺寸是250px宽，50px 高。画布中要同时绘画按钮的原始状态(绿色按钮效果)和翻转状态(蓝色按钮鲜果)，所以画布的高度100px.



2 在画布的垂直方向的一半的位置，拖拽一条标尺线。如果你的画布中，没有标尺，可以按住 (Ctrl + R) 调出它来。直接从标尺中向画布中心拖拽，就可以拖拽出一条标尺线。



创建形状

3 点击圆角矩形，圆角值设为3px。