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

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

实例:

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

设计图.png

实现步骤如下:

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

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

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

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




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE 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”以外的所有图层,如下图所示:

1.png

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

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

②切割登录框背景图

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

2.png

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

3.png

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

③切割登陆按钮

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

4.png

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

5.png

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

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

给body添加背景图,并使其填充页面,CSS代码如下:

1
2
3
4
body {
     background url (img/background.jpg)  no-repeat  0  0 ;
     background- size 100% ;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
#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代码如下:

1
2
3
4
5
.line {
     width : 100%
     height 40px ;
     line-height 40px ;
}

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

添加的HTML代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< 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代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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代码

1
2
3
4
<!--登录按钮-->
< div  class = "line center" >
     < a  id = "loginbtn"  href = "#" ></ a >   
</ div >

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
#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、不断调试,调整细节,达到设计稿效果

最终效果图如下:

效果图.png



参考链接:

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

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值