ui設(shè)計(jì)怎么切圖

ui設(shè)計(jì)怎么切圖

ui設(shè)計(jì)怎么切圖，作為ui設(shè)計(jì)師，過(guò)完稿和開發(fā)對(duì)接時(shí)，需要標(biāo)注設(shè)計(jì)稿和切圖，把標(biāo)注切圖文件給到開發(fā)，所以切圖就顯得很重要，今天小編主要給大家分享ui設(shè)計(jì)怎么切圖，希望對(duì)你們有幫助!

1.建立不同切圖文件

這樣做的目的:一方面，以后找到它很方便;另一方面，方便開發(fā)工程師查找文件，因?yàn)橛袝r(shí)是分工合作，需要在第一時(shí)間找到相應(yīng)的文件。

2.命名規(guī)則

建議使用以下命名方法:

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

例子:new_icon_share_nor.png

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

注意:2倍圖和3倍圖在后面加2x、3x，以清楚地表明這是幾倍圖，例如new_icon_share_nor@2x.png、new_icon_share_nor@3x.png;命名下劃線必須使用“_”不能使用“—”;在安卓系統(tǒng)上不支持的，并且使用這種符號(hào)也不是很標(biāo)準(zhǔn)。.png絕不能丟，因?yàn)镃C需要這個(gè)后綴來(lái)輸出切圖，否則就不能輸出。

3.切圖文件尺寸

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

4.iPhone的3倍圖怎么切?

通過(guò)比較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%。

5.如何統(tǒng)一切圖尺寸?

從上面的幾點(diǎn)可以看出，在命名的旁邊有一個(gè)黑色的東西，那是什么?有些人認(rèn)為這是一個(gè)蒙板，是的，那是一個(gè)蒙板，使用這個(gè)蒙板可以解決大小不一致的問(wèn)題。

切圖的尺寸是140*140px，把切圖文件中對(duì)齊，然后拉參考線，單擊添加圖層蒙版，蒙版內(nèi)的白色突出顯示，這是需要保留的區(qū)域，黑色部分是被移除的部分(移除黑色留下白色)，白色區(qū)域的大小決定了切圖文件的大小，從而解決了切圖文件大小不一致的問(wèn)題。

注意:在整個(gè)過(guò)程中，不要取消選區(qū)，也不要誤觸Ctrl+D。