切图与Sprite图制作指南-CSDN博客

本文链接：https://blog.csdn.net/weixin_42369598/article/details/122002409

在项目的开发，一般设计的同学都会一个文件夹，里面有对应的切图，psd（Photoshop）或者sketch（ios的sketch应用）文件，当切图不能满足我们的需求时，我们可通过源文件进行自我裁切

Photoshop的切图辅助工具`cutterman`

cutterman是一款免费的工具，只需要在Photoshop中添加即可使用，可规定icon的等比的大小切图的设置

cutterman下载与介绍地址：http://www.cutterman.cn/zh/cutterman![在这里插入图片描述](https://img-blog.csdnimg.cn/bae79bbffa7e4870b279a7c58a0b74c9.png

可进行固定尺寸的导出，相对于一些同等比例大小的icon图标，可使用同等比例的大小导出，这样就可减免对png图片导出比例不对的问题
在这里插入图片描述
制作雪碧图（sprite）

自动生雪碧图的链接：https://www.toptal.com/developers/css/sprite-generator

// sprite图的使用
background: url('../img/face-help-icon.png') no-repeat -.1rem .1rem;
background-size: .84rem .42rem;

当生成的sprite的图再次添加或者不能满足新的需求时，可用Photoshop进行添加新的icon图标进入合加粗样式成，位置信息可使用标尺(快捷键ctrl+r打开/隐藏尺子)进行确定，右上角为锚点(position的x，y定位点)；
制作sprite图的注意事项: 明确该icon图标要展示的透明区域，减少不必要的重叠合并图
导出的图片必须是整个画布的大小，并且导出的是png图，放入到项目中使用！
如需要添加多个icon的图示，增加的内容超过原本的画布大小，可进行增加其画布的大小，并且选择增加width或height,选一方进行更改，并把原本的所有内容都以右上角的锚点进行整体偏移！

往上偏移的作用是：之前使用该sprite的定位信息就无须更改，只需要更改background-size的大小即可
在这里插入图片描述
附加：如果这里使用scss的语法样式，可使用其混合模式mixin,background-position可使用参数的形式传递进入

// 混合模式的定义 - 类比js中的方法
@mixin giftIcon($x, $y, $img:url(../img/gift.png)) {
    background: $img no-repeat $x, $y;
    background-size: 3.12rem 1.04rem;
}
// 样式使用
@include giftIcon( -.10rem, -.10rem);