实战利用PS制作网页从切图到网叶生成详细图解教-自学php网

来源：自学PHP网时间：2014-12-04 23:23 作者：阅读:次

[导读] 1.在PS中打开图片（也可在PS中设计好），如下图：此主题相关图片如下： 2.打开标尺线.如图：此主题相关图片如下：３.按住标尺，扡出参考线：此主题相关图片如下：４.选＂切片工...

1.在PS中打开图片（也可在PS中设计好），如下图：

实战PS制作网页从切图到网叶生成 - 江西红谷滩 - 江西红谷滩此主题相关图片如下：

2.打开标尺线.如图：

实战PS制作网页从切图到网叶生成 - 江西红谷滩 - 江西红谷滩此主题相关图片如下：

３.按住标尺，扡出参考线：

实战PS制作网页从切图到网叶生成 - 江西红谷滩 - 江西红谷滩此主题相关图片如下：

４.选＂切片工具＂，然后点＂基于参考线的切片＂：

实战PS制作网页从切图到网叶生成 - 江西红谷滩 - 江西红谷滩此主题相关图片如下：

５.然后存为WEB：

实战PS制作网页从切图到网叶生成 - 江西红谷滩 - 江西红谷滩此主题相关图片如下：

６.保存类型为：＂HTML和图像＂：

实战PS制作网页从切图到网叶生成 - 江西红谷滩 - 江西红谷滩此主题相关图片如下：

７之后可见保存的文件包括一个图片文件夹images和一个html文件：

实战PS制作网页从切图到网叶生成 - 江西红谷滩 - 江西红谷滩此主题相关图片如下：

８查看html文件源码：

９.找到表格宽度＂７７４＂：

实战PS制作网页从切图到网叶生成 - 江西红谷滩 - 江西红谷滩此主题相关图片如下：

１０打开DW，新建文件，设置页面属性，注意图中，要设为０：

实战PS制作网页从切图到网叶生成 - 江西红谷滩 - 江西红谷滩此主题相关图片如下：

１１.根据刚才在PS中拖出的参考线，在DW中插入一个７７４的表格，居中对齐.

实战PS制作网页从切图到网叶生成 - 江西红谷滩 - 江西红谷滩此主题相关图片如下：

１２好了，现在我们的任务就是往表格里面加图加内容了!（注意图片该做背景的就做背景）这里就不再赘述了!(其实已经赘述得够多了!)

实战PS制作网页从切图到网叶生成 - 江西红谷滩 - 江西红谷滩此主题相关图片如下：

更多文章推荐