大家好，又见面了，我是你们的朋友全栈君。
切图的目的是把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代码如下：
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
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代码如下：
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
用户名：
@qq.com
@163.com
@126.com
@gmail.com
密码：
验证码：
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
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、不断调试，调整细节，达到设计稿效果
最终效果图如下：
参考链接：
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/132330.html原文链接：https://javaforall.net
