免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

手把手教你設(shè)計控制按鍵UI

2022-08-22    分類: 網(wǎng)站建設(shè)

本教程主要使用Photoshop設(shè)計灰色漸變風(fēng)格的按鍵圖標(biāo)教程,教程的主要部分都是用圖層樣式來完成的,騷年們趕緊行動起來吧^o^


最終效果:


控制按鍵UI設(shè)計-1.png


老規(guī)矩先來分析一下,這里我們主要分為三個部分:外圓、按鍵、方向,外圓和方向問題都不大,主要是按鍵部分需要用到多個圖層及圖層樣式來表現(xiàn)圖標(biāo)的立體感,騷年分析完已經(jīng)成功一半了,離成功還會遠(yuǎn)么?噢耶!??!

控制按鍵UI設(shè)計-2.jpg


步驟一:

首先新建畫布500px*500px畫布,命名為按鍵,填充背景顏#d0d0d0。


控制按鍵UI設(shè)計-3.png

控制按鍵UI設(shè)計-4.jpg


步驟二:

使用橢圓工具繪制二個正圓,大小分別為400px*400px、345px*345px將兩個形狀圖層合并形狀,使用路徑選擇工具單擊選中內(nèi)圓,并減去頂層形狀,操作完成后命名為外圓,添加圖層樣式。

控制按鍵UI設(shè)計-5.png

控制按鍵UI設(shè)計-6.png

控制按鍵UI設(shè)計-7.jpg

控制按鍵UI設(shè)計-8.jpg

控制按鍵UI設(shè)計-9.jpg

控制按鍵UI設(shè)計-10.png


步驟三:

復(fù)制外圓圖層,清除圖層樣式命名為藍(lán)圓,并添加新的圖層樣式。


控制按鍵UI設(shè)計-11.jpg

控制按鍵UI設(shè)計-12.jpg

控制按鍵UI設(shè)計-13.jpg

控制按鍵UI設(shè)計-14.png


步驟四:

繼續(xù)復(fù)制外圓圖層命名為灰圓,將顏色改為#c8c8c8添加新的圖層樣式


控制按鍵UI設(shè)計-15.jpg

控制按鍵UI設(shè)計-16.jpg

控制按鍵UI設(shè)計-17.jpg


步驟五:

現(xiàn)在用矩形選框工具繪制到需要遮擋的位置,之后為灰圓添加圖層蒙版,為蒙版填充黑色。


控制按鍵UI設(shè)計-18.png

控制按鍵UI設(shè)計-19.jpg

控制按鍵UI設(shè)計-20.png


步驟六:

現(xiàn)在我們來繪制按鍵部分,使用橢圓工具繪制二個正圓,大小分別295px*295px、172px*172px將兩個形狀圖層合并形狀,使用小黑工具單擊選中內(nèi)圓,并減去頂層形狀。


控制按鍵UI設(shè)計-21.png

控制按鍵UI設(shè)計-22.png


步驟七:

現(xiàn)在繼續(xù)使用布爾運(yùn)算按住alt鍵當(dāng)箭頭出現(xiàn)“-”號繪制矩形,剪切不需要的地方。右側(cè)方法操作一樣繪制完成后合并形狀組件。


控制按鍵UI設(shè)計-23.png

控制按鍵UI設(shè)計-24.png


步驟八:

現(xiàn)在繼續(xù)繪制按鍵,選擇合并形狀,繪制兩個正圓,選擇添加錨點(diǎn)工具,在圓的兩側(cè)位置添加倆個錨點(diǎn),選擇直接選擇工具,選中錨點(diǎn),將錨點(diǎn)移動到合適位置,其他三角操作方式相同。


控制按鍵UI設(shè)計-25.jpg

控制按鍵UI設(shè)計-26.jpg

控制按鍵UI設(shè)計-27.jpg

控制按鍵UI設(shè)計-28.png


步驟九:

現(xiàn)在給按鍵圖層添加圖層樣式,并命名為頂部按鍵。


控制按鍵UI設(shè)計-29.jpg

控制按鍵UI設(shè)計-30.jpg

控制按鍵UI設(shè)計-31.jpg

控制按鍵UI設(shè)計-32.png


步驟十:

復(fù)制頂部按鍵執(zhí)行自由變換命令,調(diào)整中心點(diǎn)至畫布中心,旋轉(zhuǎn)90度,并執(zhí)行重復(fù)上一命令并復(fù)制操作shift+ctrl+alt+t復(fù)制出另外兩個按鍵形狀。


控制按鍵UI設(shè)計-33.png
控制按鍵UI設(shè)計-34.png


步驟十一:

現(xiàn)在繪制一下按鍵中心圓部分,選擇橢圓工具繪制130px*130px的正圓,命名為按鍵內(nèi)圓,復(fù)制頂部按鍵圖層樣式,最后將整體按鍵打組命名為按鍵。

控制按鍵UI設(shè)計-35.png


步驟十二:

選擇多邊形工具邊數(shù)設(shè)置為3繪制三角形,在利用矩形工具繪制兩個矩形,將三個形狀合并形狀,命名為中心方向。


控制按鍵UI設(shè)計-36.png


步驟十三:

高逼格的按鍵一下就出來了,有木有?。。‖F(xiàn)在我們?yōu)橹行姆较驁D層添加圖層樣式吧。

控制按鍵UI設(shè)計-37.png


步驟十四:

現(xiàn)在我們趕緊來繪制最后的部分吧,操作方式同上,創(chuàng)建完成后拷貝中心方向的圖層樣式吧,最后將整體打組命名為按鍵吧。

控制按鍵UI設(shè)計-38.png


步驟有點(diǎn)多哦,但是只要勤加練習(xí),會很大程度上提高你的PS水平哦^o^,騷年前輩告訴我們要時刻富有創(chuàng)新精神,而不是單純的模仿,對于方向按鍵的基本型創(chuàng)建交給大家仔細(xì)琢磨一下,偷偷告訴你們公眾號里面psd源文件和視頻教程哦,有木有很心動( ̄▽ ̄)/趕快來嘗試下吧??!


視頻教程&PSD源文件鏈接:http://pan.baidu.com/s/1qYDdqJq 密碼:cxhh

標(biāo)題名稱:手把手教你設(shè)計控制按鍵UI
文章路徑:http://m.newbst.com/news7/192207.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈App設(shè)計、網(wǎng)站維護(hù)域名注冊、搜索引擎優(yōu)化、電子商務(wù)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營