這樣的登錄界面可用在網站、桌面軟件、Web軟件等上面，你可以根據自己的需求改變界面配色。好的，先看看界面最終設計的效果：

1、創建登錄界面的背景

在Photoshop中，選擇“圓角矩形工具”，設置半徑為10px。將前景色設置為#aeaeae。

然后繪制如下的矩形框。尺寸大小取決于你自己。

下面為這個登錄背景框添加圖層樣式：

透明度為 40%

添加陰影:

漸變疊加：從黑到白，具體參數如下:

這時背景框的效果如下：

2、創建頂部的條形裝飾條

這是教程中最難部分，請仔細閱讀！

首先設置前景色為#51a5c5，選擇“圓角矩形工具”，設置半徑為10px

繪制如下形狀：

復制這個圖層(快捷鍵CTRL+J)，在其中一個圖層上右鍵點擊選擇“柵格化圖層”

使用“矩形選擇工具”，在被柵格化的圖層上選擇一個矩形選項，如下圖，然后填充以#51a5c5顏色

在圓角矩形形狀圖層的縮略圖上按住鍵盤CTRL，然后點擊該圖層，出現圓角矩形選擇框，然后選擇“矩形選擇工具”，將選擇框向下移動位置，如下：

按下鍵盤delete 鍵刪除，然后取消選擇(CTRL+d),現在效果如下：

選擇原來的圓角矩形形狀圖層，填充以#091e27顏色，并柵格化。移動位置如下：

選擇“矩形選擇工具”，進行如下選擇：

分別在各個圖層上進行刪除，結果如下：

新建立圖層，選擇矩形選擇工具，進行如下選擇，并填充以?#51a5c5顏色。

復制前面的圖層，移動到右邊，然后進行鏡像。鏡像的操作菜單是 "Edit -> Transform -> Flip Horizontal."，最后效果如下：

好了，下面我們對這條彩帶添加漸變和投影效果。

3、為彩帶添加樣式

選擇彩帶的中間那個條的圖層，添加如下圖層樣式：

投影:

漸變疊加:

在彩帶的左邊和右邊的部分上，應用相同的漸變效果。但無陰影。結果如下：

4、彩帶上添加文字

字體顏色為白色，字體大小為12pt，字體為Arial bold。

