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

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

最終效果：

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

步驟一：

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

步驟二：

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

步驟三：

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

步驟四：

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

步驟五：

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

步驟六：

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

步驟七：

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

步驟八：

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

步驟九：

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

步驟十：

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

步驟十一：

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

步驟十二：

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

步驟十三：

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

步驟十四：

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

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

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

標(biāo)題名稱：手把手教你設(shè)計(jì)控制按鍵UI
文章路徑：http://www.muchs.cn/news7/192207.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、App設(shè)計(jì)、網(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)