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

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

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

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

讓我們開(kāi)始吧：

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

2.繪制一個(gè)正圓，按住shift鍵，點(diǎn)擊鼠標(biāo)左鍵，選擇移動(dòng)工具V，在與畫(huà)布垂直、水平居中對(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è)我真不知道誒，這是按國(guó)外大神做地，為了以示區(qū)別，可以改為shape2，這個(gè)圖層移到陰影圖層下，添加圖層樣式

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

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

大神沒(méi)給顏色值，無(wú)非就是黑、灰、白，

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

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

到這一步算是基本完成了，接下來(lái)就是指示燈的問(wèn)題。

這一步需要AI支援了

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

AI步驟：

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

選擇旋轉(zhuǎn)工具（R），按住Alt鍵將鼠標(biāo)移到圓的中心位置，會(huì)顯示出“中心點(diǎn)”字體，不要松開(kāi)鼠標(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è)

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

Off：圖層樣式

Off2圖層樣式

這是我做的效果：

這是原效果圖