根据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代码如下:
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.com option > < option >@163.com option > < option >@126.com option > < option >@gmail.com option >
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、不断调试,调整细节,达到设计稿效果
最终效果图如下:
交易额: 1166.99万元
无 |山东省 |青岛市 |城阳区
交易额: 1067.69万元
个人 |山东省 |青岛市 |城阳区
交易额: 381.16万元
工作室 |广东省 |惠州市 |惠城区
交易额: 249.47万元
公司 |上海市 |上海市 |黄浦区
成为一品威客服务商,百万订单等您来有奖注册中
价格是多少?怎样找到合适的人才?
¥200 已有0人投标
¥100 已有8人投标
¥1000 已有1人投标
¥100 已有0人投标
¥150 已有2人投标
¥1000 已有2人投标
¥300 已有0人投标
¥100 已有0人投标