-5.21 update-

没想到一晚上就被这么多人关注，有点受宠若惊...所以又仔细看了一遍教程，真是不好意思啊之前丢了点东西...现在补上了，改了些错别字，希望大家别介意，还有什么地方有问题的话可以在评论里告诉我。

对于参数这个问题：假如你建立的图形大小跟作者的差别很大那么即使一样的参数做出来也会差很多，所以这里的参数只是参考，大家做的时候可以对照着作者每一步的最终效果来自己调节参数，找到符合自己图形的那个！多试几次总是没错的！

-5.20-

界面截图我没有汉化，因为位置基本对应所以大家应该都能找到。

做这个真的很累啊！！！真心不想再弄了！！有用的话请点赞！！

1 新建文档，用深灰色（#2e2f31）填充背景图层。

2在画布中间画个圆，按住Shift控制比例，这个圆将作为旋钮的基础层，用比背景稍浅的灰色 (#303030)填充

3 给基础层添加样式使它明显

4 画一个大小是基础圆85%的同心圆，填充同样颜色，这个圆是旋钮的主体部分。

5 给这个主体圆加些样式

添加完后是这样子滴

6 我们可以利用阴影给这个主体圆一个深度，作者这里手动做了一个而不是用图层样式。复制主体圆，右击去掉图层样式，颜色填充黑色，下移一个图层，使其处于主体圆和基础圆之间，向下位移大概40个像素

7 用属性面板中的羽化来模糊边缘，设置图层不透明度为75%

8 在基础层和阴影层中间新建一个比基础圆小5%的圆

9 在新圆上添加图层样式

从这里开始要做旋钮了，到目前为止我们得到的图层是这样的

10 在最上面画个圆，或者复制最顶层的那个圆，大小缩小5%，填充色为黑色

11 对于这种细腻的交互元素来说，图层样式太有用啦，加样式吧！Go！Go！Go!

12 把这个新建的图层填充设为0%，得到如下效果图

13 重复11步再在最上面画一个圆，大小缩小5%，颜色填充为浅灰色(#d7d7d7)，这是旋钮的中心

14 给这个圆添加些图层样式使其更像金属

这一步最重要的是要做一个非常漂亮的角度渐变，试着新建一个渐变（做好后可以将其新建方便以后调用），要做的与下面越相近越好

完成图

15 这一步我们需要给这个圆一个线性渐变，但是因为渐变叠加图层样式已经用过了，所以需要用其他方式处理一下：复制目前最上层这个圆，右击去掉所有图层样式，将填充设为0%，添加渐变叠加

做出来是酱紫：

16 现在在旋钮的90度位置加一个标记：画个大概8像素的黑色圆角矩形，设置填充为10%

这一步可选：在圆角矩形的图层中拖一个矩形，减去顶层形状，减去圆角矩形下面不要的地方。

17 再加一点图层样式

18 到现在旋钮部分算是完成啦！是酱紫滴（这个图里的标记图层所在的位置作参考）

19 要做旋钮旁边的指示灯，我们需要AI的帮助。首先，在背景图层的上面画个圆，大概就是你指示灯想要的位置，然后按CTRL+C，将圆复制到剪切板中。

20 将圆粘贴到AI中，然后给它一个厚重的点状描边

21 当你对这个图形比较满意时，将图形轮廓化描边；复制到剪切板中

22 粘贴到ps中去，选择形状路径；去掉之前画的那个圆；

填充为黑色

23 为这些小圆添加图层样式，看上去处于“关”的状态

24 去掉一些不需要的圆点

25 复制一层，去掉图层样式，填充100% 的白色，这是“开”的状态

26 给“开”图层加些内发光和外发光，使其看上去在发光，这里的颜色参考#f1c339

最后，去掉“开”图层中右边的一些点，使开着的指示灯正好到标记处

完工！