UI圖標(biāo)教程，用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)(4)

本篇教程通過PS設(shè)計(jì)一個(gè)獨(dú)特的漸變風(fēng)格播放圖標(biāo)，教程依然是我們的圖層樣式，同學(xué)們不要覺得圖層樣式煩，圖標(biāo)根本離不開它，所以我們這個(gè)朋友呢，一定跟它搞熟悉關(guān)系，同學(xué)們一起來試著做一下吧。

效果圖：

tgudhdp.cn

操作步驟：

老規(guī)矩，先來分析一下。這里我們主要分為三個(gè)部分：底座、外圓、內(nèi)圓，其它問題都不大，主要是外圓部分、需要用到多個(gè)圖層來繪制線條，騷年分析完已經(jīng)成功一半了，離成功還會(huì)遠(yuǎn)嗎？

步驟一：

首先新建畫布900px*900px畫布，命名為播放按鈕，為背景添加顏色#3d3835。

步驟二：

使用圓角矩形工具、繪制一個(gè)615px*615px圓角半徑為90px底座，并為它添加圖層樣式。

步驟三：

高逼格的底座一下就出來了，有木有�。�！接下來繼續(xù)使用橢圓工具、繪制一個(gè)400px的正圓，并為它添加圖層樣式。

步驟四：

在繪制一下底座的線條吧，選擇直線工具繪制一條長(zhǎng)度30px粗細(xì)1px的直線吧，顏色為#818181。

步驟五：

復(fù)制直線執(zhí)行自由變換命令，調(diào)整中心點(diǎn)至畫布中心，旋轉(zhuǎn)15度，并執(zhí)行重復(fù)上一命令并復(fù)制操作shift+ctrl+alt+t復(fù)制出另外余下的直線段，并添加一下圖層樣式吧。

步驟六：

接下來使用橢圓工具、繪制一個(gè)330px*330px的正圓，并為它添加圖層樣式。

步驟七：

我們繼續(xù)使用橢圓工具、繪制一個(gè)260px的正圓，并為它添加圖層式。

步驟八：

現(xiàn)在繼續(xù)繪制一下底座的線條吧，選擇直線工具繪制一條長(zhǎng)度8px粗細(xì)1px的直線吧，顏色為#898989。

步驟九：

復(fù)制直線執(zhí)行自由變換命令，調(diào)整中心點(diǎn)至畫布中心，旋轉(zhuǎn)15度，并執(zhí)行重復(fù)上一命令并復(fù)制操作shift+ctrl+alt+t復(fù)制出另外余下的直線段。

步驟十：

重復(fù)上面步驟繪制長(zhǎng)度32px粗細(xì)1px的直線吧，顏色為#898989，并復(fù)制旋轉(zhuǎn)90度。

步驟十一：

現(xiàn)在我們來繪制內(nèi)圓的部分，用橢圓工具、繪制一個(gè)170px*170px的正圓，并為它添加圖層樣式。

步驟十二：

繼續(xù)繪制內(nèi)圓的部分，用橢圓工具、繪制一個(gè)130px*130px的正圓，并為它添加圖層樣式。

步驟十三：

現(xiàn)在我們來繪制最后一個(gè)小圓吧，用橢圓工具、繪制一個(gè)15px*15px的正圓，顏色為#60a500并為它添加圖層樣式，復(fù)制小圓，將顏色改為#fe0000，放到合適的位置就完成這個(gè)案例了哦。

完成：

同學(xué)只要勤加練習(xí)，就可以做到自己想要的效果，不能一味模仿，我們練習(xí)多了要有創(chuàng)新精神，創(chuàng)作屬于我們自己的東西。