第一步，制作旋鈕的主體部分

打開 Photoshop，創建一個文檔（大小自定，我的尺寸是1300*1300，分辨率默認72）

將圖層重名為“背景”并把填充改為0（為了更加方便的理解圖層樣式，后面所有的圖層，填充全部默認為0）

背景

最終得到這樣的一張背景圖：

這里大家一定要注意，不透明度是控制整個圖層效果不透明度；填充只影響圖層原有內容，不影響圖層樣式。這里給大家舉例演示說明一下

左側是原本的圖層，右邊是使用圖層樣式—描邊的圖層，當我們去修改填充和不透明度時，就能得到以下結果

主體部分使用矩形工具（快捷鍵U）中的圓形繪制，首先繪制一個尺寸396*396的圓，點擊下方圖層樣式f（x），選擇斜面與浮雕，調整參數如下：

（大家可以看到這里我加了兩個投影，這是2015及以上版本才有的功能，帶加號的樣式可以多次添加使用，層與層之間相互獨立）

然后我們就得到了第一個圓

接下來我們繼續做第二層，也是同樣的方法，Ctrl+J復制（直接復制第一個圓的好處是不需要再次去手動調整填充，而且放大后兩個圓是同心圓），直接修改圓形的數值540*540；然后調整圖層樣式：

得到下面這個圖形

現在就已經開始有旋鈕的概念了，我們繼續往下做

第三步，我們將第二層圓繼續復制一份，然后Ctrl+T，等比例拖動放大，得到第三層圓，如下所示

第四步，做一個底座，，同樣的方法，直接復制上一層然后等比放大，調整一下圖層樣式的參數，就能得到一個底座

入圖所示

最后，再讓旋鈕與背景之間的過渡顯得自然一些，所以需要再加一層（顏色與背景相同，還可以拖動漸變滑塊，整體顯得更加立體），并增加一些羽化效果。

最終得到這樣的一個旋鈕

接下來，我們需要做旋鈕上面的刻度

首先，在上面需要做刻度的畫一個圓，Ctrl+J復制一層。 選中復制的層，Ctrl+T進入自由變換，然后按住 Alt+鼠標左鍵 將變換中心點拉到整個圖標的中心點。并在參數欄中將旋轉調整為 -15。然后 回車鍵 確定。然后按住Shift+Ctrl+Alt+T快速復制。復制一整圈，選取部分Ctrl+G編組，命名為發光，然后將剩下部分編組命名為暗。

之后我們只需要對組進行圖層樣式調整，就可以調整組內全部的點

首先調整亮部的參數，因為需要發光，所以我們要調的參數比暗部多一些

暗部因為不需要發光，所以我們可以少調一些細節，只要讓它顯得立體即可

然后我們就能得到這樣的一個樣式圖層

最后，我們再加上一個指示燈，表示調的刻度位置，圖層樣式可以直接復制粘貼發光點的（右鍵-拷貝圖層樣式。回到現在需要粘貼的圖層， 點擊右鍵-粘貼圖層樣式。）

最終得到這樣一個按鈕

是不是很容易？教程到這里已經完成了，做練習的朋友可以根據喜好在修改。最后再附帶一版深色模式的按鈕，原理上是一樣的，大家可以自己動手試試