loading请求处理中...

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

2021-12-02 04:34:37 阅读 10625次 标签: ps制作海报ps广告设计 作者: a454466904

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

根据PSD登陆页面设计稿切图制作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>
 
    <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代码如下:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
#login {
        height203px;
    positionabsolute;
    marginauto;
    top0px;
    bottom0px;
    left0px;
    right0px;
    width285px;
    padding80px 70px 0 70px;
    backgroundurl(../img/loginbg.png) no-repeat 0 0;
}

给class为"line"的div布局,使在其中的输入框正确显示,CSS代码如下:

1
2
3
4
5
.line {
    width:100%
    height40px;
    line-height40px;
}

在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"/>
    <s elect class="input">
        <option>@qq.comoption>
        <option>@163.comoption>
        <option>@126.comoption>
        <option>@gmail.comoption>
    s elect>
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{
    height23px;
    line-height23px;
}
 
label {
    width70px;
    text-alignright;
    display: inline-block;
    *displayinline;
    /* IE6、7 block 元素 */
    *zoom: 1;
}
 
.input {
    bordernone;
    /*outline: none;*/
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding-left5px;
}
 
#uname {
    width100px;
}
 
#upwd {
    width200px;
}
 
#valid {
    width50px;
}
s elect{
    width95px;
}

在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 {
    width82px;
    height33px;
    backgroundurl(../img/btnlogin.png) no-repeat 0 0;
    display: inline-block;
    *displayinline;
    /* IE6、7 block 元素 */
    *zoom: 1;
}
.center{
    text-aligncenter;
    margin-top10px;
}

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

最终效果图如下:


设计公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

留言( 展开评论