Photoshop教程:設(shè)計簡單又酷的登陸框界面
在網(wǎng)頁設(shè)計中會經(jīng)常用到Photoshop來制作網(wǎng)頁的布局.那么在今天將和童學(xué)們一起來學(xué)習(xí)一下用Photoshop來制作出一個即簡單又非常時尚的登陸框.
先來看最終效果吧.
1.打開photoshop軟件,按ctrl+N,新建一個大小為:600x400px的文檔,并填充灰色.
2.在工具欄上選擇"圓角矩形"并在其選擇欄上設(shè)置圓角:4px,然后在畫布上畫一個大小為280x180px(注意:在選項欄的選中按扭)
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).
再添加上一些文字,那么一個超酷又時尚的登陸框就完成了.
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- Photoshop制作網(wǎng)站導(dǎo)航圖
- 用ps制作豎列導(dǎo)航
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- Photoshop制作網(wǎng)頁搜索條
- 界面設(shè)計，設(shè)計音樂播放器界面圖片
- PS教程:設(shè)計導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- Photoshop教程:像素化細(xì)節(jié)設(shè)計技巧
- Photoshop設(shè)計網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- banner教程，用ps制作960*90的廣告圖片
- 陰影效果，教你制作各類陰影教程
