1、首先,在ps中打开一张要处理的图片。
3、接着,用切片工具把图片分成4份。
4、之后,再依次点击左上角的文件——存储为web所用格式。
5、在d出的窗口中点击存储的按钮。
6、最后,d出的保存窗口中把格式选择为HTML图像,再点击保存按钮即可。
一.想要将psd转为html,首先需要具备几个条件:
重点1就是会用切图工具,如果切图工具都不会用,那么就需要先学习制作图片的工具,例如photoshop,fireworks...等
重点2会用代码编写工具,有编写html,css,js等代码的工具
重点3会页面布局的基本代码,如果不会代码,需要先学习代码,会基本的html代码,css样式代码,如果页面稍微复杂点,还需要会javascript
二.切图以photoshop工具的切片工具切图为例,进行切图的展示(说明:切图的方法有很多,像选择选区然后ctrl+c然后ctrl+n然后ctrl+v,就可以开始保存,此为最简单的切图方法)
1.将所需的PSD文件打开
2.点击打开按钮,选择需要打开的文件
3.文件打开以后,选择工具栏的切片工具,根据需要进行图片的分割,选择切片工具,然后在psd页面上拉动选择位置,就可完成一张图的切片
4.将切图保存
5.选择保存的格式
三.根据psd设计图,进行html代码的书写
示例图:如
总结:按照步骤完成的话,最基本的简单页面,就可以实现出来了。
楼上这说的,从没见过哪个软件可以生成DIV+CSS的- -将网页效果图切片成为HTML只用PS或者firework的切片工具将作网页时需要用到的图片切出再导成web格式,LZ可以先了解下网页的布局以及做网页时需要用到哪些图片,切出来的HTML是用table将每个图片装起来而组成的网页,可更改性低,建议LZ先用DIV+CSS写出网页大致框架,然后再把切出的图片填进去。
具体的转换步骤是:
切片工具切图--------文件----储存为web和设备所用格式---- 点击储存后在格式化一栏选择HTML和图像
搞定~,很简单的。LZ只需要了解切图工具的用法就可以了。
PS:图片一般储存为PNG格式。一个网页最少需要两次切图,先考虑好自己网页布局和需要的图片再切片导出,可以大大提高工作效率哦~
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)