如何查询个人财产:一个登录界面的PS设计和HTML/CSS实现

2009-10-12 16:26
这样的登录界面可用在网站、桌面软件、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进行实现（但不实现登陆功能）。
你可以点这里看看最终实现效果，试着用鼠标悬停在输入框、登陆按钮上看看效果：
http://www.blogfullbliss.com/images/stories/tutorials/logintut2/login.htm
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代码如下：