【 PS電腦繪圖 】Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

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

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

教學大綱:

教程我們主要分為二個部分:底座、內圓、其它問題都不大,主要是內圓部分、需要用到多個圖層及圖層樣式,來表現圖標的立體感,教程的主要部分都是用圖層樣式來完成的,感興趣的朋友讓我們一起來學習吧。


鼠繪教程教學開始

最終效果:

Photoshop繪製播放器開關按鈕效果圖

下面是教程:

Photoshop繪製播放器開關按鈕效果圖

步驟一:首先新建畫布1000px*1000px畫布,命名為播放圖標,為其添加漸變疊加圖層樣式。

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

步驟二:我們最先來繪製底座吧,使用圓角矩形工具、繪製一個500px*500px圓角半徑90px的底座,並為它添加圖層樣式。

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

步驟三:高逼格的底座一下就出來了,有木有!!!現在來繪製下裝飾部分,繪製兩個360px的正圓,將填充數值都設置為0。

Photoshop繪製播放器開關按鈕效果圖

步驟四:現在為裝飾圓添加不同的描邊效果,並將多餘的線條利用選區框選出來,在圖層蒙版遮中填充黑色。

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

步驟五:現在選擇直線段工具,長度20px,粗細4px,並複製為加號移動到合適位置,添加OFF文字Adobe 黑體 Std R,字體大小20點顏色#a0a0a0。

Photoshop繪製播放器開關按鈕效果圖

步驟六:現在我們來繪製內部圓,繼續使用橢圓工具、繪製一個290px*290px的正圓,並為它添加圖層樣式。

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

步驟七:現在我們來繪製圓環,繪製兩個正圓大小分別為200x,180px的正圓,將倆個合併為一個形狀層,選擇路徑選擇工具選擇內圓,減去頂層形狀,並添加圖層樣式。

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

步驟八:繼續使用橢圓工具,繪製一個180px*180px的正圓,並添加圖層樣式。

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

步驟九:現在我們來繪製一下最後的小圓吧,繪製一個20px*20px的正圓,並添加圖層樣式。

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

步驟十:就剩高光部分了哦,繪製一個大小為180px的正圓,將填充設置為0,添加圖層樣式吧。

Photoshop繪製播放器開關按鈕效果圖

Photoshop繪製播放器開關按鈕效果圖

最終效果圖

Photoshop繪製播放器開關按鈕效果圖

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

文章永久連結為: Photoshop繪製播放器開關按鈕效果圖