切圖教程,分享一種高效切圖方法
作為UI設(shè)計師,過完稿和開發(fā)對接時,需要標注設(shè)計稿和切圖,把標注切圖文件給到開發(fā)。這個時候就犯難了,那么多尺寸怎么切圖,iPhone就有8個版本,更別提安卓那一堆尺寸。今天這篇好文分享一個意想不到的切圖方法,幫你高效切圖。
不用在意那么多設(shè)備,不管iOS和Android手機型號有多少,只要我們了解它的屏幕分辨率之后就好辦了。
<點圖片看大圖>
有人會發(fā)現(xiàn)一個問題,6S、6S plus的尺寸呢?因為他們的分辨率和6、6 plus尺寸一致的。
從上圖可以看出不同分辨率對應(yīng)不同的倍率,這樣的話我們適配的時候就知道怎么切圖了,@2x表示兩倍圖,@3x表示三倍圖;以上的那些尺寸圖,重點看這張圖就可以同時適配iOS和Android的切圖了。
工欲善其事,必先利其器現(xiàn)在PhotoshopCC2015已經(jīng)出了切圖就更方便了,但是對于電腦的配置要求比較高,不然卡死,土豪就不用擔(dān)心,隨便安裝,對于電腦配置比較低的可以這樣干,作圖的時候用CS6,文件在這里面做好之后,只需要啟動CC2014或者CC2015進行切圖操作就可以了,我現(xiàn)在就是這么干的,畢竟高配置的電腦成本比較高。
現(xiàn)在開始來搗鼓CC2014或者CC2015吧。
1、調(diào)出首選項Command(Ctrl)+k,勾選啟用生成器,默認是不夠選的。
2、文件-生成-圖像資源,這個是后期的時候用的比較多的一個選項。
切圖要點1、不同的模塊建立不同的切圖文件夾存放。