根据PSD登陆页面设计稿切图制作HTML网页全过程
来源:互联网 发布:vb crc16校验源码 编辑:程序博客网 时间:2024/05/29 13:47
切图的目的是把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代码如下:
<!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”以外的所有图层,如下图所示:
然后使用“切片选择工具”选择背景图,点击“文件/存储为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代码如下:
body {
background
:
url
(img/background.jpg)
no-repeat
0
0
;
background-
size
:
100%
;
}
②给id为“#login”的div布局并添加背景图,CSS代码如下:
#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代码如下:
.line {
width
:
100%
height
:
40px
;
line-height
:
40px
;
}
④在class为“line”的div中分别添加用户名、密码和验证码输入框的HTML代码,并使用CSS布局,使其和设计稿效果一致。
添加的HTML代码如下:
<
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代码如下:
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代码
<!--登录按钮-->
<
div
class
=
"line center"
>
<
a
id
=
"loginbtn"
href
=
"#"
></
a
>
</
div
>
CSS代码
#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、不断调试,调整细节,达到设计稿效果
最终效果图如下:
参考链接:
http://www.w3cfuns.com/article-609-1-1.html
http://www.uimaker.com/plus/view.php?aid=3379
- 根据PSD登陆页面设计稿切图制作HTML网页全过程
- 根据PSD登陆页面设计稿切图制作HTML网页全过程
- PSD网页切图制作HTML全过程教程
- PSD网页切图制作HTML全过程教程
- HTML+CSS制作登陆网页
- 切图psd to html页面制作技术学习与总结
- 网页设计~登陆页面源代码
- html网页设计简单登陆界面
- HTML前端网页制作web页面入门
- 网页设计后PSD时代(Post-PSD Era)
- 从PSD到HTML,网页的实现
- psd页面切割成html技巧总结
- 学习个人网页制作全过程
- 登陆页面的制作
- 『网页制作』页面滚动HTML代码
- HTML 网页制作 网易邮箱登录页面 关键代码
- 99精美Login(signup)登陆表单设计PSD资源
- 初学html登陆页面
- 运行caffe自带的两个简单例子
- ps与信号
- NYOJ 261 玩转矩阵的C小加
- mnist test
- css练习之导航条
- 根据PSD登陆页面设计稿切图制作HTML网页全过程
- 删除链表中重复的结点
- tree命令安装与使用
- 私有变量的使用:从传值到传引用
- NCURSES程序设计之拼图游戏
- win10将Submit Text3添加到右键打开
- 学习笔记2
- 那些关于http的故事
- debounce与throttle实现与原理