今天和咱們公司的前端對接發現，這才發現他們的切圖方法不高效，因此纔有了這篇文章。html
ui在作圖標的時候會給底部加一個切圖區域的矩形框，這是爲何呢，第一方便ui作圖標的時候有個參考範圍，第二點就是爲了前端切圖的時候能夠按照底部的矩形區域去切圖，實際上是爲了方便了前端更好的切圖（固然不用切圖的前端就不用往下看了）；前端
例以下圖所示，tab bar中每個icon都底部都有一個隱藏的切圖範圍，ui通常保存psd的時候會將其隱藏掉，方便看效果圖ios
如圖所示若是icon都貼着邊切的話，就會出現一個問題，tab bar這三個圖標大小不一致，因此不方便前端書寫代碼。那麼該怎麼利用這個隱藏的切圖範圍呢？web
1.首先切圖固然是要先隱藏背景，如圖示ui
2.將切圖區域所有顯示出來插件
3.將3個icon的切圖範圍選中，注意看右側圖層選中狀況3d
4.點擊【圖層】-【新建基於圖層的切片】htm
5.如今的話3個等大的切圖就行了，這時候將紅色的切圖區域隱藏，點擊【文件】-【導出】-【儲存爲web經常使用格式】便可blog
固然使用這種方法的話實際上是沒有@1x @2x @3x圖的，固然安卓要切得尺寸更多一些，那麼我再錄一個cutman插件的切圖方法吧，道理其實同樣，都是須要一個切圖區域，而後標記切圖區域，而後隱藏本身的畫的那個切圖區域，切誰點擊誰，ios或者Andriod，而後點擊導出選中的圖層便可導出@1x @2x @3x 和XXXHDPI 等圖，如gif所示io
原文出處：https://www.cnblogs.com/ddzzyy/p/12102700.html