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

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

大家好,又见面了,我是你们的朋友全栈君。

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

实例:

下面通过一个简单的登陆页面PSD设计稿来演示转化为HTML页面的全部过程,PSD设计图如下:

128094974_1_20180324120304457

实现步骤如下:

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”以外的所有图层,如下图所示:

128094974_2_20180324120304785

然后使用“切片选择工具”选择背景图,点击“文件/存储为Web所用格式”或使用快捷键(ALT +shift+Ctrl + S),并选择图片保存格式、大小等信息,把背景图保存为文件名background.jpg。

最后把background.jpg导入img文件夹。

②切割登录框背景图

返回PS,隐藏除“loginbtn”以外的所有图层,如下图所示:

128094974_3_2018032412030535

接着新建参考线,包围登录框背景图区域;然后使用切片工具,移动鼠标选中图片区域,并把图片存储为Web所用格式,图片名称为longinbg.png。这时一定要注意:图片预设格式要为PNG,因为该图片背景要透明,如果使用JPG格式,背景色为白色,实现不了想要的效果。

128094974_4_20180324120305128

最后把longinbg.png导入img文件夹。

③切割登陆按钮

返回PS,隐藏除“loginelem和loginbg”以外的所有图层,如下图所示:

128094974_5_20180324120305191

接着新建参考线,包围登陆按钮;然后使用切片工具,移动鼠标选中图片区域,并把图片存储为Web所用格式,图片名称为btnlogin.png。这时一定要注意:图片预设格式要为PNG,因为该图片背景要透明,如果使用JPG格式,背景色为白色,实现不了想要的效果。

128094974_6_20180324120305285

最后把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、不断调试,调整细节,达到设计稿效果

最终效果图如下:

128094974_7_20180324120305332

参考链接:

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132330.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 特征选择的几种方法[通俗易懂]

    目录1过滤法(Filter)1.1方差选择法1.2相关系数法1.3卡方检验1.4互信息法1.5relief算法2包裹法(Wrapper)2.1递归特征消除法2.2特征干扰法3嵌入法(Embedded)3.1基于惩罚项的特征选择法3.2基于树模型的特征选择法4特征选择方法的优…

  • 系统运维面试题

    系统运维面试题1.什么是运维?什么是游戏运维?1)运维是指大型组织已经建立好的网络软硬件的维护,就是要保证业务的上线与运作的正常,在他运转的过程中,对他进行维护,他集合了网络、系统、数据库、开发、安全、监控于一身的技术,运维又包括很多种,有DBA运维、网站运维、虚拟化运维、监控运维、游戏运维等等2)游戏运维又有分工,分为开发运维、应用运维(业务运维)和系统运维开发运维:是给应用运维开发运维工具和运维平台的应用运维:是给业务上线、维护和做故障排除的,用开发运维开发出来的工具给业务上线、维护、做故障

  • 菜鸟浅谈——web安全测试[通俗易懂]

    菜鸟浅谈——web安全测试[通俗易懂]本文仅为小白了解安全测试提供帮助一:安全测试注意事项1)要注意白帽子与黑客之间的区别2)在挖漏洞挣外快时,注意不要使用安全扫描或暴力激活成功教程软件对上线网站进行扫描或攻击。不要对上线网站造成破坏,不要去获取网站的数据库信息等。否则等待的不是money,而是牢狱啦~~二:web介绍1)worldwideweb万维网,也被叫做www(3w),非常普遍的互联网应用,每天都有数以亿万…

  • java HashTable和HashMap的区别详解「建议收藏」

    java HashTable和HashMap的区别详解「建议收藏」一、HashTable1、HashTable是线程安全的,查看源码得知方法使用了同步锁synchronized,如下所示:2、key值不允许为null,如果插入key为null,就会报null指针异常错误,如下所示:注意:key为null,就没有hashcode,无法计算hash值二、HashMap1、HashMap非线程安全常…

  • SeasLog 与 monolog 日志系统的区别,SeasLog安装步骤[通俗易懂]

    SeasLog 与 monolog 日志系统的区别,SeasLog安装步骤

  • deviceiocontrol函数 usb_recursive函数

    deviceiocontrol函数 usb_recursive函数Q在NT/2000/XP中,我想用VC编写应用程序访问硬件设备,如获取磁盘参数、读写绝对扇区数据、测试光驱实际速度等,该从哪里入手呢?A在NT/2000/XP中,应用程序可以通过API函数DeviceIoControl来实现对设备的访问—获取信息,发送命令,交换数据等。利用该接口函数向指定的设备驱动发送正确的控制码及数据,然后分析它的响应,就可以达到我们的目的。DeviceIoCont

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号