教程预览
步骤1:创建背景
打开Photoshop。创建一个新的Photoshop文档，画布大小为500x300px。
解锁默认的背景图层，首先在图层面板中双击它，打开新建图层对话框，然后在新建图层对话框中按确定。
接下来，给解锁的背景图层一个渐变背景，再次双击图层面板打开图层样式对话框窗口。
给图层添加一个渐变叠加图层效果的设置如下所示。
步骤2:创建按钮支架
单击工具面板中的圆角矩形工具(U)。在圆角矩形工具(位于Photoshop顶部)的选项栏中，确保形状图层选项，然后设置半径选项为3px，颜色选项为深灰色(#262427)。
用圆角矩形工具正确设置，绘制如下所示的深色矩形。
在图层面板中，双击“buttons holder”图层，打开图层样式对话框。
设这一层为a颜色叠加，内阴影和中风。下面是这些图层效果的设置。
颜色叠加
内阴影
中风
这是我们应用图层效果后的效果:
步骤3:创建按钮的基本形状
用缩放工具(Z)放大(例如，放大200%)。这将使我们更容易精确地工作。
设置圆角矩形工具，半径为3px，颜色为白色(#ffffff)。
然后画一个白色的正方形形状，这将是我们的按钮的基本形状。
在图层面板中，双击新创建的形状图层，打开图层样式对话框。我们将给这个形状添加如下的图层效果:内发光，渐变叠加和中风。使用下面的图片作为参考。
内发光
渐变叠加
中风
现在让我们来看看按钮的基础:
第四步:在中间添加一个圆圈
切换到椭圆工具(U)，然后在按钮底部的中间画一个白色的圆圈。
按住Alt + Shift (Mac用户:(选项+ Shift)，同时用椭圆工具来约束比例。
打开图层样式对话框窗口，给圆圈形状一个内阴影，渐变叠加,中风层的效果。这些图层效果的设置如下所示。
内阴影
渐变叠加
中风
以下是我们目前的进展预览:
创建一个新图层。切换到画笔工具(B)，选择一个软的，圆形的画笔，大小设置为15px。
在靠近圆圈底部的地方画一个白色(#ffffff)点，给按钮添加灯光效果。
按钮完成了。让我们来看一看:
在图层面板中，选择按钮底座，圆圈和灯光图层，然后将它们放到一个图层组中，命名为“按钮”。
步骤5:创建其他按钮
复制Button组两次，然后用移动工具移动重复的部分，如下图所示。
在最后一个按钮(最右边的那个)，使用椭圆工具(U)添加一个橙色的圆(#df7237)。
打开橙色圆圈图层的图层样式对话框窗口，给它一个内阴影层的效果。
在橙色圆圈(个人电脑用户:Ctrl + Shift + NMac用户:Command + Shift + N)。
切换到画笔工具(B)并设置它，使它有一个柔软的，圆形的画笔，大小为15px。在新图层上，在橙色圆圈的底部画一个小白点。
然后降低这一层的不透明度为70%。
现在让我们让最右边的按钮看起来像被按下了一样。
在图层面板中，双击最右边按钮的button base图层，打开图层样式对话框。给这个图层添加一个内阴影让这个按钮看起来像被按过一样。
就是这样!
教程汇总
我们创造了一套简单而美丽的用户界面按钮，灵感来自60年代的博朗产品。你可能会惊讶地发现，我们只使用了基本的Photoshop功能，如形状工具，画笔工具和图层样式。
我希望通过跟随本教程，您已经学到了一些新的和有用的东西。
感谢阅读!
下载源文件
- square_push_buttons_photoshop(zip, 0.02 mb)
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识并成长为个人。
