這種UI切圖方式你會(huì)嗎？

做為UI設(shè)計(jì)師，需要標(biāo)注設(shè)計(jì)稿和切圖，本文和大家分享的就是高效切圖的一些步驟，一起來(lái)看看吧，希望對(duì)大家ui設(shè)計(jì)有所幫助。

　　不用在意那么多設(shè)備

　　不管iOS和Android手機(jī)型號(hào)有多少，只要我們了解它的屏幕分辨率之后就好辦了。

　有人會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，6S、6S plus的尺寸呢？因?yàn)樗麄兊姆直媛屎?/span>6、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)在開(kāi)始來(lái)?yè)v鼓CC2014或者CC2015吧。

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

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

切圖要點(diǎn)

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

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

　　2、命名規(guī)則

　　建議采用以下方法命名：

　　1.公式：模塊_類別_功能_狀態(tài).png 2.例子：new_icon_share_nor.png 3.說(shuō)明：最新_圖標(biāo)_分享_正常.png

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

　　3、常用命名單詞

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

　　5、iPhone的3倍圖怎么切？

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

　　這是由iPhone6和iPhone6plus的屏幕尺寸比得來(lái)的，750/1080≈1334/1920≈2/3，因?yàn)?/span>iPhone5/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è)坑，并且還是親自被埋過(guò)，埋得死死的，然后才爬起來(lái)的，當(dāng)時(shí)也是查資料，來(lái)回試了好幾次才找到方法，剛開(kāi)始我在做的時(shí)候就納悶，為嘛我的切圖切出來(lái)大小不一樣，大的大，小的小，還有一些亂七八糟的尺寸。

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

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

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

　　輸出

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

安卓的呢？？？

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

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

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

來(lái)源：UI中國(guó)