切圖教程,分享一種高效切圖方法

2022-12-26 17:55:23 來源/作者: / 己有:22人學(xué)習(xí)過

這是由iPhone6和iPhone6plus的屏幕尺寸比得來的,750/1080≈1334/1920≈2/3,因為iPhone5/s與iPhone6的屏幕分辨率是一致的,都是326ppi,所以它們用的是一套圖,也就是@2x圖,6和6plus的屏幕寬高比是2/3,當(dāng)5/6使用@2x圖的時候,6plus使用的@3x的圖,也就是5/6的圖片資源寬高的各1.5倍,換算成百分比剛好就是150%。

6、切圖尺寸大小怎么統(tǒng)一?

這是一個坑,并且還是親自被埋過,埋得死死的,然后才爬起來的,當(dāng)時也是查資料,來回試了好幾次才找到方法,剛開始我在做的時候就納悶,為嘛我的切圖切出來大小不一樣,大的大,小的小,還有一些亂七八糟的尺寸。

怎么處理的呢?在上面的第五點中可以看出,命名截圖的旁邊有個黑色的東西,那是啥?有人想到了,那是蒙板,不錯,那就是蒙板,使用蒙板就可以解決掉了尺寸大小不一致的問題了,是不是很簡單,雖然簡單,但是,這個坑沒踩過,你是記不住的,也不知道怎么處理,下面來看看具體怎么做。

切圖教程,分享一種高效切圖方法
<點圖片看大圖>

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

注意事項:整個過程中不要取消選區(qū),不要誤觸了Ctrl(command)+D。

輸出

這個時候,就開始輸出了,因為咱們的準(zhǔn)備工作都已經(jīng)弄完了,下面就需要用到CC2014或CC2015的圖像生成器了,前面的利其器的部分的增效工具里面的啟用生成器一定要打勾,然后就可以直接操作,文件>生成>圖像資源,然后你會看到,切圖文件的旁邊多了一個文件夾,文件夾的名稱一般是“文件名-assets”,里面就是你的切圖文件了。

切圖教程,分享一種高效切圖方法
<點圖片看大圖>

安卓的呢???

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

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

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