在網(wǎng)頁設(shè)計中會經(jīng)常用到Photoshop來制作網(wǎng)頁的布局.那么在今天將和童學(xué)們一起來學(xué)習(xí)一下用Photoshop來制作出一個即簡單又非常時尚的登陸框.

先來看最終效果吧.

1.打開photoshop軟件,按ctrl+N,新建一個大小為:600x400px的文檔,并填充灰色.

2.在工具欄上選擇"圓角矩形"并在其選擇欄上設(shè)置圓角:4px,然后在畫布上畫一個大小為280x180px(注意:在選項(xiàng)欄的選中按扭)

3.雙擊矩形所在的圖層,設(shè)置圖層樣式,按下面的數(shù)據(jù)設(shè)置.

顯示的效果:

4.現(xiàn)在我們給矩形的外邊框添加發(fā)光的效果.

在工具欄上選擇"矢量線條",畫一條直線,如圖如示.

添加圖層樣式,設(shè)置如下圖:

復(fù)制直線,然后移動到下面來,效果如下圖:

使用"矢量直線"工具,也在另外兩個邊框畫上直線,并設(shè)其樣式:

5.使用"圓角矩形"設(shè)半徑:7px.畫一個矩形來做輸入框.并給其添加樣式.

在這里我將給大家介紹如何給矩形添加一個新的陰影.

使用"圓角矩形"設(shè)半徑為:10px;畫一個大小和輸入框差不多的矩形,并填充黑色.最后把圖層拖到輸入框圖層的后面去.

現(xiàn)在我們給這個矩形添加一個濾鏡:濾鏡>模糊>高斯模糊;設(shè)模糊度在4px左右.最后在圖層面板上設(shè)"不透明度"為:30%.

6.新建一個圖層,使用"圓角矩形"繪制一個矩形來做"Submit"按扭.給其添加樣式:

7.使用"圓角矩形"繪制兩條直線并分別填充:#cccccc;#ffffff.

再次繪制一個"單選"選框,效果如下圖如示:

8.如果童學(xué)們看到這里,那么恭喜你,你快完成了.

在這里我們給這個登陸框添加一個"X"和"√"的圖標(biāo).

再添加上一些文字,那么一個超酷又時尚的登陸框就完成了.