怎么用ps做html切图 ，详细！

在PS中打开你要切图的图片；

在左边的工具栏选择，切图工具，

然后就开始切图，切图就是把你的那张图片切成小的图片，记住一定要保证小图拼起来和原图一样（这里就要求你切图的时候，必须精确到像素最好是拉辅助线（快捷键CTRL+R就是辅助线了）来辅助切图），

切完之后，就点击左上角菜单栏：“文件——选择存储为web和设备所用格式”；d出“存储页面”；点击“存储”；

接下来才是重点啊，切记不要按步就直接保存啦；点击下面的“格式”，选择“html和图像”；然后保存；

保存以后就生成了image文件和html页面两个文件夹，然后你点html那个页面；

最后你点击那个HTML文件，如果打开的和你的图片一模一样，那么说明你的切图是成功的，如果有细微的差别，那么就是前面的切图出现了问题，不够精细。

1、在Adobe Photoshop CC中打开设计好的PS图片文件

2、按键盘快捷键Ctrl+R调出参考线功能

3、在标尺上按住鼠标左键拉出辅助线到相应位置

4、选择切片工具，或键盘快捷键C ，激活切片功能；点击基于参考线的切片，软件自动将辅助线条之间分割成若干切片（注：放大检查辅助线位置会更精准）

5、选择菜单【文件】>存储为web格式，调出web格式窗口

6、点击【存储】按钮，进入存储窗口

7、存储窗口中格式选择Html和图像，所有切片；然后保存

8、自动生成网页代码文件和图像；如图示：图片文件夹images和html代码文件。

在这里我们使用的PS的版本是CS3 以前的版本与此相差无几，但注意不能使用迷你安装版，必须是完整安装。

二 按网页的结构和图片的特点进行切片

切片的大水上和位置可以通过切片选项来进行调整

三 选择文件菜单 另存为WEB格式命令，保存时会生成index.html 图片文件会存放在images文件夹中(CS3要选择存储为html和图片)

四 使用Dreamweaver软件打开刚刚保存生成的html文件进行编辑，删除不必须的图片和进行内容的填充。

切片原则和常见问题：

一 切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。

二 对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来

三 在DW中进行编辑时，少用图片，如果能用背景颜色代替的就使用背景颜色 能使用图案的也尽可能使用图案平铺来形成背景

删除图片的时候记住图片的长宽，再插入一个相同长宽的表格。

使用表格长宽一样的图片做为单元格的背景。

把图片设置成背景。

---