編者按：過年愉快~今天@P大點S微博?分享一篇超精致的音箱圖標繪制教程，素材和源文件已經打包好，在家的同學不妨來練個手。

本文為作者授權優設發布，未經作者本人授權請勿轉載，謝謝 ：）

素材打包 ?百度云下載

新建一個1000×1000 px 的畫布，填充顏色#7b7776。

創建一個512×512像素，圓角半徑為90px的圓角矩形，并置入木紋素材，然后在圖層面板中，按住ALT點擊木紋圖層和圓角矩形圖層的交界，創建剪貼蒙版。

給“圓角矩形1”圖層添加內陰影和投影。

在“木紋”圖層上面新建一個圖層，填充顏色#5f543f，混合模式改為正片疊底，透明度為70%，并創建剪貼蒙版。

音箱的立面就做好了。接下來創建一個512×460，圓角半徑為90px的圓角矩形，并和“圓角矩形1”左對齊和頂對齊，然后將木紋復制一層，在新的圓角矩形上建立剪貼蒙版。

如果是Photoshop的版本是CC，就可以直接復制一層“圓角矩形1”，然后CTRL+T變換大小。CC以前的版本變形的時候會損失圓角，所以只能創建形狀。

給“圓角矩形2”添加內陰影和投影。

給“木紋 拷貝”圖層疊加一個10%的黑白漸變。

CTRL+J復制一層“圓角矩形2”，然后將圖層移動到木紋圖層上面，CTRL+T變換大小，記得同時按住SHIFT和ALT，縮放90%，然后添加圖層樣式。

接下來做音孔，新建一個256×256的圓，調整位置，添加圖層樣式。

建議CTRL+G給音孔的這個圓建個組，因為等會兒會有很多圖層。

新建一個直徑為11px的橢圓，與“橢圓 1”水平、垂直居中，填充顏色#5f543f。

然后用矩形工具手動畫兩根參考線，找到圓心，效果圖如下：

中間的小圓直徑一定要是奇數，不然不能準確找到圓心。

將小圓復制一層，CTRL+G建組，然后將被拷貝的圓移動到大圓外圍，ALT+CTRL+T變形，按住ALT將旋轉中心移動到剛剛找到的圓心處。

然后旋轉到合適位置。需要注意的是，旋轉的角度一定要能被360整除。

然后多按幾下CTRL+SHIFT+ALT+T，再次變換，外圈音孔get

自行調節旋轉角度，重復步驟，將音孔做完。做到最后的時候，中間會顯得比較比較密集，可以將圓心處的小圓直徑改為9px

音孔做好了，將參考線刪掉，接著做旋鈕。

新建一個橢圓，填充顏色#ebebeb，移動到合適位置，添加圖層樣式。

復制一層“橢圓 3”，CTRL+T變形，按住SHIFT+ALT等比縮放85%，添加圖層樣式。

然后復制一層“橢圓3 拷貝”，將填充透明度改為0，添加內陰影。

右邊的旋鈕做好了，復制到左邊，整個圖標就差不多做好了~

不過如果仔細看，會發現這個圖標的木紋還有問題，所以最后來做一下簡單的透視。

首先是選擇比較亮的木紋，CTRL+T，右鍵選擇“透視”，調整成這個樣子。

然后用同樣的辦法調整比較暗的木紋

最終的結果：

歡迎關注可能是做原創教程最用心的公眾號：

【優設酷站22連發！】

1. 免費圖庫+導航收集站：《酷站兩連發！高品質免費圖庫站+專注WEB/APP導航收集站》
2. 音樂站+字體搜索：《酷站兩連發！幫你專心工作的音樂站+谷歌字體在線搜索神器》
3. 漸變色+代碼比較：《酷站兩連發！漸變色方案全聚合網站+在線代碼比較神器》
4. 配色+占位圖：《酷站兩連發！在線色彩搭配工具+快速生成占位圖片器》
5. LOGO下載+字體下載：《酷站兩連發！可商用的矢量LOGO下載+平面最愛的27款免費字體》
6. 壓縮圖片+在線配色：《酷站兩連發！在線圖片壓縮神器+在線配色工具COLOURCO》
7. CSS Hover動畫+寵物小精靈配色：《酷站兩連發！寵物小精靈專屬配色網站+CSS HOVER動畫收集站》
8. 美女圖片+游戲配色：《酷站兩連發！游戲配色網站+免費美女素材特供網站》
9. 在線配色+字體推薦：《酷站兩連發！在線配色神器+英文字體推薦網站》
10. 追波作品變代碼+16進制顏色：《酷站兩連發！用代碼呈現DRIBBBLE作品+16進制顏色網站》
11. 無縫紋理+多邊形背景：《酷站兩連發！專注無縫紋理素材站+多邊形背景生成器》

原文地址：pdadians

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com