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

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

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

背景

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

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

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

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

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

然后我們就得到了第一個(gè)圓

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

得到下面這個(gè)圖形

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

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

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

入圖所示

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

最終得到這樣的一個(gè)旋鈕

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

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

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

首先調(diào)整亮部的參數(shù)，因?yàn)樾枰l(fā)光，所以我們要調(diào)的參數(shù)比暗部多一些

暗部因?yàn)椴恍枰l(fā)光，所以我們可以少調(diào)一些細(xì)節(jié)，只要讓它顯得立體即可

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

最后，我們?cè)偌由弦粋€(gè)指示燈，表示調(diào)的刻度位置，圖層樣式可以直接復(fù)制粘貼發(fā)光點(diǎn)的（右鍵-拷貝圖層樣式?；氐?/span>現(xiàn)在需要粘貼的圖層， 點(diǎn)擊右鍵-粘貼圖層樣式。）

最終得到這樣一個(gè)按鈕

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