按钮Photoshop教程可能是任何Photoshop教程网站中最热门的类别之一，并且由于Web 2.0现在是热门话题，因此让我们做一个适合于任何Web 2.0应用程序网站的简单按钮。 跳后教程。
创建一个大约500像素（宽）x 400像素（高）的空白画布，以开始按钮设计。 创建一个新的层调用“ bg01 ”。 选择圆角矩形工具 ，按住SHIFT键，然后在中心绘制一个圆形的正方形。 在当前阶段，任何颜色都可以。
调出“ bg01 ”的混合选项并调整以下样式：
落影
- 不透明度：40％
- 距离：0px
- 点差：0％
- 大小：6px
渐变叠加
- 色标：0％，＃d00031
- 色阶：100％，＃ff2b5d
按住CTRL键，然后在“ bg01 ”图层缩略图上单击鼠标左键以选择其形状。 进入选择 -> 修改 -> 合同，然后输入值“ 2px ”。 这会将所选区域缩小2个像素。
创建一个名为“ bg02 ”的新图层，并用任何颜色填充突出显示的区域（收缩后）。 我在这里用＃000000黑色。 双击“ bg02”以启动“ 混合选项”并调整以下样式。
渐变叠加
- 色标：0％，＃c6002f
- 色标：100％，＃c6002f
为文本创建另一个新层，将其称为“ txt ”。 插入按钮的文本。 我将使用字母来表示。 我在这里使用的字体样式如下：
- 圆形Arial大胆
- 150点
同样，在确定文本后，双击“ txt”以启动“ 混合选项”并调整以下样式。
落影
- 不透明度：25％
- 距离：0px
- 传播：0px
- 大小：5px
内心的阴影
- 不透明度：10％
- 距离：0px
- 扼流圈：0
- 大小：10px
斜面浮雕
- 深度：1px
- 方向：向下
- 大小：0px
- 软化：0px
- 高光模式不透明度：32％
- 阴影模式不透明度：32％
渐变叠加
- 色阶：0％＃d2d2d2
- 色阶：100％＃f0efef
按钮即将完成。 让它在顶部散发出些许光芒。 按住CTRL键 ，然后单击“ bg02 ”图层缩略图以突出显示外部形状； 选择Eclipse Marquee Tool 。 现在，按住ALT键 ，并选择“ Eclipse Marquee Tool”，将鼠标拖动到减去突出显示区域的下半部分。 请参考上图。
在顶部突出显示并且仍选择Eclipse Marquee Tool的情况下，右键单击并选择Feather ； 输入15px作为半径。
创建一个新层，将其称为“ glow ”，并用白色[#ffffff]填充突出显示的部分。 这应该在按钮的顶部增加发光效果。 最终产品应类似于下图。
额外的东西..
调整“ bg01 ”和“ bg02 ”的混合选项将为您提供更多有趣的按钮。 这是我之前做过的另一本有关按钮的Photoshop教程– 为Web 2.0创建光泽按钮
翻译自: https://www.hongkiat.com/blog/photoshop-create-web-20-button/