【 PS電腦繪圖 】Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

這一次的教學是屬於PS教程領域中的鼠繪教程的相關教學。

文章出處是來自站酷的PS教程類文章,寫教學的作者是全棧UI筆記,感謝全棧UI筆記提供鼠繪教程的實作教學。

教學大綱:

自從有了智能手機,手機的APP就風靡一時,各種各樣的APP圖標設計也非常的流行,教程主要通過圖層樣式來完成,感興趣的讓我們一起來學習吧。


鼠繪教程教學開始

教程視頻教程和源文件:木紋風格的收音機圖標PS教程素材

最終效果:

Photoshop繪製木質風格的收音機圖標教程

老規矩先來分析一下,教程裡面的木紋圖標我們主要分為以下幾個部分:底座、旋鈕、顯示屏、橫線,大都問題都不大,主要是底座和顯示屏比較麻煩一點,需要用到多個圖層來製作高光效果,分析完了以後我們離成功就近了一步,下面就讓我們一起來學習吧。

Photoshop繪製木質風格的收音機圖標教程

步驟一:首先新建畫布500px*500px畫布,命名為收音機,填充背景顏色#c8beae。具體參數如下。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟二:使用圓角矩形工具繪製一個320px*320px圓角半徑為60px的圓角矩形,顏色設置#d29b4d並命名為底座,添加圖層樣式。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟三:現在打開素材,為素材添加圖層樣式並按住ctrl+alt+g鍵創建剪貼蒙版到底座圖層。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟四:現在來繪製底座高光,繪製倆個圓角矩形,使用小黑工具單擊選中內步形狀,並減去頂層形狀。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟五:將混合模式改為濾色,不透明度設置為40%,添加圖層蒙版,擦除不需要的位置。

Photoshop繪製木質風格的收音機圖標教程

步驟六:繼續使用圓角矩形工具繪製一個283px*278px圓角半徑為60px的圓角矩形,顏色設置# f8bf86並命名為底座亮色。

Photoshop繪製木質風格的收音機圖標教程

步驟七:我們複製一下底座亮色圖層,將顏色設置為#96622f,重新命名為底座暗色,並移動到合適的位置。

Photoshop繪製木質風格的收音機圖標教程

步驟八:繼續打開素材,操作同上:為素材添加圖層樣式轉換為智能對象並創建剪貼蒙版到底座暗色。將圖層打組命名為底座。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟九:現在我們來繪製顯示屏的位置,用圓角矩形工具繪製一個238px*119px圓角半徑為90px的圓角矩形,顏色設置# a4a29e並命名為顯示屏底座,添加圖層樣式。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟十:我們來為顯示屏添加高光位置,用圓角矩形工具繪製一個178px*50px圓角半徑為90px的圓角矩形,顏色設置# ffffff,高斯模糊12px,命名為顯示屏高光。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟十一:繼續添加高光位置,操作方式同上,繪製圓角矩形,顏色白色,添加圖層蒙版擦除不需要的位置,適當調節不透明度。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟十二:現在來繪製邊框使用圓角矩形工具繪製一個238px*119px圓角半徑為90px的圓角矩形,顏色設置# 16120f並命名為邊框。

Photoshop繪製木質風格的收音機圖標教程

步驟十三:現在我們將邊框填充數字設置為0,添加圖層樣式,並移動圖層順序到顯示屏底部。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟十四:高逼格的顯示屏一下就出來了,有木有!!!現在我們來為中心添加數字。

Photoshop繪製木質風格的收音機圖標教程

步驟十五:現在我們用直線工具繪製直線,線條顏色設置為#d80202並添加圖層樣式

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟十六:現在我們來繪製線條的位置吧,選擇圓角矩形工具,繪製高度2px的線條,然後複製,打組后命名為橫條。

Photoshop繪製木質風格的收音機圖標教程

步驟十七:之後我們為橫條添加圖層樣式,並添加蒙版,遮擋不需要的位置。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟十八:接下來我們繪製旋鈕吧,只要完成了一個,另一個就可以複製啦,是不是很開心,首先選擇橢圓工具,繪製一個65px*65px的正圓,顏色為#211f1d。

Photoshop繪製木質風格的收音機圖標教程

步驟十九:繼續繪製50px*50px的正圓,並添加圖層樣式。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

步驟二十:現在我們將旋鈕複製一下吧,並ctrl+T適當縮小一些。

Photoshop繪製木質風格的收音機圖標教程

步驟二十一:現在我們來繪製最後的部分吧,繪製一個5px*5px的正圓,顏色#4adb43,並添加一下圖層樣式吧,然後將投影製作一下就完成了哦。

Photoshop繪製木質風格的收音機圖標教程

Photoshop繪製木質風格的收音機圖標教程

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: Photoshop繪製木質風格的收音機圖標教程