Photoshop切片导出HTML+CSS

利用Photoshop切片功能可以导出HTML，做大尺寸图片背景网页时，将大图片切割成小图片，以免影响加载速度，也可以方便在图片上加锚点之类的。

一，对图片进行切片

首先，按ctrl+R调出标尺，在图片上用参考线划出不同的区域。

切片方法一，使用工具栏上的“切片工具”按参考线划出一个一个的切片。

切片方法二，手动切片有些麻烦，可以点选项栏里的“基于参考线的切片”。

之后原来的参考线划出的区域就自动变成一块一块的切片了。

可能有些区域不需要切片，可以调出“切片选择工具”删除切片。

二，将切片导出为HTML+CSS

依次选择菜单栏上的“文件”→“存储为Web所用格式”（Alt+Shift+Ctrl+S）→“存储”。

接下来就会弹出一个“将优化结果存储为”窗口，如下图左：

文件名：改成英文的，这个名称最后是CSS选择器的名称。

格式：HTML和图象

设置：选择”其它“，之后会弹出”输出设置“对话框，如上右图。

设置：自定

在第2个下拉框处选择“切片”

切片输出，选择“生成CSS”

点击确定，返回“将优化结果存储为”窗口，保存即可。

这样就可以输出一个包含div+css的HTML网页文件和一个images图片文件夹。

有童鞋问，网上所谓PSD设计图生成网页模板之类的，用这个方法是否能自动生成一个高大上的网页模板？答案是：不能，无稽之谈，没有HTML+DIV+CSS基础，生成的网页文件，基本没什么用处...