ps設(shè)計網(wǎng)頁標(biāo)簽式按鈕

2022-12-26 14:20:54 來源/作者: / 己有:6人學(xué)習(xí)過

標(biāo)簽式按鈕常常用在附屬導(dǎo)航中,線條非常漂亮,效果圖如下:

Photoshop設(shè)計立體質(zhì)感的標(biāo)簽式按鈕,PS教程,16xx8.com教程網(wǎng)

下載 16xx8教程素材

下面是具體實現(xiàn)步驟:

一、Ctrl+N新建一個文檔,580像素寬,290像素高,白色背景,其他選項默認(rèn)。給前景色選擇一種灰色,我這里用的顏色是#898989,使用Alt+Delete鍵給背景圖層填充此顏色。然后新建一個圖層,選擇圓角矩形工具(U),工具欄上選擇路徑屬性,半徑10個像素,在圖層中畫出路徑形狀,如下圖:

Photoshop設(shè)計立體質(zhì)感的標(biāo)簽式按鈕,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計立體質(zhì)感的標(biāo)簽式按鈕,PS教程,16xx8.com教程網(wǎng)

二、按Ctrl+Enter鍵將路徑轉(zhuǎn)化為選區(qū),選擇一種顏色填充。不要取消選區(qū),再新建一個圖層,Ctrl+i反選選區(qū),選擇矩形選框工具(M),工具屬性選擇”與選區(qū)交叉”,框選出圓角矩形選區(qū)的左下角,填充為和圓角矩形相同的顏色,Ctrl+D取消選區(qū),這樣我們就得到了一個下圖中所展示的形狀,這個形狀將幫助我們來實現(xiàn)標(biāo)簽式按鈕的效果。

如下圖:

Photoshop設(shè)計立體質(zhì)感的標(biāo)簽式按鈕,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計立體質(zhì)感的標(biāo)簽式按鈕,PS教程,16xx8.com教程網(wǎng)

三、使用移動工具(V)將做好的轉(zhuǎn)角移動到圓角矩形的右邊,按照垂直方向和水平方向拼接好,這里你可以將文檔放大,并使用參考線來仔細(xì)的對齊。Ctrl+J將轉(zhuǎn)角圖層再復(fù)制一層,Ctrl+T自由變換,將圖層水平翻轉(zhuǎn),放到矩形的左下角拼合好。按住Ctrl鍵將圓角矩形和左右兩邊的的轉(zhuǎn)角圖層都選擇上,按下Ctrl+E合并三個圖層。

Photoshop設(shè)計立體質(zhì)感的標(biāo)簽式按鈕,PS教程,16xx8.com教程網(wǎng)

四、使用放大鏡工具將文檔放大,用矩形選區(qū)工具(M)框選出按鈕下方多余的部分,利用方向鍵仔細(xì)調(diào)整位置,將多余的部分刪除掉,然后按下Ctrl+D取消選區(qū)。這樣標(biāo)簽式按鈕的形狀就已經(jīng)完成了。

Photoshop設(shè)計立體質(zhì)感的標(biāo)簽式按鈕,PS教程,16xx8.com教程網(wǎng)

五、最后給按鈕根據(jù)需要添加質(zhì)感就行了。這里我做了四種樣式的標(biāo)簽按鈕,供大家下載。

Photoshop設(shè)計立體質(zhì)感的標(biāo)簽式按鈕,PS教程,16xx8.com教程網(wǎng)