网页切片方法知识点总结

网页切片方法：
1、传统切片：用切片工具和切片选择工具配合使用把网页需要的区域切出来，注意导出时要导出用户切片，即主动切片

2、快速自动切图：用文件——导出（或脚本）菜单下的“将图层导出到文件”命令，把所有需要切片的图层直接导出成图片，好处是图层阴影都可以完美导出。注意导出前复制一份源文件，并将不需要导出的文字之类的图层删掉，把能合并的图层合并，这样可以节省很多导出时间。
（但目前有个问题没有解决：我用PS2017做此操作时总是提示我“不能导出图片，因为没有用户切片”而不能完成操作，但其他版本的PS没发现此问题。不知道是PS版本问题还是某个设定问题，有大神知道的望指教）

3、修改文件名生成切片图：在首选项—增效工具中勾选“启用生成器”，在“文件—生成”中勾选“图像资源”，则可以在想要切片的图层上，把图层的文件名改成加图片格式后缀的形式（如：tupian.jpg或tupian.png），则会在当前网页的PSD文件保存目录里自动生成一个文件夹，然后把相应的图层会自动保存成相应格式的图片文件保存在内。如需得到高质量的JPG图片则可把图片命名为：200% tupian @2x.jpg。如需得到压缩的jpg图片则可把图片命名为tupian.jpg8，这样图片就是压缩为80%大小的JPG图了。

4、导出SVG格式图片：“文件—抽出资源”命令可以把图层名称加了SVG后缀的图层（如“tupian.svg”）导出成SVG格式的图片/网页文件，这种格式是一种矢量格式，可以自适应网页大小，可以在代码编辑器里打开，直接以代码方式显示。

5、复制图层CSS代码：如果想得到某个图层的CSS代码的话，可以用“图层—复制CSS”命令，然后在代码编辑器中粘贴即可