編者按：過年愉快~今天@P大點(diǎn)S微博?分享一篇超精致的音箱圖標(biāo)繪制教程，素材和源文件已經(jīng)打包好，在家的同學(xué)不妨來練個(gè)手。
本文為作者授權(quán)優(yōu)設(shè)發(fā)布，未經(jīng)作者本人授權(quán)請(qǐng)勿轉(zhuǎn)載，謝謝 ：）
素材打包 ?百度云下載
新建一個(gè)1000×1000 px 的畫布，填充顏色#7b7776。
創(chuàng)建一個(gè)512×512像素，圓角半徑為90px的圓角矩形，并置入木紋素材，然后在圖層面板中，按住ALT點(diǎn)擊木紋圖層和圓角矩形圖層的交界，創(chuàng)建剪貼蒙版。
給“圓角矩形1”圖層添加內(nèi)陰影和投影。
在“木紋”圖層上面新建一個(gè)圖層，填充顏色#5f543f，混合模式改為正片疊底，透明度為70%，并創(chuàng)建剪貼蒙版。
音箱的立面就做好了。接下來創(chuàng)建一個(gè)512×460，圓角半徑為90px的圓角矩形，并和“圓角矩形1”左對(duì)齊和頂對(duì)齊，然后將木紋復(fù)制一層，在新的圓角矩形上建立剪貼蒙版。
如果是Photoshop的版本是CC，就可以直接復(fù)制一層“圓角矩形1”，然后CTRL+T變換大小。CC以前的版本變形的時(shí)候會(huì)損失圓角，所以只能創(chuàng)建形狀。
給“圓角矩形2”添加內(nèi)陰影和投影。
給“木紋 拷貝”圖層疊加一個(gè)10%的黑白漸變。
CTRL+J復(fù)制一層“圓角矩形2”，然后將圖層移動(dòng)到木紋圖層上面，CTRL+T變換大小，記得同時(shí)按住SHIFT和ALT，縮放90%，然后添加圖層樣式。
接下來做音孔，新建一個(gè)256×256的圓，調(diào)整位置，添加圖層樣式。
建議CTRL+G給音孔的這個(gè)圓建個(gè)組，因?yàn)榈葧?huì)兒會(huì)有很多圖層。
新建一個(gè)直徑為11px的橢圓，與“橢圓 1”水平、垂直居中，填充顏色#5f543f。
然后用矩形工具手動(dòng)畫兩根參考線，找到圓心，效果圖如下：
中間的小圓直徑一定要是奇數(shù)，不然不能準(zhǔn)確找到圓心。
將小圓復(fù)制一層，CTRL+G建組，然后將被拷貝的圓移動(dòng)到大圓外圍，ALT+CTRL+T變形，按住ALT將旋轉(zhuǎn)中心移動(dòng)到剛剛找到的圓心處。
然后旋轉(zhuǎn)到合適位置。需要注意的是，旋轉(zhuǎn)的角度一定要能被360整除。
然后多按幾下CTRL+SHIFT+ALT+T，再次變換，外圈音孔get
自行調(diào)節(jié)旋轉(zhuǎn)角度，重復(fù)步驟，將音孔做完。做到最后的時(shí)候，中間會(huì)顯得比較比較密集，可以將圓心處的小圓直徑改為9px
音孔做好了，將參考線刪掉，接著做旋鈕。
新建一個(gè)橢圓，填充顏色#ebebeb，移動(dòng)到合適位置，添加圖層樣式。
復(fù)制一層“橢圓 3”，CTRL+T變形，按住SHIFT+ALT等比縮放85%，添加圖層樣式。
然后復(fù)制一層“橢圓3 拷貝”，將填充透明度改為0，添加內(nèi)陰影。
右邊的旋鈕做好了，復(fù)制到左邊，整個(gè)圖標(biāo)就差不多做好了~
不過如果仔細(xì)看，會(huì)發(fā)現(xiàn)這個(gè)圖標(biāo)的木紋還有問題，所以最后來做一下簡(jiǎn)單的透視。
首先是選擇比較亮的木紋，CTRL+T，右鍵選擇“透視”，調(diào)整成這個(gè)樣子。
然后用同樣的辦法調(diào)整比較暗的木紋
最終的結(jié)果：
歡迎關(guān)注可能是做原創(chuàng)教程最用心的公眾號(hào)：
【優(yōu)設(shè)酷站22連發(fā)！】
- 免費(fèi)圖庫+導(dǎo)航收集站：《酷站兩連發(fā)！高品質(zhì)免費(fèi)圖庫站+專注WEB/APP導(dǎo)航收集站》
- 音樂站+字體搜索：《酷站兩連發(fā)！幫你專心工作的音樂站+谷歌字體在線搜索神器》
- 漸變色+代碼比較：《酷站兩連發(fā)！漸變色方案全聚合網(wǎng)站+在線代碼比較神器》
- 配色+占位圖：《酷站兩連發(fā)！在線色彩搭配工具+快速生成占位圖片器》
- LOGO下載+字體下載：《酷站兩連發(fā)！可商用的矢量LOGO下載+平面最愛的27款免費(fèi)字體》
- 壓縮圖片+在線配色：《酷站兩連發(fā)！在線圖片壓縮神器+在線配色工具COLOURCO》
- CSS Hover動(dòng)畫+寵物小精靈配色：《酷站兩連發(fā)！寵物小精靈專屬配色網(wǎng)站+CSS HOVER動(dòng)畫收集站》
- 美女圖片+游戲配色：《酷站兩連發(fā)！游戲配色網(wǎng)站+免費(fèi)美女素材特供網(wǎng)站》
- 在線配色+字體推薦：《酷站兩連發(fā)！在線配色神器+英文字體推薦網(wǎng)站》
- 追波作品變代碼+16進(jìn)制顏色：《酷站兩連發(fā)！用代碼呈現(xiàn)DRIBBBLE作品+16進(jìn)制顏色網(wǎng)站》
- 無縫紋理+多邊形背景：《酷站兩連發(fā)！專注無縫紋理素材站+多邊形背景生成器》
原文地址：pdadians
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評(píng)論！每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后，在評(píng)論區(qū)留言，系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今，是國內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái)，提供獎(jiǎng)品贊助 聯(lián)系我們
AI輔助海報(bào)設(shè)計(jì)101例
已累計(jì)誕生 753 位幸運(yùn)星
發(fā)表評(píng)論
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