當(dāng)前位置: 首頁 > 攻略教程 > 軟件教程 > PS小技巧!新手繪制WEB登陸框也很輕松

PS小技巧!新手繪制WEB登陸框也很輕松

時(shí)間:2024-06-13 13:38:24 編輯:易網(wǎng)VIP游戲門戶 閱讀:0

最近有小伙伴問道小編利用PS怎么繪制WEB登陸框,今天小編給大家?guī)砹诵率掷L制WEB登陸框的具體步驟,我們一起去看看吧。

PS小技巧!新手繪制WEB登陸框也很輕松

1、新建一個(gè)文檔,這里我用的是400*300像素,填充一個(gè)#d0c0be的顏色填充調(diào)整層。

PS小技巧!新手繪制WEB登陸框也很輕松

2、選擇畫筆工具,使用圓角柔邊畫筆,設(shè)置前景色為#364e35,畫出如下圖中的形狀出來。

PS小技巧!新手繪制WEB登陸框也很輕松截圖

3、執(zhí)行“濾鏡—模糊—高斯模糊”,我用的數(shù)值是46.9像素,賦予這個(gè)顏色層一個(gè)模糊效果,跟我們的背景融合。

PS小技巧!新手繪制WEB登陸框也很輕松截圖

4、選擇圓角矩形工具,并設(shè)置前景色為#313c45,畫一個(gè)圓角矩形,并將圓角矩形的填充設(shè)置為11%

PS小技巧!新手繪制WEB登陸框也很輕松截圖

5、為這個(gè)圓角矩形添加一個(gè)圖層樣式。這里,我添加了描邊、內(nèi)陰影以及投影。

PS小技巧!新手繪制WEB登陸框也很輕松截圖PS小技巧!新手繪制WEB登陸框也很輕松截圖

6、下面,復(fù)制一層這個(gè)圓角矩形,按照構(gòu)思, 我們將用第一個(gè)圓角矩形來當(dāng)作輸入用戶名 的框框,復(fù)制來的這一個(gè)圓角矩形,我們下 移一定的像素,用來當(dāng)作輸入密碼的框框。

PS小技巧!新手繪制WEB登陸框也很輕松截圖

7、接下來,我們繼續(xù)復(fù)制一層這個(gè)圓角矩形, 依舊下移一定的像素,用來當(dāng)作確定的框框。右鍵清除掉圖層樣式,并將形狀填充顏色更改為#749e5e,添加一個(gè)圖層樣式。

PS小技巧!新手繪制WEB登陸框也很輕松截圖PS小技巧!新手繪制WEB登陸框也很輕松截圖PS小技巧!新手繪制WEB登陸框也很輕松截圖

8、添加文本,會(huì)員登陸,文本顏色設(shè)置為白色#ffffff,并為其添加一個(gè)圖層樣式,這里我添加了描邊以及投影。

PS小技巧!新手繪制WEB登陸框也很輕松截圖

9、添加最底下那個(gè)綠色框中的文本:確定。設(shè)置確定兩字的顏色為白色,并添加一個(gè)圖層樣式,這里我用了描邊和投影。

PS小技巧!新手繪制WEB登陸框也很輕松截圖

10、下面,我們添加用戶名及密碼兩個(gè)文本,同樣的設(shè)置文本的顏色為白色,添加一個(gè)圖層樣式,在這里,我設(shè)置了一個(gè)投影效果。

PS小技巧!新手繪制WEB登陸框也很輕松截圖

到這里,就算是完成了,來看看我們的效果吧!

PS小技巧!新手繪制WEB登陸框也很輕松截圖

我們的PSD里制作了不同顏色各異的效果,來看看吧!

PS小技巧!新手繪制WEB登陸框也很輕松截圖

上文就是繪制出WEB登陸框的具體步驟,你們都明白了嗎?