提交需求
賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱?,我們會在第一時(shí)間與您聯(lián)系!
教程主要使用Photoshop設(shè)計(jì)藍(lán)色漸變風(fēng)格的播放圖標(biāo)教程,教程的主要部分都是用圖層樣式來完成的,騷年們趕緊行動(dòng)起來吧^o^
關(guān)注公眾號liangyuansi1可以獲取最新學(xué)習(xí)UI軟件。
最終效果:
老規(guī)矩,先來分析一下。這里我們主要分為四個(gè)部分:底座、外圓、內(nèi)圓、半圓,問題都不大,主要是外圓部分、需要用到多個(gè)圖層及圖層樣式,來表現(xiàn)圖標(biāo)的立體感,騷年分析完已經(jīng)成功一半了,離成功還會遠(yuǎn)么,噢耶?。?!
步驟一:
首先新建畫布1000px*1000px畫布,命名為播放按鈕,為背景添加漸變疊加圖層樣式。
步驟二:
關(guān)注公眾號liangyuansi1可以獲取最新學(xué)習(xí)UI軟件。
使用圓角矩形、繪制一個(gè)600px*600px,圓角半徑為90px的底座,并為它添加圖層樣式。
步驟三:
高逼格的底座一下就出來了,有木有?。?!接下來使用橢圓工具、繪制一個(gè)500px*500px的正圓命名為外圓,并為它添加圖層樣式。
步驟四:
接下來是繪制半圓,使用橢圓工具繪制二個(gè)正圓,大小分別為500px*500px、440px*440px將兩個(gè)形狀圖層合并形狀,使用小黑工具單擊選中內(nèi)圓,并減去頂層形狀。
步驟五:
繼續(xù)繪制半圓現(xiàn)在繼續(xù)使用布爾運(yùn)算按住alt鍵當(dāng)箭頭出現(xiàn)“-”號繪制矩形,剪切不需要的地方。右側(cè)方法操作一樣繪制完成后將形狀合并為組件。
步驟六:
接下來我們繼續(xù)使用布爾運(yùn)算按住shift鍵當(dāng)箭頭出現(xiàn)“+”號繪制倆30px*30px的正圓操作完成后命名為藍(lán)圓,并添加圖層樣式。
步驟七:
接下來是比較復(fù)雜的按鈕,使用橢圓工具繪制一個(gè)440px*440px的圓,并為它添加圖層樣式命名為內(nèi)圓。
步驟八:
關(guān)注公眾號liangyuansi1可以獲取最新學(xué)習(xí)UI軟件。
現(xiàn)在我們趕緊來繪制最后一個(gè)圓吧,使用橢圓工具繪制一個(gè)200px*200px正圓,給它起名叫小內(nèi)圓吧,并為它添加圖層樣式。
步驟九:
嘻嘻差不多了ヽ( ̄▽ ̄)?,高逼格的趕腳有木有,最后我們自定義形狀工具選擇設(shè)置按鈕追加全部形狀,并繪制82px*82px的形狀吧,將其命名為播放吧,接下來添加下圖層樣式。
關(guān)注公眾號liangyuansi1可以獲取最新學(xué)習(xí)UI軟件。
步驟有點(diǎn)多哦,但是只要勤加練習(xí),會很大程度上提高你的PS水平哦^o^,騷年前輩告訴我們要時(shí)刻富有創(chuàng)新精神,而不是單純的模仿,對于藍(lán)色半圓的基本型創(chuàng)建交給大家仔細(xì)琢磨一下,偷偷告訴你們公眾號里面psd源文件和視頻教程哦,有木有很心動(dòng)( ̄▽ ̄)/趕快來嘗試下吧??!
大牛,別默默的看了,快登錄幫我點(diǎn)評一下吧!:)
登錄 立即注冊