工具： photoshop CC

切图方式

1. 普通切图

直接切图工具，文件>导出>存储为web可用格式

2. 自动切图

文件>导出>将图层导出到文件，导出的图层每个都一个大图，跟原PSD大小相同

3. 智能切图

CC的功能

首先要设置 首选项>增效工具>☑️启用生成器 然后文件>生成>☑️图像资源。

然后保存就可以开始智能切图，会在psd的目录下生成一个assets文件夹

我自己弄的时候总会生成一个错误文件，无法切图。

4. 参考线切图

参考线可以通过视图>新建参考线，或者直接拖动旁边的标尺，横向参考线从顶部标尺拖出，纵向参考线从左侧标尺拖出。 使用参考线包裹需要切出的图片，ps顶部有一个基于参考线切图的切片，点击之后就会自动切片，然后导出

其他技巧：

导出切片时可以设置只导出选中的切片，在最后选择存储位置的那一步。

其他问题

1.导出图片格式选择

PNG

图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充具备较大亮度差异以及强烈对比的简单图像（如按钮中的背景和文字）

PNG8 PNG24

PNG8不带半透明效果PNG24带半透明效果

JPG

对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。

总结

参考原则：

在页面中使用的商品图片、采用人像或者实物素材制作的广告Banner等图像更适合采用JPG的图片格式保存。颜色简单对比强烈的则需要采用PNG有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进行存储有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了

生产中：

容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小。

更多参考…