在網頁設計中會經常用到Photoshop來制作網頁的布局.那么在今天將和童學們一起來學習一下用Photoshop來制作出一個即簡單又非常時尚的登陸框.

先來看最終效果吧.

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

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

3.雙擊矩形所在的圖層,設置圖層樣式,按下面的數據設置.

顯示的效果:

4.現在我們給矩形的外邊框添加發光的效果.

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

添加圖層樣式,設置如下圖:

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

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

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

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

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

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

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

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

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

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

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

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