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

打開 Photoshop，創(chuàng)建一個文檔（大小自定，我的尺寸是1300*1300，分辨率默認(rèn)72）

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

背景

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

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

左側(cè)是原本的圖層，右邊是使用圖層樣式—描邊的圖層，當(dāng)我們?nèi)バ薷奶畛浜筒煌该鞫葧r，就能得到以下結(jié)果

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

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

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

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

得到下面這個圖形

現(xiàn)在就已經(jīng)開始有旋鈕的概念了，我們繼續(xù)往下做

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

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

入圖所示

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

最終得到這樣的一個旋鈕

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

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

之后我們只需要對組進行圖層樣式調(diào)整，就可以調(diào)整組內(nèi)全部的點

首先調(diào)整亮部的參數(shù)，因為需要發(fā)光，所以我們要調(diào)的參數(shù)比暗部多一些

暗部因為不需要發(fā)光，所以我們可以少調(diào)一些細(xì)節(jié)，只要讓它顯得立體即可

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

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

最終得到這樣一個按鈕

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