在前端开发中，从 Photoshop (PS) 切图指的是将设计稿中的各种元素导出成可在网页中使用的图片格式。以下是一些技巧和流程：
1. 组织图层:
- 清晰命名: 为每个图层和图层组命名，方便识别和导出。例如：
logo,button-hover,background-texture等。 - 分组: 将相关的图层分组，例如将一个按钮的正常状态、悬停状态和按下状态图层放在一个组内。这有助于批量导出和管理。
- 图层合并: 对于一些简单的元素，可以将多个图层合并成一个图层，减少导出的图片数量，提高页面性能。
2. 选择切图方式:
- 使用切片工具 (Slice Tool): 对于需要精确控制尺寸和位置的图片，可以使用切片工具手动创建切片。这种方式适合于传统的网页布局，但现在使用较少。
- 基于图层的导出: 这是目前最常用的方法。PS 可以根据图层或图层组直接导出图片，避免了手动切片的繁琐。
- 使用生成器 (Generator): Generator 可以自动根据图层名称和配置导出不同格式和尺寸的图片，非常高效。
3. 选择合适的图片格式:
- PNG-8: 适用于颜色较少、需要透明背景的图片，例如图标、logo。文件体积较小。
- PNG-24: 适用于颜色丰富、需要透明背景的图片，质量更高，但文件体积较大。
- JPEG: 适用于照片等颜色丰富的图片，不支持透明背景。可以通过调整质量来平衡文件体积和图像质量。
- SVG: 适用于矢量图形，可以无限缩放而不失真。例如图标、logo 等。
- WebP: 新一代图片格式，在相同质量下，文件体积比 JPEG 和 PNG 更小。兼容性不断提升，是未来的趋势。
4. 导出技巧:
- 使用“导出为...”或“快速导出为...”: 这两个功能可以快速导出选定的图层或图层组，并支持多种格式和选项。
- 使用生成器: 配置好命名规则后，生成器可以自动导出各种尺寸和格式的图片，大大提高效率。例如，
button-hover@2x.png会导出一个两倍大小的button-hover图片。 - 使用脚本: 对于复杂的导出需求，可以编写脚本来批量处理。
- 注意图片尺寸: 为了适应不同分辨率的屏幕，可以导出多套尺寸的图片，例如
@1x,@2x,@3x。 - 优化图片: 使用 TinyPNG 或其他图片压缩工具优化图片，减小文件体积，提高页面加载速度。
示例 (使用生成器):
- 命名图层：例如
icon-home.png。 - 打开“文件” > “生成” > “图像资源”。
- PS 会自动识别图层名称并生成对应的图片。
总结:
选择哪种切图方式和图片格式取决于具体的项目需求。 现在主流的方式是利用图层命名配合 PS 的导出功能或生成器进行切图，并根据需要选择合适的图片格式，最后进行图片优化。 熟练掌握这些技巧可以大大提高前端开发的效率和页面性能。
标签：PS,技巧,生成器,图片格式,导出,切出,图层,图片 From： https://www.cnblogs.com/ai888/p/18566842