如何用Photoshop制作旋钮/Dial UI

教程预览

步骤1:设置Photoshop文档

启动Photoshop。点击File > new开始创建一个新文档。在新建对话框中，将背景内容选项设置为白色。

按OK按钮创建新的Photoshop文档。

步骤2:创建基本形状

单击工具面板中的椭圆工具(U)。

在选项栏(位于Photoshop的顶部)，确保你使用的是形状图层设置颜色选项为灰色(#9f9f9f)。

用椭圆工具画一个灰色圆圈，按住Alt + Shift (Mac用户:选择+ Shift)，以确保您创建一个完美的圆。

在图层面板中，双击圆形图层打开图层样式对话框。将描边图层效果应用于灰色圆圈，填充类型设置为梯度。使用下面的图片来指导你。

复制形状图层。

双击复制的图层打开图层样式对话框。

修改描边图层效果设置，使填充类型设置为颜色。你可以使用下面的图片作为参考。

步骤3:在圆上创建线条

使用缩放工具(Z)放大(例如，放大到300%)。这将使我们能够更精确地工作。

点击工具面板中的直线工具(U)。

在直线工具的选项栏中，设置粗细为1px，颜色为黑色(#000000)。画一条垂直的黑线，如下图所示。

按Ctrl + Alt + T (Mac用户:(Command + Option + T)在同一层复制第一行。

按Alt (Mac用户:按住“选项”键可将垂直黑线的中心点重新定位到灰色圆圈的中间。

这将允许我们根据圆的中心点而不是直线的中心点旋转直线。

旋转形状5^o点击编辑>变换路径>旋转，然后在选项栏中为旋转选项输入5。

重复变换和复制，直到圆圈被线条填满。

使用图层样式对话框窗口给线条图层一个渐变叠加图层效果。

步骤4:制作旋钮的顶部

在这一步中，我们将创建旋钮的顶部。

使用椭圆工具(U)画一个圆，如下图所示(使用任何你想要的颜色)。

在图层面板中双击新建的形状图层，打开图层样式对话框。我们将给这个圆一个投影图层效果和描边图层效果，并修改其填充不透明度。

阴影

中风

你可以通过混合选项部分设置填充不透明度为0%。

通过设置不透明度为0%，圆圈的填充颜色将是透明的，但图层效果(投影和描边)将保持不变。

复制圆圈。在图层面板中，右键单击复制的图层，然后选择清除图层样式在出现的菜单中。

打开复制图层的图层样式对话框窗口，然后应用以下图层效果:内阴影，颜色叠加和描边。使用下面的图片作为每个图层效果设置的参考。

内阴影

颜色叠加

中风

现在让我们看看我们的旋钮。

看起来很现实，对吧?

第五步:最后一笔

这是本教程的最后一步，它是可选的。在这一步中，我们将在旋钮的左边添加三角形标记/指示器。

点击钢笔工具(P)，确保形状图层在选项栏中选中，然后绘制如下图所示的矩形。颜色:橙色(#ed5700)。

就是这样!

教程汇总

许多人会说这在Adobe Illustrator中更容易做到。

我想绘制基本的矢量形状确实更容易(Illustrator有一套更强大的矢量绘制工具)。但是在Illustrator中应用这些效果将是一个痛苦的过程，如果不是不可能的话。而且，正如本教程向我们展示的那样，我们可以在Photoshop中快速轻松地完成它。

我们制作了一个旋钮/拨号用户界面，其美学灵感来自博朗极简主义工业设计。

仅使用基本的Photoshop工具，如形状图层，图层样式，椭圆工具和直线工具，我们就能够创建一个半逼真的旋钮/拨号用户界面。

下载源文件

• knob_dial_ui_tutorial_photoshop(zip, 0.03 mb)