說明：這是我在一個(gè)國外網(wǎng)站，按著教程做的，覺得挺簡(jiǎn)單的，雖然不懂英文，但是看圖片大概能看懂，或者說，谷歌翻譯吧，不過生硬，所以按自己理解重新寫了過程。過程可能會(huì)很啰嗦，但是這是為了照顧處于基礎(chǔ)中的同學(xué)，覺得太啰嗦的同學(xué)，可以看world文檔的國外大神做的教程截圖，本來想保存整個(gè)網(wǎng)頁為圖片的，但是竟然不給，

如果有問題，在下面留言，因?yàn)槲疫€是學(xué)生，我會(huì)在線等的，一起學(xué)習(xí)，今天剛做的

注：也是我第一次寫教程，額，應(yīng)該不算教程，分享個(gè)人的制作過程，請(qǐng)大神們提意見。

下面有可供下載文件（里面有原網(wǎng)站的截圖+混合模式中英文對(duì)照表）

讓我們開始吧：

畫布大小自定義，我這里800*600px，顏色值：2e2f31

2.繪制一個(gè)正圓，按住shift鍵，點(diǎn)擊鼠標(biāo)左鍵，選擇移動(dòng)工具V，在與畫布垂直、水平居中對(duì)齊，顏色值：2e2f31

3.給圖層命名base（底層），并添加內(nèi)陰影、投影

4.復(fù)制base圖層，右擊選擇清除圖層樣式，按住Ctrl+T，再按住shift+Alt等比例縮小，縮放比例看圖，并命名shape（形狀），再添加圖層樣式

5.新建正圓，并命名shadow（陰影）我是cc版的，羽化就行：6.6px，找不到的話，就高斯模糊，濾鏡—模糊—高斯模糊，數(shù)值自個(gè)調(diào)，按住shift+方向鍵，下移到base圖層邊緣就行。

6.在繪制一個(gè)shape圖層，為什么是一樣的，這個(gè)我真不知道誒，這是按國外大神做地，為了以示區(qū)別，可以改為shape2，這個(gè)圖層移到陰影圖層下，添加圖層樣式

7.在繪制一個(gè)shape圖層，在加個(gè)數(shù)字3把，按Ctrl+T，shift+Alt等比例縮放，添加圖層樣式

8.繪制一個(gè)正圓命名為metal（金屬）層，添加圖層樣式

大神沒給顏色值，無非就是黑、灰、白，

9.復(fù)制metal圖層，并改為gradient（漸變）右擊圖層，清除樣式，重新添加黑白漸變，圖層填充為0

10.繪制一個(gè)圓角矩形，命名為mark（標(biāo)記）圖層，在選擇矩形工具減去一小部分，添加圖層樣式

到這一步算是基本完成了，接下來就是指示燈的問題。

這一步需要AI支援了

將ps文件保存好后，打開AIcs6，按Ctrl+O彈出打開窗口，選擇需要的打開文件，打開后會(huì)彈出一個(gè)窗口，默認(rèn)，點(diǎn)確定即可。

AI步驟：

1.繪制一個(gè)正圓，圓的大小，你們看著順眼吧。

選擇旋轉(zhuǎn)工具（R），按住Alt鍵將鼠標(biāo)移到圓的中心位置，會(huì)顯示出“中心點(diǎn)”字體，不要松開鼠標(biāo)，將“中心點(diǎn)移到金屬中心位置”，此時(shí)會(huì)彈出旋轉(zhuǎn)彈窗，輸入22.5度，點(diǎn)復(fù)制，在按Ctrl+d鍵，連續(xù)復(fù)制。

如下圖：這是全選中狀態(tài)，因?yàn)橐獜?fù)制，在編輯—復(fù)制，再回到PS軟件，Ctrl+V粘貼

此時(shí)彈出粘貼彈出，選擇最后一個(gè)

接下來就是給兩個(gè)圖層命名為off，off2添加圖層樣式

Off：圖層樣式

Off2圖層樣式

這是我做的效果：

這是原效果圖