切圖教程，分享一種高效切圖方法(3)

這是由iPhone6和iPhone6plus的屏幕尺寸比得來的，750/1080≈1334/1920≈2/3，因?yàn)閕Phone5/s與iPhone6的屏幕分辨率是一致的，都是326ppi，所以它們用的是一套圖，也就是@2x圖，6和6plus的屏幕寬高比是2/3，當(dāng)5/6使用@2x圖的時(shí)候，6plus使用的@3x的圖，也就是5/6的圖片資源寬高的各1.5倍，換算成百分比剛好就是150%。

6、切圖尺寸大小怎么統(tǒng)一？

這是一個(gè)坑，并且還是親自被埋過，埋得死死的，然后才爬起來的，當(dāng)時(shí)也是查資料，來回試了好幾次才找到方法，剛開始我在做的時(shí)候就納悶，為嘛我的切圖切出來大小不一樣，大的大，小的小，還有一些亂七八糟的尺寸。

怎么處理的呢？在上面的第五點(diǎn)中可以看出，命名截圖的旁邊有個(gè)黑色的東西，那是啥？有人想到了，那是蒙板，不錯(cuò)，那就是蒙板，使用蒙板就可以解決掉了尺寸大小不一致的問題了，是不是很簡單，雖然簡單，但是，這個(gè)坑沒踩過，你是記不住的，也不知道怎么處理，下面來看看具體怎么做。

<點(diǎn)圖片看大圖>

這個(gè)切圖的尺寸是140*140px的，我在做的時(shí)候是用矩形選取框畫了這么大的區(qū)域，讓切圖文件居中對(duì)齊，拉參考線，這個(gè)時(shí)候的圖層是圖1的樣式，然后，點(diǎn)擊添加圖層蒙板（圖2），圖層變成了圖3，多了一個(gè)圖層蒙板，蒙板里面白色是高亮的，是要保留的區(qū)域，黑色的部分就是去掉的部分（去黑留白），白色區(qū)域的大小決定你的切圖文件的大小，這樣就解決了切圖文件大小不統(tǒng)一的問題。

注意事項(xiàng)：整個(gè)過程中不要取消選區(qū)，不要誤觸了Ctrl（command）+D。

這個(gè)時(shí)候，就開始輸出了，因?yàn)樵蹅兊臏?zhǔn)備工作都已經(jīng)弄完了，下面就需要用到CC2014或CC2015的圖像生成器了，前面的利其器的部分的增效工具里面的啟用生成器一定要打勾，然后就可以直接操作，文件>生成>圖像資源，然后你會(huì)看到，切圖文件的旁邊多了一個(gè)文件夾，文件夾的名稱一般是“文件名-assets”，里面就是你的切圖文件了。

<點(diǎn)圖片看大圖>

安卓的呢？？？

莫急，安卓的其實(shí)已經(jīng)出來了，咱們只需要把iOS的@2x的圖拷貝一份，然后建個(gè)文件夾命名為android，拷貝進(jìn)去，去掉命名后面的@2x就可以了，有人會(huì)問，就這樣？

還記得上面提到的5/5s、6/6s的屏幕分辨率是326ppi吧？而，安卓的320dpi分辨率對(duì)應(yīng)下的，1dp=2px，尺寸是720*1280，他們的分辨率是接近的，那么咱們直接就可以共用@2x的圖給安卓使用，不過需要去掉后面的@2x，并且只需要提供一套切圖就可以了，至于其他的安卓尺寸，就交給安卓開發(fā)工程師解決了，他們會(huì)使用點(diǎn)九的方式進(jìn)行適配。

不過，需要注意一下的是，點(diǎn)九是有限制的，一般適用于button、對(duì)話框、背景這樣的地方，不規(guī)則的icon在應(yīng)用的時(shí)候，如果在大屏里面有虛邊的情況，需要切大圖給到開發(fā)進(jìn)行替換；當(dāng)然，你也可以用Cutterman進(jìn)行輸出切圖，不過命名后面需要去掉.png，看個(gè)人的習(xí)慣選擇輸出軟件。