UI圖標(biāo)，設(shè)計(jì)旋轉(zhuǎn)開關(guān)UI圖標(biāo)教程(4)

本篇UI教程跟大家分享如何設(shè)計(jì)一枚旋轉(zhuǎn)風(fēng)格的開關(guān)按鈕，主體由灰白色組成，簡單漂亮，想學(xué)UI設(shè)計(jì)的同學(xué)就跟著練習(xí)一下吧。

我們來看看最終效果：

www.theoat.com.cn

老規(guī)矩，先來分析一下。這里我們主要分為二個(gè)部分：底座、內(nèi)圓、其它問題都不大，主要是內(nèi)圓部分、需要用到多個(gè)圖層及圖層樣式，來表現(xiàn)圖標(biāo)的立體感，騷年分析完已經(jīng)成功一半了，離成功還會(huì)遠(yuǎn)么，噢耶�。�！

步驟一：

首先新建畫布1000px*1000px畫布，命名為播放圖標(biāo)，為其添加漸變疊加圖層樣式。

步驟二：

我們最先來繪制底座吧，使用圓角矩形工具、繪制一個(gè)500px*500px圓角半徑90px的底座，并為它添加圖層樣式。

步驟三：

高逼格的底座一下就出來了，有木有�。。‖F(xiàn)在來繪制下裝飾部分，繪制兩個(gè)360px的正圓，將填充數(shù)值都設(shè)置為0。

步驟四：

現(xiàn)在為裝飾圓添加不同的描邊效果，并將多余的線條利用選區(qū)框選出來，在圖層蒙版遮中填充黑色。

步驟五：

現(xiàn)在選擇直線段工具，長度20px,粗細(xì)4px，并復(fù)制為加號(hào)移動(dòng)到合適位置，添加OFF文字Adobe 黑體 Std R，字體大小20點(diǎn)顏色#a0a0a0。

步驟六：

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

步驟七：

現(xiàn)在我們來繪制圓環(huán)，繪制兩個(gè)正圓大小分別為200x,180px的正圓，將倆個(gè)合并為一個(gè)形狀層，選擇路徑選擇工具選擇內(nèi)圓，減去頂層形狀，并添加圖層樣式。

步驟八：

繼續(xù)使用橢圓工具，繪制一個(gè)180px*180px的正圓，并添加圖層樣式。

步驟九：

現(xiàn)在我們來繪制一下最后的小圓吧，繪制一個(gè)20px*20px的正圓，并添加圖層樣式。

步驟十：

就剩高光部分了哦，繪制一個(gè)大小為180px的正圓，將填充設(shè)置為0，添加圖層樣式吧。

本篇UI圖標(biāo)設(shè)計(jì)教程到這里就完整結(jié)束了，大家跟著做，應(yīng)該能做出來。