前端切图最佳实践

本教程最终目的是大量节省切图时间，是参考了多种方法最终选择的方案。

传统切图往往包含着这样几个步骤：

1. 切出多种倍率的图（比如视网膜屏幕@2x & 普通屏幕@1x）
2. 选取相应的图片合并成雪碧图（还需量出每个图片的定位）
3. 图片压缩（比如png24 -> png8）

正常来说第一步和第二部会花费不少的时间，而使用了该方案后，将大幅减少切图时间。

所需软件

• Adobe Photoshop CC：点击购买
• TexturePacker：点击下载（需升级至pro版解锁我们需要的功能）

方法介绍

大致流程为：

1. 使用 Photoshop 的 图像资源 功能切出多种倍率的图
2. 使用 TexturePacker 的 Commond Line Tool 快速合并压缩，并生成定位参考

具体做法

Step 1：用 Photoshop 打开目标图片，勾选图像资源

这里我们用ps工具，设计需要提供最高倍率的PSD，以便切出不同倍率大小的图标。
点击 文件 -> 生成 -> 图像资源 这时候就启动了图像资源模式，在这个模式下，只要对图层重命名，就可以快速切出图标。

Step 1.1

Step 1.2

Step 2：重命名图层（快速切图）

重命名图层，如果以 .png、.jpg 的方式结尾，则会自动帮你切出该图层的图片（文件夹也可以）。

不过如果要用于合并，最好以 1_、2_、3_ 这样的形式开头，合并雪碧图时就总会安装一定的顺序去排序，防止下次增加新图时图片合并顺序被打乱。

Step 2.1

当命名后的一瞬间，图片也就切好并放在PSD同级目录下了

Step 2.2

如果切出的图像直接使用，那么有时候需要切出多倍的图，教程：新建个图层放在最上面，并命名为：default 2x/@2x + 50% 1x/ 。这里的意思是将图片切成二倍和以倍大小，把二倍图片放到 2x 目录下，以 @2x 结尾；把一倍图片缩放50%，放到 1x 目录下。

Step 2.3

Step 2.4

Step 2.5

如果切出的图需要制作雪碧图，则这个步骤可以跳过（因为雪碧图脚本会包含这一功能）。

图像资源还有更多高级用法：在 Photoshop CC 中生成 Web 资源

Step 3：执行 TexturePacker 的脚本一键制作雪碧图

先要下载好 Command Line Tool

Step 3.1.png

之后执行切图脚本。我这里一般会在项目中建立一个专门的文件夹放切图资源，比如 index 代表首页，img 里放着图片源文件，执行了 build.sh 后就会，吧 img 里的图进行合并和压缩，最后放到 dist 目录下。

Step 3.2.png

这里分别切出了一倍和二倍的图。并且附带了一个css，这个css里包含着图标大小以及定位信息，方便开发

Step 3.3.png

这里付下 build.sh 的脚本源码，我会加上详细的注释，可以根据项目的不同以此为基础进行修改。

#! /bin/bash

# 一些变量，跟进实际情况去设置
# 图片名称
name=sprite_index_icon
# 画面总体宽度，如果存在图标大于这个宽度，则需要将该数值再调大
# 默认2000（相当于非视网膜屏幕1000）
width=2000
# 图标间的间距，可以适当多留些间距，以防容器比图标大，并且直接以图标为背景
# 默认20
shape_padding=20

mkdir temp
rm -rf dist

# 完成合并，生成的图片放到temp里，待二次处理
TexturePacker   --format css-simple \ # 生成css文件
                --data temp/${name}{v}.css \ # css命名
                --sheet temp/${name}_tmp{v}.png \ # 图片命名
                --variant 1:@2x \ # 切出2倍图，以当前大小为基准，以@2x结尾
                --variant 0.5: \ # 切出1倍图，以50%大小为基准
                --texture-format png \ # 雪碧图格式
                --shape-padding ${shape_padding} \ # 图标与图标间的间距为20
                --border-padding 0 \ # 无雪碧图整体外边距
                --pack-mode Best \ # 打包质量最佳
                --extrude 0 \ # 无每个图标的外边距
                --trim-mode Trim \ # 删除多余隐藏透明边框
                --algorithm Basic \ # 以基础的排序方式顺序排序
                --basic-sort-by Name \ # 根据文件名排序
                --width ${width} \ # 设置宽度（后面会切除多余的部分）
                --force-identical-layout \ # 保证不同倍率图像一致
                img # 源文件位置

# 二次处理。因为第一次处理为了确保图标位置永远一致，强制设置了宽度，这里将第一次多余的透明宽度切除
TexturePacker   --format css-simple \
                --data temp/temp{v}.css \
                --sheet temp/${name}{v}.png \
                --variant 1:@2x \
                --variant 0.5: \
                --texture-format png8 \ # 压缩为png8
                --force-identical-layout \
                --extrude 0 \
                --trim-mode Trim \
                temp/${name}[email protected]

# 移动到 dist 目录
mkdir dist
mv temp/${name}.css dist
mv temp/${name}.png dist
mv temp/${name}@2x.png dist

# 删除
rm -rf temp

想了解更多 TexturePacker Command Line Tool 的功能，直接执行 TexturePacker --help 即可，功能可谓异常丰富。

参考

• https://css-tricks.com/css-sprites/
• http://www.jianshu.com/p/7482dde882af