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

作為UI設(shè)計(jì)師，過完稿和開發(fā)對接時(shí)，需要標(biāo)注設(shè)計(jì)稿和切圖，把標(biāo)注切圖文件給到開發(fā)。這個(gè)時(shí)候就犯難了，那么多尺寸怎么切圖，iPhone就有8個(gè)版本，更別提安卓那一堆尺寸。今天這篇好文分享一個(gè)意想不到的切圖方法，幫你高效切圖。

不用在意那么多設(shè)備，不管iOS和Android手機(jī)型號有多少，只要我們了解它的屏幕分辨率之后就好辦了。

<點(diǎn)圖片看大圖>www.theoat.com.cn

有人會發(fā)現(xiàn)一個(gè)問題，6S、6S plus的尺寸呢？因?yàn)樗麄兊姆直媛屎?、6 plus尺寸一致的。

從上圖可以看出不同分辨率對應(yīng)不同的倍率，這樣的話我們適配的時(shí)候就知道怎么切圖了，@2x表示兩倍圖，@3x表示三倍圖；以上的那些尺寸圖，重點(diǎn)看這張圖就可以同時(shí)適配iOS和Android的切圖了。

現(xiàn)在PhotoshopCC2015已經(jīng)出了切圖就更方便了，但是對于電腦的配置要求比較高，不然卡死，土豪就不用擔(dān)心，隨便安裝，對于電腦配置比較低的可以這樣干，作圖的時(shí)候用CS6，文件在這里面做好之后，只需要啟動CC2014或者CC2015進(jìn)行切圖操作就可以了，我現(xiàn)在就是這么干的，畢竟高配置的電腦成本比較高。

現(xiàn)在開始來搗鼓CC2014或者CC2015吧。

1、調(diào)出首選項(xiàng)Command（Ctrl）+k，勾選啟用生成器，默認(rèn)是不夠選的。

2、文件-生成-圖像資源，這個(gè)是后期的時(shí)候用的比較多的一個(gè)選項(xiàng)。

1、不同的模塊建立不同的切圖文件夾存放。

這樣做的目的：一方面，方便自己以后查找；另一方面，方便咱們的開發(fā)工程師查找文件，因?yàn)橛袝r(shí)候是分工合作，需要第一時(shí)間找到對應(yīng)的文件。

2、命名規(guī)則

建議采用以下方法命名：

公式：模塊_類別_功能_狀態(tài).png

例子：new_icon_share_nor.png

說明：最新_圖標(biāo)_分享_正常.png

備注：2倍圖和3倍圖的時(shí)候需要在后面加2x、3x，以便明確這是幾倍圖，比如：new_icon_share_nor@2x.png new_icon_share_nor@3x.png；命名的下劃線一定要用“_”這個(gè)不能用“—”這個(gè)，在安卓上面不支持，并且使用這個(gè)符號也不是很規(guī)范。.png絕對不能丟，因?yàn)镃C需要這個(gè)后綴來進(jìn)行切圖的輸出，沒有的話就輸出不了。

3、常用命名單詞

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

4、切圖文件大小必須是偶數(shù)，格式為PNG-24。

5、iPhone的3倍圖怎么切？

如圖所示，左邊是需要切的icon，右邊是命名，@2x圖和@3x圖，從圖中可以看到有一個(gè)紅框，剛開始肯定會納悶，@2x圖和@3x圖唯一的區(qū)別就是前面多了百分比150%，后綴變成了@3x，命名沒變，為什么是150%的比例而不是其他的？

這是由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è)黑色的東西，那是啥？有人想到了，那是蒙板，不錯，那就是蒙板，使用蒙板就可以解決掉了尺寸大小不一致的問題了，是不是很簡單，雖然簡單，但是，這個(gè)坑沒踩過，你是記不住的，也不知道怎么處理，下面來看看具體怎么做。

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

這個(gè)切圖的尺寸是140*140px的，我在做的時(shí)候是用矩形選取框畫了這么大的區(qū)域，讓切圖文件居中對齊，拉參考線，這個(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的圖像生成器了，前面的利其器的部分的增效工具里面的啟用生成器一定要打勾，然后就可以直接操作，文件>生成>圖像資源，然后你會看到，切圖文件的旁邊多了一個(gè)文件夾，文件夾的名稱一般是“文件名-assets”，里面就是你的切圖文件了。

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

安卓的呢？？？

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

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

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