復制該圖層，讓該圖層位于原來文字圖層的下面(CTRL+[)，將該圖層填充為#478fab色，用鍵盤上的向上方向鍵，移動一個像素。結果如下：

5、底部背景和描邊

設置前景色為#478fab，選擇矩形選擇工具，如下進行選擇，填充以前景色(ALT+Backspace)

取消選擇。在主背景圖層上，按下CTRL鍵盤，并用鼠標點擊圖層，會選擇該圖層。然后用CTRL+Shift+I反向選擇。然后選擇藍色底部圖層，按鍵盤刪除鍵盤，刪除。最后取消選擇。

結果如下：

現在我們對底部背景進行漸變效果：

漸變疊加:

為主體添加白色描邊。在主背景圖層列表項目上， CTRL+click，選中一個和主背景圖層一樣形狀的選擇矩形。然后新建立一個圖層，進行描邊操作Edit->Stroke：

為描邊圖層添加遮罩，點擊“添加圖層遮罩”

使用漸變工具，設置為“前景到透明“.參照一下參數.

按下鍵盤Shift鍵，從底到上，然后在從上到下，進行漸變。這時描邊圖層的上面和下面都會變成漸隱效果，只有中間可見。

最終效果如下：

現在在footer頂部繪制一條邊。使用?Pencil Tool (b)工具，用Hard Round 1 Pixel 筆刷樣式，按住鍵盤shift鍵，繪制一條直線。設置透明度為 30%.

6、登錄按鈕和底部的文本

對于底部文字，選擇字體Arial regular 11pt, 設置aa 為 sharp.顏色為#ffffff 輸入”忘記密碼 注冊新賬戶“。對于登錄按鈕，選擇圓角矩形工具，半徑為5px，繪制如下：

對按鈕添加以下樣式

投影:

Bevel and Emboss:

顏色漸變從黑到白:

新建一個圖層，選擇矩形工具，選擇如下，填充黑色?#000000

在該圖層上點右鍵，選擇”Create Clipping Mask“(ALT+CTRL+g)，調整透明度為10%.

選擇多邊形工具，在按鈕上繪制一個小三角形，填充為8a8a8a。

選擇文本工具，字體為?Arial 14pt Regular, aa = Sharp，輸入”登錄“，字體顏色為#7d7d7d.

7、Logo 和白色光影

添加一個你現成的logo。

前景色設置為白色，選擇筆刷工具?Brush Tool (b)，筆刷使用Airbrush Soft Round 300px，新建圖層，在Logo圖層下，繪制筆刷。

8、創建 文本框

矩形選擇工具，填充為白色?#ffffff

取消選擇應用圖層樣式。

內部陰影:

漸變疊加從黑到白:

描邊:

選擇文字工具，字體為Arial 12pt Bold, aa = None ，輸入”用戶名 密碼“，顏色#478fab.

復制文字和輸入框，向下移動10px。

結束，最終效果如下：

接下來我們對前面設計的界面用HTML/CSS進行實現(但不實現登陸功能)。

你可以點這里看看最終實現效果，試著用鼠標懸停在輸入框、登陸按鈕上看看效果：

1、思考和計劃

為了用HTML/CSS實現前面的界面設計，首先當然要花許多時間思考，并做好實現計劃。對于一些大的項目這往往要花點時間。不過對于本次的界面比較簡單。所以不需要太多思考。

2、切圖

對前面設計的PS界面進行圖片切割。如何切割將會大大較大影響HTML編碼。切割圖片時，要基于前面做的思考和計劃。不過有時也只有進入HTML編碼后，才能回過頭來進行更合理的切割。我們這次切圖如下：

3、建立開發環境

進行開發，可選擇開發工具很多，如Dreamveawer、Eclipse等等。我這里使用了AptanaStudio。我們在項目中建立 login.htm， login.css 和一個images文件夾：

4、編碼

編碼是最有價值，也是最讓人沮喪的部分工作。通常我在編碼后，使用Firefox進行測試頁面效果。

鏈接和文本格式

body{font-family: Helvetica,Arial,sans-serif;margin: 0px 0px 0px 0px;font-size: 14px;}a:link, a:visited{color:#ffffff;text-decoration:none;}a:hover{color:#95ddf9;}

以上CSS代碼中，我們通過body標簽，設置全局的文本樣式。另外設計鏈接的常態、已被訪問、鼠標懸停的樣式。

背景框的實現

背景框是界面的主體部分。login.htm中背景框的代碼是：

然后在login.css中設置該背景框CSS樣式：

div.wrapper{background-image:url(images/bg.gif); /* 背景圖 */background-repeat:no-repeat; /*不讓背景圖重復平鋪 */width:348px; /*背景圖的寬度 */height:384px; /* 背景圖的高度 */margin-left:4px; /*離左邊的margin，是留給頂部彩條左邊那個部分的 */padding-top:75px; /* 離頂部的padding，剛好是留給頂部的彩條的高度 */}

這是效果如下：

頂部彩條

頂部彩色橫條浮在背景框之上，這樣實現了背景圖重疊。HTML代碼如下：

Login to your account......

注意這里彩條ribbon的div是在wrapper之上。

為彩條添加以下的CSS代碼：

div.ribbon{background-image:url(images/ribbon.png); /* 彩條背景圖 */background-repeat:no-repeat; /* 圖片不重復平鋪 */width:358px; /* 圖片寬度 */height:45px; /* 圖片高度 */float:left; /* 將圖片float到左邊 */margin-top:25px; /*背景圖底部的margin */padding-left:25px; /*文字離左邊的padding*/padding-top:5px; /* 文字離頂部的padding */color:#ffffff; /* 文字顏色 */font-weight:bold; /*文字加粗 */}

這是效果如下：

添加Logo

在背景框div之內添加logo的HTML標簽：

在login.css文件中位該Logo添加CSS樣式：

div.logo{background:url(images/logo.png) no-repeat;?width:330px;height:115px;}

這時效果如下：

以上完成了登錄的背景部分，下面完成登陸部分(即輸入框和登錄按鈕)

登陸部分，為了方面編碼和組織，分成了兩個部分：登陸輸入部分、登陸按鈕部分。

登陸輸入框部分

在HTML代碼中，將整個輸入部分用loginwrapper這個div包裹住：

Username:Password:

接著為以上的HTML添加CSS樣式。

先對登錄輸入部分的整個外框添加樣式：

div.loginwrapper{margin-left:40px;}

然后根據設計，對文字和輸入框添加樣式：

input.textbox{background:url(images/text_field.png) 0px -25px;width:264px;height:20px;border:0px;padding-top:5px;padding-left:4px;}input.textbox:hover{background:url(images/text_field.png) 0px 0px;border:0px;}

以上CSS中，對輸入框的樣式，我們使用了CSS sprites這個CSS圖像合并技術。讓我們看看對輸入框的切圖是這樣的：

這里是一個完整的圖片。也是說對輸入框的兩個狀態的背景圖，切入到一個圖片中。在前面的CSS樣式中，在不同的鼠標操作的時候，設置變化背景圖片的position位置。一次性加載所需的輸入框各個狀態背景圖，加快了效率。

這時實現的效果如下：

登陸按鈕部分(底部部分)

登錄按鈕部分的HTML代碼如下：

Forgot my password.Register a new account.

我們將整個底部區域放在bottomwrapper這個div標簽中。為以上HTML添加樣式如下：

div.bottomwrapper{margin-left:40px;margin-top:50px;}

input.button{background:url(images/login_btn.png) 0px 0px;width:92px;height:31px;border:0px;float:right;margin-right:20px;margin-top:5px;}

input.button:hover{background:url(images/login_btn.png) 0px -31px;}

input.button:active{background:url(images/login_btn.png) 0px -62px;}

以上對登錄按鈕的樣式，也使用了CSS?Sprites技術。

最終實現完成。效果如下：

總結

以上是生活随笔為你收集整理的html写登录框中的字,一个登录界面的PS设计和HTML/CSS实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。