ui設計怎么切圖

ui設計怎么切圖，作為ui設計師，過完稿和開發對接時，需要標注設計稿和切圖，把標注切圖文件給到開發，所以切圖就顯得很重要，今天小編主要給大家分享ui設計怎么切圖，希望對你們有幫助!

1.建立不同切圖文件

這樣做的目的:一方面，以后找到它很方便;另一方面，方便開發工程師查找文件，因為有時是分工合作，需要在第一時間找到相應的文件。

2.命名規則

建議使用以下命名方法:

公式:模塊_類別_功能_狀態.png

例子:new_icon_share_nor.png

說明:最新_圖標_分享_正常.png

注意:2倍圖和3倍圖在后面加2x、3x，以清楚地表明這是幾倍圖，例如new_icon_share_nor@2x.png、new_icon_share_nor@3x.png;命名下劃線必須使用“_”不能使用“—”;在安卓系統上不支持的，并且使用這種符號也不是很標準。.png絕不能丟，因為CC需要這個后綴來輸出切圖，否則就不能輸出。

3.切圖文件尺寸

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

4.iPhone的3倍圖怎么切?

通過比較iPhone6和iPhone6plus的屏幕尺寸獲得的，750/1080≈1334/1920≈2/3，因為iPhone5/s和iPhone6的屏幕分辨率相同，都是326ppi，所以使用同一套圖，即@2x圖，6和6plus的屏幕寬高比是2/3，當5/6使用@2x圖形時，6plus使用的@3x圖形，即5/6圖片資源寬高度的1.5倍，換算成百分比剛好就是150%。

5.如何統一切圖尺寸?

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

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

注意:在整個過程中，不要取消選區，也不要誤觸Ctrl+D。