教程预览
步骤1:设置Photoshop文档
在Photoshop中创建一个新文档(在Mac OS中按Ctrl+N或Cmd+N)，画布大小为550x400px。如果它被锁定，解锁默认背景层，这样我们就可以用颜色填充它。下面是如何做到这一点:双击背景层，这将打开新图层对话框窗口。
只需按下OK按钮解锁背景层。然后，用浅灰色填充背景层(#ececec)。双击背景图层打开图层样式窗口。
在图层样式窗口中，给我们的背景图层一个渐变叠加图层效果，使用下图作为效果设置的指导。
渐变叠加
现在我们有了一个好的，互补的滑动条背景:
步骤2:创建滑动条
在这一步中，我们将创建滑动条，一个水平矩形，它将是我们的滑动条控件的“轨道”(我们将在后面创建)。首先，使用矩形工具(U)画一个矩形，如下图所示。
确保矩形工具设置为形状图层模式(你可以在顶部的选项栏中设置)。为颜色的形状，使用灰色(#dddddd) -你也可以设置颜色在选项栏显示你的形状。
双击矩形图层打开图层样式窗口。
我们将给矩形形状添加5个图层效果:投影，内阴影，外发光，斜面和浮雕，以及颜色叠加。下面是每个图层效果的设置。
阴影
内阴影
外发光
斜面和浮雕
颜色叠加
看看图层样式对我们的普通矩形形状做了什么:
现在我们将在刚刚创建的矩形中放置一个较小的矩形。
用矩形工具(U)在我们的大矩形内创建另一个矩形颜色，使用暗灰色(#8f8f8f)。
对于这个形状层，我们将应用4个图层效果:投影，内阴影，内发光，斜面和浮雕。
下面是每一个的设置。
阴影
内阴影
内发光
斜面和浮雕
现在看看我们完成的滑动条:
让我们把这两个形状图层放在一个图层组(我们可以命名为“滑动条”)中来组织它们。要将图层放在一个图层组中，只需在图层面板中选择两个图层，然后转到图层>组图层。
步骤3:创建滑块控件
让我们创建滑动块控件，这是你在与滑动块用户界面交互时向左或向右滑动的控件。切换到圆角矩形工具(U)。在“选项”栏中，设置半径2 px。
另外，设置颜色到我们用于背景的灰色(#ececec)。使用圆角矩形工具在我们的滑动条顶部的某处绘制一个正方形。
双击图层面板中的形状图层，再次显示图层样式窗口。
让我们给这个图层一个投影图层效果，让我们的滑动条控件看起来更好，它在滑动条的顶部。
阴影
下面是应用投影图层效果的滑动块控件:
复制图层，点击图层>复制图层。右键单击复制的图层，这将显示您应该选择的上下文菜单清除图层样式删除投影图层效果。
现在，双击复制图层打开图层样式窗口。对于这个图层，我们将应用4个图层效果:内阴影，斜面和浮雕，渐变叠加和描边。这些图层效果的设置如下所示。
内阴影
斜面和浮雕
渐变叠加
中风
下面是我们图层效果的结果:
切换到矩形工具(U)颜色仍然设置为#ececec。在我们的滑块控件中间绘制一个垂直矩形。
给垂直矩形图层5个图层效果:投影，内阴影，外发光，斜面和浮雕，渐变叠加(设置都在下面)。
阴影
内阴影
外发光
斜面和浮雕
渐变叠加
目前看起来不错，对吧?
把所有这些图层放在一个图层组中，你可以称之为“滑动控件”。
步骤4:添加电平指示器
我们快完成了!这是本教程的最后一步。在这一步中，我们将添加水平指示器，它只是位于滑动条的北部和南部的凹槽。
最后一次，使用矩形工具(U)画一条细垂线，如下图所示。
按Ctrl+Alt+T(或Cmd+Option+T对于Mac OS)复制形状。使用箭头键或鼠标向右移动副本。
重复这个过程，直到你有你想要的行数。
只给其中一条线设置4个图层效果:投影、内阴影、外发光和颜色叠加。
阴影
内阴影
外发光
颜色叠加
现在我们只需快速复制粘贴这个图层样式到其他行。
要做到这一点，首先右键单击你给图层样式的图层，然后选择复制图层样式在出现的上下文菜单中。然后选择所有其他图层，右键单击并选择粘贴图层样式．这将应用相同的图层效果到其他剩余的行。
这是我们现在的情况:
复制这些图层，并将复制的图层移动到滑条下面。
教程汇总
好了，我们完成了!我们可以很容易地创建新的滑块用户界面，只需复制第一个。
下面，我复制了我们创建的滑块UI，只是移动了滑块控件。我还用水平文字工具加了一个“- L -”和一个“- R -”标签(即它们代表“左通道”和“右通道”，就像你在旧的放大器上看到的那样)，图层样式和我用于电平指示器的图层样式是一样的。
非常感谢您阅读我的教程!我希望这对你有所帮助!
更多滑块用户界面资源
- 如果你想看到更多滑块Ui设计，可以看看Ui Parade的滑块库。
- Designmodo也有一个关于使用Photoshop创建UI滑块集的教程。
- Quora上有一个关于好的UI滑块示例(但你必须登录才能查看所有答案)。
下载教程源文件
- slider_ui_design_photoshop(0.01 MB)
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。
