根据PSD登陆页面设计稿切图制作HTML网页全过程

切图的目的是把PSD设计稿转换为HTML页面。记得自己当时学习切图时，网上切图相关的文章是不少，但是大都是讲怎么使用切片工具把一张图片分割成多张图片，然后存储为Web使用格式，并且都比较简单和零碎，并不能满足我的要求。因此只能自己不断尝试，今天分享给大家“如何根据PSD设计稿通过PS切图和DIV+CSS布实现HTML页面”，希望能帮助到大家。

实例:

下面通过一个简单的登陆页面PSD设计稿来演示转化为HTML页面的全部过程，PSD设计图如下：

实现步骤如下：

1、分析PSD设计稿，思考页面整体大致结构和如何切割图片

根据PSD设计稿，可以看出登录页包括背景图和登陆框，其中登录框包括登录图标、输入框和登陆按钮。因此整体html结构即为一个div和其多个子元素div，子元素div用于添加输入框和按钮等；同时可以把设计稿分割成背景图、登录框背景图和登录按钮。

2、创建项目，编写整体结构HTML代码和整体CSS

使用前端开发工具或文本编辑器创建项目，项目名称login,包括css和img文件夹、index.html,其中css文件夹下包括login.css文件；ima用于存储切割的图片。现在在index.html文件中编写整体结构html代码，index.html代码如下：

< html >

    < head >
        < meta  charset = "utf-8" >
        < title >登陆 title >
        < link  rel = "stylesheet"  href = "css/logindialog.css"  />
    head >

    < body >

        < div  id = "login" >
            < div  class = "line" >
            div >

            < div  class = "line" >
            div >

            < div  class = "line" >
            div >

            < div  class = "line" >
            div >
        div >
    body >

html >

3、切割相应的图片，并导出。

PSD文件包含很多层，我们要把这些层或合并的层组切出来，然后添加到网页上，使用CSS进行布局，使页面效果达到设计稿的效果。

①切割背景图

首先使用PS打开PSD设计稿，隐藏除“bg和bg_texture”以外的所有图层，如下图所示：

然后使用“切片选择工具”选择背景图，点击“文件/存储为Web所用格式”或使用快捷键（ALT +shift+Ctrl + S），并选择图片保存格式、大小等信息，把背景图保存为文件名background.jpg。

最后把background.jpg导入img文件夹。

②切割登录框背景图

返回PS，隐藏除“loginbtn”以外的所有图层，如下图所示：

接着新建参考线，包围登录框背景图区域；然后使用切片工具，移动鼠标选中图片区域，并把图片存储为Web所用格式，图片名称为longinbg.png。这时一定要注意：图片预设格式要为PNG，因为该图片背景要透明，如果使用JPG格式，背景色为白色，实现不了想要的效果。

最后把longinbg.png导入img文件夹。

③切割登陆按钮

返回PS，隐藏除“loginelem和loginbg”以外的所有图层，如下图所示：

接着新建参考线，包围登陆按钮；然后使用切片工具，移动鼠标选中图片区域，并把图片存储为Web所用格式，图片名称为btnlogin.png。这时一定要注意：图片预设格式要为PNG，因为该图片背景要透明，如果使用JPG格式，背景色为白色，实现不了想要的效果。

最后把btnlogin.png导入img文件夹。

4、完善整体结构HTML代码和添加CSS样式

①给body添加背景图，并使其填充页面，CSS代码如下：

body {
    background :  url (img/background.jpg)  no-repeat  0  0 ;
    background- size :  100% ;
}

②给id为“#login”的div布局并添加背景图，CSS代码如下：

#login {
        height :  203px ;
    position :  absolute ;
    margin :  auto ;
    top :  0px ;
    bottom :  0px ;
    left :  0px ;
    right :  0px ;
    width :  285px ;
    padding :  80px  70px  0  70px ;
    background :  url (../img/loginbg.png)  no-repeat  0  0 ;
}

③给class为”line”的div布局，使在其中的输入框正确显示，CSS代码如下：

.line {
    width : 100%
    height :  40px ;
    line-height :  40px ;
}

④在class为“line”的div中分别添加用户名、密码和验证码输入框的HTML代码，并使用CSS布局，使其和设计稿效果一致。

添加的HTML代码如下:

< div  class = "line" >

    < label  for = "uname" >用户名： label >
    < input  type = "text"  id = "uname"  value = "admin"  required = "required"  class = "input" />
    < select  class = "input" >
        < option >@qq.com option >
        < option >@163.com option >
        < option >@126.com option >
        < option >@gmail.com option >
    select >
div >

< div  class = "line" >
    < label  for = "upwd" >密码： label >
    < input  type = "password"  id = "upwd"  value = "123444444"  required = "required"  class = "input"  />

div >

< div  class = "line" >
    < label  for = "valid" >验证码： label >
    < input  type = "text"  id = "valid"  value = "1234"  required = "required"  class = "input"  />
div >

CSS代码如下：

label,
.input{
    height :  23px ;
    line-height :  23px ;
}

label {
    width :  70px ;
    text-align :  right ;
    display : inline- block ;
    * display :  inline ;
    /* IE6、7 block 元素 */
    *zoom:  1 ;
}

.input {
    border :  none ;
    /*outline: none;*/
    -webkit-border-radius:  3px ;
    -moz-border-radius:  3px ;
    border-radius:  3px ;
    padding-left :  5px ;
}

#uname {
    width :  100px ;
}

#upwd {
    width :  200px ;
}

#valid {
    width :  50px ;
}
select{
    width :  95px ;
}

④在class为“line”的div中分别添加登录按钮的HTML代码，并使用CSS布局，使其和设计稿效果一致。

HTML代码

< div  class = "line center" >
    < a  id = "loginbtn"  href = "#" > a >
div >

CSS代码

#loginbtn {
    width :  82px ;
    height :  33px ;
    background :  url (../img/btnlogin.png)  no-repeat  0  0 ;
    display : inline- block ;
    * display :  inline ;
    /* IE6、7 block 元素 */
    *zoom:  1 ;
}
. center {
    text-align :  center ;
    margin-top :  10px ;
}

5、不断调试，调整细节，达到设计稿效果

最终效果图如下：

参考链接：

http://www.w3cfuns.com/article-609-1-1.html

http://www.uimaker.com/plus/view.php?aid=3379