萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Photoshop教程 >> ps入門教程 >> PS教你繪制一個WEB登陸框

PS教你繪制一個WEB登陸框

PS教你繪制一個WEB登陸框 三聯

   1、新建一個文檔,這裡我用的是400*300像素,填充一個#d0c0be的顏色填充調整層。

26bg201511161

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

25bg201511161

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

22bg201511161

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

24bg201511161

  5、為這個圓角矩形添加一個圖層樣式。這裡,我添加了描邊、內陰影以及投影。

23bg201511161
21bg201511161
20bg201511161
19bg201511161

  6、下面,復制一層這個圓角矩形,按照構思, 我們將用第一個圓角矩形來當作輸入用戶名 的框框,復制來的這一個圓角矩形,我們下 移一定的像素,用來當作輸入密碼的框框。

18bg201511161

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

17bg201511161
15bg201511161
16bg201511161
14bg201511161
13bg201511161
12bg201511161
11bg201511161

  8、添加文本,會員登陸,文本顏色設置為白色#ffffff,並為其添加一個圖層樣式,這裡我添加了描邊以及投影。

10bg201511161
9bg201511161
8bg201511161

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

7bg201511161
6bg201511161
5bg201511161

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

4bg201511161
3bg201511161

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

2bg201511161

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

1bg201511161
copyright © 萬盛學電腦網 all rights reserved