本教程最終目的是大量節(jié)省切圖時間，是參考了多種方法最終選擇的方案。

傳統(tǒng)切圖往往包含著這樣幾個步驟：

1. 切出多種倍率的圖（比如視網(wǎng)膜屏幕@2x & 普通屏幕@1x）
2. 選取相應(yīng)的圖片合并成雪碧圖（還需量出每個圖片的定位）
3. 圖片壓縮（比如png24 -> png8）

正常來說第一步和第二部會花費不少的時間棺榔，而使用了該方案后跟畅，將大幅減少切圖時間。

所需軟件

• Adobe Photoshop CC：點擊購買
• TexturePacker：點擊下載（需升級至pro版解鎖我們需要的功能）

方法介紹

大致流程為：

1. 使用 Photoshop 的 圖像資源 功能切出多種倍率的圖
2. 使用 TexturePacker 的 Commond Line Tool 快速合并壓縮喇嘱，并生成定位參考

具體做法

Step 1：用 Photoshop 打開目標圖片簸搞，勾選圖像資源

這里我們用ps工具扁位，設(shè)計需要提供最高倍率的PSD，以便切出不同倍率大小的圖標趁俊。
點擊 文件 -> 生成 -> 圖像資源 這時候就啟動了圖像資源模式域仇，在這個模式下，只要對圖層重命名寺擂，就可以快速切出圖標暇务。

Step 1.1

Step 1.2

Step 2：重命名圖層（快速切圖）

重命名圖層泼掠，如果以 .png、.jpg 的方式結(jié)尾垦细，則會自動幫你切出該圖層的圖片（文件夾也可以）择镇。

不過如果要用于合并，最好以 1_括改、2_腻豌、3_ 這樣的形式開頭，合并雪碧圖時就總會安裝一定的順序去排序叹谁，防止下次增加新圖時圖片合并順序被打亂饲梭。

Step 2.1

當命名后的一瞬間，圖片也就切好并放在PSD同級目錄下了

Step 2.2

如果切出的圖像直接使用焰檩，那么有時候需要切出多倍的圖憔涉，教程：新建個圖層放在最上面，并命名為：default 2x/@2x + 50% 1x/ 析苫。這里的意思是將圖片切成二倍和以倍大小兜叨，把二倍圖片放到 2x 目錄下，以 @2x 結(jié)尾衩侥；把一倍圖片縮放50%国旷，放到 1x 目錄下。

Step 2.3

Step 2.4

Step 2.5

如果切出的圖需要制作雪碧圖茫死，則這個步驟可以跳過（因為雪碧圖腳本會包含這一功能）跪但。

圖像資源還有更多高級用法：在 Photoshop CC 中生成 Web 資源

Step 3：執(zhí)行 TexturePacker 的腳本一鍵制作雪碧圖

先要下載好 Command Line Tool

Step 3.1.png

之后執(zhí)行切圖腳本。我這里一般會在項目中建立一個專門的文件夾放切圖資源峦萎，比如 index 代表首頁屡久，img 里放著圖片源文件，執(zhí)行了 build.sh 后就會爱榔，吧 img 里的圖進行合并和壓縮被环，最后放到 dist 目錄下。

Step 3.2.png

這里分別切出了一倍和二倍的圖详幽。并且附帶了一個css筛欢，這個css里包含著圖標大小以及定位信息，方便開發(fā)

Step 3.3.png

這里付下 build.sh 的腳本源碼唇聘，我會加上詳細的注釋版姑，可以根據(jù)項目的不同以此為基礎(chǔ)進行修改。

#! /bin/bash

# 一些變量雳灾，跟進實際情況去設(shè)置
# 圖片名稱
name=sprite_index_icon
# 畫面總體寬度漠酿，如果存在圖標大于這個寬度，則需要將該數(shù)值再調(diào)大
# 默認2000（相當于非視網(wǎng)膜屏幕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結(jié)尾
                --variant 0.5: \ # 切出1倍圖夭拌，以50%大小為基準
                --texture-format png \ # 雪碧圖格式
                --shape-padding ${shape_padding} \ # 圖標與圖標間的間距為20
                --border-padding 0 \ # 無雪碧圖整體外邊距
                --pack-mode Best \ # 打包質(zhì)量最佳
                --extrude 0 \ # 無每個圖標的外邊距
                --trim-mode Trim \ # 刪除多余隱藏透明邊框
                --algorithm Basic \ # 以基礎(chǔ)的排序方式順序排序
                --basic-sort-by Name \ # 根據(jù)文件名排序
                --width ${width} \ # 設(shè)置寬度（后面會切除多余的部分）
                --force-identical-layout \ # 保證不同倍率圖像一致
                img # 源文件位置

# 二次處理。因為第一次處理為了確保圖標位置永遠一致衷咽，強制設(shè)置了寬度鸽扁，這里將第一次多余的透明寬度切除
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}_tmp@2x.png

# 移動到 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 的功能，直接執(zhí)行 TexturePacker --help 即可镶骗，功能可謂異常豐富桶现。

參考

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