UI设计，尤其是web UI，经常会听到开发人员说“你帮我把图标合成一张雪碧图吧”雪碧图，真正的名称是Sprite图，也就是说把网页需要的全部图标合成在一张背景图上一次完成加载，其目的是减少服务器的请求次数。下面就是在PS中合成雪碧图需要注意的事项，包括如何在原雪碧图中增加图标。
方法 / 步骤
新建一个文档，为了示例用，我准备每个图标占据宽和高各100px，实际应用中可能比较小，建议用整倍数便于计算。
打开菜单【视图】-【新建参考线版面】。
因为800*600的尺寸，每个单元格100，所以我在【新建参考线版面】弹窗中设置【列】和【行】分别为8和6。
以一个图标为例，图示为我在AI中绘制的图标，先经过扩展，转为闭合路径的形状。然后粘贴到ps中，这里需要注意的是图标一定要与单元格留出1px的边距，比如我的单元格是100px，则图标的宽和高最大只能是98px。
用【矩形选框工具】选中单元格，切换到【移动工具】，顶部面板中分别选择【垂直居中对齐】和【水平居中对齐】，这样就完成了一个图标的定位。
在实际应用中，单元格的划分是与绝大多数图标的尺寸相关的，当出现如图所示个别图标的尺寸（我以一个150乘150px的为例）超过单元格时，对齐的方式是居左居上对齐，而不是居中对齐，这是因为sprite图在使用时是用background-position属性来定位，background-position(X ,Y)X和Y值分别是笛卡尔坐标系X轴和Y轴的值。
选中要占据的四个单元格，然后【顶对齐】和【左对齐】，别忘了最重要的一步操作，取消选择后，选中图标，再向下向右各移动1px，留出边距。
合成完的雪碧图就可以交付给开发人员了，（上图是参考线效果），实际导出的一般是透明背景的PNG格式。
当需要补充新图标时，可在原图的基础上画布向右向下扩展，不要改变已完成部分的left值和top值，这样则不会对原有图标造成影响。
Ps：最后推荐一个自动化生成雪碧图的网址：https://www.toptal.com/developers/css/sprite-generator
