ps網(wǎng)頁(yè)開(kāi)關(guān)按鈕

2022-12-26 14:20:08 來(lái)源/作者: / 己有:58人學(xué)習(xí)過(guò)

如果你是設(shè)計(jì)師,那么創(chuàng)建界面元素是非常重要的技能。本次教程中,我們會(huì)創(chuàng)建一個(gè)簡(jiǎn)單漂亮的切換開(kāi)關(guān)按鈕。切換開(kāi)關(guān)經(jīng)按鈕常用于某項(xiàng)功能的啟用與關(guān)閉,他們經(jīng)常出現(xiàn)在UI設(shè)計(jì)與網(wǎng)頁(yè)應(yīng)用設(shè)計(jì)中,好了,來(lái)開(kāi)始我們的教程吧。

先看看效果圖

Photoshop繪制立體質(zhì)感的網(wǎng)頁(yè)開(kāi)關(guān)按鈕,PS教程,16xx8.com教程網(wǎng)

下面是教程

第1步:

打開(kāi)Photoshop,Ctrl+N新建一個(gè)文檔,尺寸選擇600×500px。

Photoshop繪制立體質(zhì)感的網(wǎng)頁(yè)開(kāi)關(guān)按鈕,PS教程,16xx8.com教程網(wǎng)

第2步:

按住Alt鍵雙擊背景圖層,將其轉(zhuǎn)換為普通圖層。再次雙擊,打開(kāi)圖層樣式面板,為其添加由#f6fcff到#bbddff的徑向漸變。

Photoshop繪制立體質(zhì)感的網(wǎng)頁(yè)開(kāi)關(guān)按鈕,PS教程,16xx8.com教程網(wǎng)

第3步:

利用圓角矩形工具在畫(huà)布中央創(chuàng)建一個(gè)半徑為50px的圓角矩形。顏色設(shè)置為 #aec24e。

Photoshop繪制立體質(zhì)感的網(wǎng)頁(yè)開(kāi)關(guān)按鈕,PS教程,16xx8.com教程網(wǎng)

第4步:

雙擊圓角矩形圖層,為其添加圖層樣式。

Photoshop繪制立體質(zhì)感的網(wǎng)頁(yè)開(kāi)關(guān)按鈕,PS教程,16xx8.com教程網(wǎng)

Photoshop繪制立體質(zhì)感的網(wǎng)頁(yè)開(kāi)關(guān)按鈕,PS教程,16xx8.com教程網(wǎng)

Photoshop繪制立體質(zhì)感的網(wǎng)頁(yè)開(kāi)關(guān)按鈕,PS教程,16xx8.com教程網(wǎng)

Photoshop繪制立體質(zhì)感的網(wǎng)頁(yè)開(kāi)關(guān)按鈕,PS教程,16xx8.com教程網(wǎng)