2009-10-12 16:26
這樣的登錄界面可用在網(wǎng)站、桌面軟件、Web軟件等上面，你可以根據(jù)自己的需求改變界面配色。好的，先看看界面最終設計的效果：
1、創(chuàng)建登錄界面的背景
在Photoshop中，選擇“圓角矩形工具”，設置半徑為10px。將前景色設置為#aeaeae。
然后繪制如下的矩形框。尺寸大小取決于你自己。
下面為這個登錄背景框添加圖層樣式：
透明度為 40%
添加陰影:
漸變疊加：從黑到白，具體參數(shù)如下:
這時背景框的效果如下：
2、創(chuàng)建頂部的條形裝飾條
這是教程中最難部分，請仔細閱讀！
首先設置前景色為#51a5c5，選擇“圓角矩形工具”，設置半徑為10px
繪制如下形狀：
復制這個圖層（快捷鍵CTRL+J），在其中一個圖層上右鍵點擊選擇“柵格化圖層”
使用“矩形選擇工具”，在被柵格化的圖層上選擇一個矩形選項，如下圖，然后填充以#51a5c5顏色
在圓角矩形形狀圖層的縮略圖上按住鍵盤CTRL，然后點擊該圖層，出現(xiàn)圓角矩形選擇框，然后選擇“矩形選擇工具”，將選擇框向下移動位置，如下：
按下鍵盤delete 鍵刪除，然后取消選擇(CTRL+d),現(xiàn)在效果如下：
選擇原來的圓角矩形形狀圖層，填充以#091e27顏色，并柵格化。移動位置如下：
選擇“矩形選擇工具”，進行如下選擇：
分別在各個圖層上進行刪除，結(jié)果如下：
新建立圖層，選擇矩形選擇工具，進行如下選擇，并填充以 #51a5c5顏色。
復制前面的圖層，移動到右邊，然后進行鏡像。鏡像的操作菜單是 "Edit -> Transform -> Flip Horizontal."，最后效果如下：
好了，下面我們對這條彩帶添加漸變和投影效果。
3、為彩帶添加樣式
選擇彩帶的中間那個條的圖層，添加如下圖層樣式：
投影:
漸變疊加:
在彩帶的左邊和右邊的部分上，應用相同的漸變效果。但無陰影。結(jié)果如下：
4、彩帶上添加文字
字體顏色為白色，字體大小為12pt，字體為Arial bold。
復制該圖層，讓該圖層位于原來文字圖層的下面（CTRL+[），將該圖層填充為#478fab色，用鍵盤上的向上方向鍵，移動一個像素。結(jié)果如下：
5、底部背景和描邊
設置前景色為 #478fab，選擇矩形選擇工具，如下進行選擇，填充以前景色（ALT+Backspace）
取消選擇。在主背景圖層上，按下CTRL鍵盤，并用鼠標點擊圖層，會選擇該圖層。然后用CTRL+Shift+I反向選擇。然后選擇藍色底部圖層，按鍵盤刪除鍵盤，刪除。最后取消選擇。
結(jié)果如下：
現(xiàn)在我們對底部背景進行漸變效果：
漸變疊加:
為主體添加白色描邊。在主背景圖層列表項目上， CTRL+click，選中一個和主背景圖層一樣形狀的選擇矩形。然后新建立一個圖層，進行描邊操作Edit->Stroke：
為描邊圖層添加遮罩，點擊“添加圖層遮罩”
使用漸變工具，設置為“前景到透明“.參照一下參數(shù).
按下鍵盤Shift鍵，從底到上，然后在從上到下，進行漸變。這時描邊圖層的上面和下面都會變成漸隱效果，只有中間可見。
最終效果如下：
現(xiàn)在在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），調(diào)整透明度為10%.
選擇多邊形工具，在按鈕上繪制一個小三角形，填充為8a8a8a。
選擇文本工具，字體為 Arial 14pt Regular, aa = Sharp，輸入”登錄“，字體顏色為#7d7d7d.
7、 Logo 和白色光影
添加一個你現(xiàn)成的logo。
前景色設置為白色，選擇筆刷工具 Brush Tool (b)，筆刷使用Airbrush Soft Round 300px，新建圖層，在Logo圖層下，繪制筆刷。
8、創(chuàng)建 文本框
矩形選擇工具，填充為白色 #ffffff
取消選擇應用圖層樣式。
內(nèi)部陰影:
漸變疊加從黑到白:
描邊:
選擇文字工具，字體為Arial 12pt Bold, aa = None ，輸入”用戶名 密碼“，顏色#478fab.
復制文字和輸入框，向下移動10px。
結(jié)束，最終效果如下：
接下來我們對前面設計的界面用HTML/CSS進行實現(xiàn)（但不實現(xiàn)登陸功能）。
你可以點這里看看最終實現(xiàn)效果，試著用鼠標懸停在輸入框、登陸按鈕上看看效果：
http://www.blogfullbliss.com/images/stories/tutorials/logintut2/login.htm1、思考和計劃
為了用HTML/CSS實現(xiàn)前面的界面設計，首先當然要花許多時間思考，并做好實現(xiàn)計劃。對于一些大的項目這往往要花點時間。不過對于本次的界面比較簡單。所以不需要太多思考。
2、切圖
對前面設計的PS界面進行圖片切割。如何切割將會大大較大影響HTML編碼。切割圖片時，要基于前面做的思考和計劃。不過有時也只有進入HTML編碼后，才能回過頭來進行更合理的切割。我們這次切圖如下：
3、建立開發(fā)環(huán)境
進行開發(fā)，可選擇開發(fā)工具很多，如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標簽，設置全局的文本樣式。另外設計鏈接的常態(tài)、已被訪問、鼠標懸停的樣式。
背景框的實現(xiàn)
背景框是界面的主體部分。login.htm中背景框的代碼是：
<div class="wrapper"></div>
然后在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，剛好是留給頂部的彩條的高度 */
}
這是效果如下：
頂部彩條
頂部彩色橫條浮在背景框之上，這樣實現(xiàn)了背景圖重疊。HTML代碼如下：
<div class="ribbon">Login to your account</div>
<div class="wrapper">......
注意這里彩條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之內(nèi)添加logo的HTML標簽：
<div class="wrapper">
<div class="logo"></div>
在login.css文件中位該Logo添加CSS樣式：
div.logo{
background:url(images/logo.png) no-repeat;
width:330px;
height:115px;
}
這時效果如下：
以上完成了登錄的背景部分，下面完成登陸部分（即輸入框和登錄按鈕）
登陸部分，為了方面編碼和組織，分成了兩個部分：登陸輸入部分、登陸按鈕部分。
登陸輸入框部分
在HTML代碼中，將整個輸入部分用loginwrapper這個div包裹?。?div style="height:15px;">
這里是一個完整的圖片。也是說對輸入框的兩個狀態(tài)的背景圖，切入到一個圖片中。在前面的CSS樣式中，在不同的鼠標操作的時候，設置變化背景圖片的position位置。一次性加載所需的輸入框各個狀態(tài)背景圖，加快了效率。
