「前端眼中的PS」图片保存

• 图片保存
• 保存格式的选择
• 图片与背景合并的切图方法
• 图片修改与维护
• 图片的合并（ Sprite）

---

图片保存

将需要的内容保存在独立的文件里便于之后的导出。（一般使用『存储于 Web 所用格式』菜单（Alt + Shift + Ctrl + S）保存）

如需保存独立图层则要把需要的图层拖到新建的透明背景的图层，或在图层上右键复制（Duplicate）图层选择地址为新文件即可。

保存格式的选择

保存类型一：色彩丰富切无透明要求时保存为 JPG 格式并选用时候的品质（通常使用品质 80 ）。

保存类型二：图片色彩不丰富，不伦透明与否一律保存为 PNG8 格式（256颜色，需特殊设置如下图，需设置杂边：无 无仿色）。

photoshop-saveFormat.png

保存类型三：图片有半透明（Alpha 透明）的要求，保存为 PNG24 格式（不对图片进行压缩）。

保存类型四：保留 PSD 源文件，以备不时之需。

图片与背景合并的切图方法如下

save-image.gif

图片修改与维护

• 维护与修改之一：更改画布大小以便增加新素材。

resize-canvas.gif

• 维护与修改之二：移动图标分两种，独立图层（移动工具拖动），于非独立图层（选取工具选中分离后移动工具拖动）。

move-layer.gif

• 维护与修改之三：裁剪画布的方法有两种，(1)用选取工具选取后图片裁取，(2)直接用裁剪工具裁剪画布。

crop-canvas.gif

• 注意事项：为了可维护性的考虑因适当的留出适当的空白区域以便修改所用和提高容错性。PNG8需更改图片颜色模式为 RGB 颜色（默认为索引颜色模式，颜色信息会被丢失）。

png8-color-mode.gif

图片的合并（ Sprite）

图片的合并就如同上面提到的切图后保存的过程。拼好的图称之为 Sprite 它能减少网络请求次数提高速度。图片压缩工具分为无损（ImageOptim 等工具，也可结合 Grunt 自动化构建工具一同使用）与有损压缩工具（TinyPng）。

图片合并建议方案：

• 同个模块的图片合并
• 大小相近的图片合并
• 色彩相近的图片合并
• 以上3种合并混合

合并的图片可以以横向或纵向的排列，分类可将同属于一个模块（功能模块），大小相近（充分利用画布空间），颜色相近（减少文件大小）。

图片的兼容

IE6 不支持 PNG24 半透明所以需要保存两份（sprite.png - png24 和 sprite-ie.png - 8）。在使用 CSS3 是让高级浏览器使用 CSS3 低级浏览器则使用切图。优雅降级指的是让低级浏览器不显示高级浏览器中的界面细节。