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

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

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

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

工欲善其事，必先利其器

現(xiàn)在PhotoshopCC2015已經(jīng)出了切圖就更方便了,，但是對(duì)于電腦的配置要求比較高,，不然卡死，土豪就不用擔(dān)心,，隨便安裝,，對(duì)于電腦配置比較低的可以這樣干，作圖的時(shí)候用CS6,，文件在這里面做好之后,，只需要啟動(dòng)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),。

切圖要點(diǎn)

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

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

2,、命名規(guī)則

建議采用以下方法命名：

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

例子：new_icon_share_nor.png

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

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

3、常用命名單詞

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

5、iPhone的3倍圖怎么切,？

如圖所示,，左邊是需要切的icon，右邊是命名,，@2x圖和@3x圖,，從圖中可以看到有一個(gè)紅框，剛開始肯定會(huì)納悶,，@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è)黑色的東西,，那是啥,？有人想到了，那是蒙板,，不錯(cuò),，那就是蒙板，使用蒙板就可以解決掉了尺寸大小不一致的問題了,，是不是很簡單,，雖然簡單，但是,，這個(gè)坑沒踩過,，你是記不住的，也不知道怎么處理,，下面來看看具體怎么做,。

這個(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”,，里面就是你的切圖文件了。

安卓的呢,？？,？

莫急,，安卓的其實(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í)慣選擇輸出軟件,。

分享是一件很快樂的事,！

開啟 “漲姿勢” 新篇章

設(shè)計(jì)｜攝影｜繪畫｜創(chuàng)意｜視覺｜藝術(shù)