如何把psd格式转为html,将psd转化为HTML网页详情讲解
什么是切图?就是将ui效果图转换成html页面的过程。
常用工具:
切图:photoshop...
编辑器:webstorm(或者sublime)...
压缩工具:tinypng(压缩图片)...
一般步骤:
拿到一张UI稿,首先判断这是一张PC端的还是移动端的;如果是PC端的,是否必须满足响应式,如果是移动端的,是按640还是750切图...
此处我们以移动端750为例:以一下这种图片为例
1.首先我们看到此图分为两个部分header与content
首先我们先从头部开始,标题居中,返回按钮居左,这种排版我们以定位的方式方式来实现:
达人榜榜
我们大致来写下样式
.header{
text-align:center;
width:100%;
height:45px;
line-height:45px;
background:#ff4e00;
color:#fff;
}
.header i{
position: absolute;
left:15px;
width:45px;
height:45px;
}
2.内容区content
内容区为一横行排列下来,我们可以用
此处我们以第一种为例,再来观察psd,每个li又分成了3个部分,图片去,信息区,操作区,当然也可以按照2个部分,图片区,信息区+操作区
此处我们按照2个部分为例
杨洋
签名签名签名签名签名签名
粉丝100关注200
大致样式:
.list{
background-color: #fff;
width: 100%;
}
.list>li {
position: relative;
margin-left: 15px;
display: -webkit-box;
}
.list-img{
width: 40px;
height: 40px;
margin:10px 10px 10px 0;
background:url(../img/bg.png);
border-radius:100%;
}
.list-info{
-webkit-box-flex: 1;
padding-top: 10px;
padding-bottom: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
padding-right: 15px;
}
.attention{
position:absolute;
right:15px;
height:30px;
line-height:30px;
text-align:center;
color:#fff;
background:#ff4e00;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
除了这种方式,还有按百分比来写,这里不做阐述
注意点:
1、代码规范:
4个空格缩进;各个模块注释清晰;
css放在头部引入,JavaScript在尾部引入;
尽量避免在html标签中写style样式
2、命名规范:
文件命名:以中划线连接或者驼峰式均可,如group-detail.html groupDetail.html
class命名:以中划线连接,如.item-img,尽量简洁,尽量不使用与业务相关的命名,方便复用
使用两个中划线表示特殊化,如item-img–small 表示在.item-img的基础上特殊化
状态类直接使用单词,如.active, .checked,.disabled
图标以icon-为前缀(字体图标采用.icon-font .i-name方式命名)
模块采用关键词命名,如.slide,.modal,.tips, .tabs
方法命名:驼峰式,如:getUserInfo
3、图片处理:
合并小图片,使用雪碧图或者使用IconFont;
选择合适格式和大小的图片,做到压缩;
如何把psd格式转为html,将psd转化为HTML网页详情讲解相关推荐
- ps保存psd后图层全没了_PS画图后保存PSD格式,然后就打不开了
公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:PS画图后保存PSD格式,然后就打不开了回答:这个应该是PSD与版本不兼容,要下一个比他高的版本,你在保存的时候有一个勾要选的,你没 ...
- php格式转为jpg格式,psd格式怎么转换成jpg格式
psd格式转换成jpg格式的方法:首先打开photoshop:然后导入需要转换格式的psd文件:最后点击[存储为]选项,将格式修改为jpg,点击[保存]即可. 现在的图片格式有很多,有些图片是需要我们 ...
- 15套漂亮的 PSD 格式的图标,不一样的视觉效果
在 Web 设计领域,图标发挥非常重要的作用,因为美丽的和创造性的图标集可以很容易地使网页设计更有吸引力.网页设计设计师专注于每一个领域的设计,包括颜色选择.图标.创造力.混色等.正确的选择图标可以使 ...
- 精品素材 – 24款扁平风格 PSD 格式图标免费下载
这篇文章向大家分享优秀设计师 Jan Dvořák 设计的24款扁平风格 PSD 格式图标,可以免费下载使用.扁平化设计最近很流行,推荐之前向大家分享机几篇文章:<25个最佳的扁平化网页设计案例 ...
- 24个扁平风格图标的PSD格式免费下载
包括所有24个PSD格式的图标,包含所有层,易于定制.他们看起来非常漂亮.最近Flat风格比较流行.还有其它一些相关资源 Flat Design jQuery Mobile Theme, Flat D ...
- PSD 格式文件除了 PS ,还能用什么软件打开?
有人问:"除了 Photoshop,还有哪些软件能打开 PSD 格式文件呢?"当我看到这个问题时,我立刻理解了他的烦恼.因为有段时间,我的电脑里没有安装 Photoshop,但有一 ...
- PSD格式怎么转换成JPG?这几种方法轻易转换图片格式
PSD格式图片通常比较大,转换成JPG格式可以大大减小文件大小,从而节省存储空间和下载时间.此外,大多数图像查看器和编辑器都支持JPG格式,因此转换成JPG格式可以方便地共享和传输图片.如果您需要将图 ...
- psd格式怎么转换成jpg?
psd格式怎么转换成jpg?用PSD格式保存图像时,图像不经过压缩,当图层较多时,会占用大量硬盘空间.当PSD转换为另一种文件格式时,所有图层合并为一个图层,所需的存储空间变得更小.因此,当Photo ...
- 如何将jpg图片转换为psd格式?教你3招巨简单
分享3个简单高效的JPG图片转PSD格式的方法,其中一个还支持批量格式转换,并且生成的图片还无需下载,打开就能直接在PS中使用,其中一个还无需下载. 1.万能图片转换器 一个功能超丰富的图片格式转换工 ...
- 利用PS把多张psd格式的图片转换为一张PDF格式
最近为公司做了一版电子样册,所有图片都是包含多图层高清晰的psd格式,要做成一个PDF文件的电子样册,发给客户看,面对这些零散的图片,本来打算利用在线合成:在线网址 https://smallpdf. ...
最新文章
- 在人工智能时代,我们更需要理解自己的智能 | 艾伦脑科学研究所所长克里斯托夫·科赫STEP峰会演讲实录
- 皮一皮:据说金庸老爷子的凌波微步已被证实存在并已经广为流传...
- HBase性能优化方法总结(1):配置优化
- asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度
- 从架构到代码:软件开发最新趋势解析
- PL/SQL Developer中如何格式化SQL
- 《看聊天记录都学不会C语言?太菜了吧》(14)这么神奇?我写了20行代码竟然一行就可以搞定?
- [tp5] thinkPHP5-渲染模板的方式
- jdbc原子事务的实现
- 港中文等提出:开放世界实体分割
- 《哪吒》票房破31亿元 超越《药神》升至中国票房榜第七
- java jsp中文乱码怎么解决_如何解决JSP中文乱码问题
- 书城项目 软件可行性分析报告
- 《大连金州没有眼泪》
- P800刷英文WM6教程以及常见问题整理
- 基于Android的BMI指数运算
- dvdfab虚拟光驱使用教程
- scipy中的imread,imresize怎么用
- php 公众号验证回调方法_微信公众号运营的技巧和方法?
- SSM ==> 超市管理系统(mysql)