这样的登录界面可用在网站、桌面软件、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代码如下：
注意这里彩条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包裹住：
接着为以上的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代码如下：
我们将整个底部区域放在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技术。
最终实现完成。效果如下：
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
