loading请求处理中...
当前位置：首页新闻中心威客攻略设计根据PSD登陆页面设计稿切图制作HTML网页全过程

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

2021-12-02 04:34:37 阅读 10635次 标签： 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 {
    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"/>
    <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{
    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;
}
s elect{
    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、不断调试，调整细节，达到设计稿效果

最终效果图如下：


下一篇： 微笑云朵抱枕靠垫 情侣抱枕... 简约风墨鱼形象logo设计请欣赏... 上一篇：

设计推荐专题 更多>

珠宝设计专业 餐馆设计 园林规划设计 药品包装设计 会议室设计 台灯设计 网站制作设计 逆向设计 阁楼楼梯设计 茶馆设计 新房装修设计 公司商标设计 手机网站设计 店名设计 房间装修设计 营销型网站策划 个性字体设计

设计公司推荐

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

热门设计标签 更多>

广告设计有限公司 pop与dm广告设计 广告设计制作专业 关于广告设计 什么叫广告设计 广告设计教程 广告设计专业 包装设计的公司 一套公司VI设计多少钱 公司的vi设计 vi视觉设计公司 VI公司设计 企业VI视觉设计公司 在线公司logo设计 高端logo设计公司 公司的logo设计 产品创新设计 产品开发设计 封面设计教程 广告设计流程
留言（） 展开评论

快速发任务

价格是多少？怎样找到合适的人才？

官方顾问免费为您解答

 
相关任务
DESIGN TASK 更多
AI短视频信息流的制作

￥100 已有2人投标

AI制作MG风格动画，需求量大

￥5000 已有1人投标

工厂标准工序操作视频课件拍摄及制作

￥5000 已有0人投标

变压器3D模型制作

￥6000 已有3人投标

视频号里的推广视频制作1-3分钟

￥1000 已有2人投标

大量常规宣传片制作

￥5000 已有2人投标

视频剪辑制作

￥100 已有3人投标

数学视频的制作

￥1000 已有1人投标

相关攻略
RELATED STRATEGY 更多
1在动态网页制作中有哪些注意事项?...
2做好APP首页设计的目的是什么?...
3什么是海报设计 海报设计的设计流程...
4分享5个视觉惊艳的网页设计思路...
5网页制作需要怎样的预先准备？...
6PS绘画色彩叠加技巧
7网页棋牌游戏如何设计制作
8企业专题片制作设计
9电商APP登录注册界面设计
10APP引导页分类设计技巧
设计人才
design talent 更多
设计标签
金属包装
自由职业
智能网
数据格式
开发阶段
GIF
时需
非常
古典风格
飘窗设计