下面的這篇APP界面設計切圖進階教程是出自靜電設計教師的第四節課的內容。html5模版網(www.suosuyi.cn)的小編很容易收集到這樣的APP設計干貨來分享。

我們大概的來了解下靜電設計是一個什么樣的主題和宗旨。

靜即是安靜，平靜，靜下心尋求內心的平和。?Design即設計，靜下心，重新考慮設計的本源，從行業的浮躁中解脫，設計真正屬于內心的作品。

html5模版網(www.suosuyi.cn)之前的一些關于APP切圖的教程有：

1、移動APP切圖信息圖：iOS界面設計切圖指南

2、APP設計和切圖基本知識點以及注意事項【APP設計干貨】

3、

下面我們跟隨靜電老師的思路來看看，我們如何完成一個APP切圖過程。

在這里演示講解的案例是iphone5的分辨率：640 *1136來設計。首先我們來分析下,圖中都有些什么元素。

靜電將這些圖標全部拿出來列在下邊。

好的,圖標就是以上這些了,下面,我們要將這些圖標做成一個一個獨立大小的文件,以便工程師同學排版使用。

將圖標轉換成獨立文件

首 先我們先來切適用于iphone客戶端的文件,由于靜電設計稿的分辨率是640-1136,所以這個比例的圖標可以直接拿來用。不用進行縮小或者放大的處 理。在安卓和ios開發中，最常用使用的圖片類型就是PNG，這個格式相信大家一定不會陌生，首先它比jpg和gif擁有更多的顏色和細節，同時失真程度 也非常小，另外，png格式的圖片支持通道透明，所以廣泛應用于移動端app的開發過程中。靜電來制作兩個圖標，剩下圖標的制作方式是一樣的，大家可以以 此類推。

我們先來切這樣一個圖標。

IOS在切圖的時候，一般會有兩個尺寸，分別適配3GS和iphone4、5、5s.
我們先來設計適用于iphone5/5s/4的圖標,因為他們是用的一套圖.
首先選中這個圖標,圖標四周會出現四個藍色的點,代表我們選中他了.

首先選中這個圖標,圖標四周會出現四個藍色的點,代表我們選中他了.在下方的屬性面板中,我們可以看到他的寬高,這里顯示這個圖標的寬高是40-40.接下來,按ctrl+n新建一個畫布.寬高是40-40,把剛才的圖標拷貝到這個畫布中.畫布請選擇透明.?這里請注意,圖標的尺寸一定要是偶數,否則縮小一倍的時候會出現不規則的鋸齒,我們要盡量避免他.也就是說,不要出現41-41這樣的尺寸.

接下來,我們將這個圖標導出.選擇fireworks的文件>圖像預覽> 格式選擇png32位.因為只有這個格式是透明的. 接下來選擇導出,找個地方存儲這個文件吧,文件名我命名為bookshelf_heart@2x.png

小貼士:大家一定注意,ios下的文件名命名規則,二倍的圖使用@2x.png做結尾,如bookshelf_heart@2x.png? 這是ios的開發規則,開發過程中,蘋果的開發軟件xcode使用@2x或者沒有@2x來識別是否為一倍或者二倍大的圖像.這個一定要記得.

使用切片工具批量切圖

上邊這種切圖方法,在切單個圖標的時候,可以用.但如果涉及到如tab按鈕這樣的有非按下和按下的效果的圖，這個時候就要非常在意兩個圖是否有錯位的情況了，這個時候我們使用切片工具批量切圖，以保證完全對齊。
首先我們將按鈕圖片單獨拿出來。新建一個透明畫布，將這幾個圖標拷貝過去。

接下來，我們將這些圖標均勻排列。最好能保證非選中和選中狀態的圖標的y坐標一致。

然后,我們選擇左側工具欄的切片工具.如圖所示,或者直接按快捷鍵k。
接著，鼠標變成了十字形，我們在要切出的圖標周圍畫框。因為這里的圖標大小一致，
所以切片的大小也要保持一致。畫框后，效果如圖,有一層綠色部分,代表切片區域.

這個時候有同學可能發現切片上有jpg這樣的字樣,如果有這樣的文字,代表我們要導出的圖片是jpg格式的,我們需要將格式改成png,用鼠標選中切片,同樣,屏幕下方的屬性面板,將jpg改為png32

我們在某個切片上點右鍵，選擇導出即可，記得文件名有@2x結尾哦。

等比例批量導出其他尺寸圖片

在 上一節的設計教室中,靜電和大家探討了不同分辨率圖標尺寸的比例。我們再看下圖溫習一次。在下圖中，我們可以看到，iphone3Gs與 iphone4/5/5s的比例為1:2。其他比例如下圖所示。也就是ios需要兩套圖。 安卓的話，靜電的經驗是hdpi和xxhdpi即可。當然有些同學可能會精確到xhdpi也要切，這個仁者見仁智者見智了。不過工作量會增加就是了。靜電 在這里偷個懶。我們這里用到fireworks的另一個神器，批處理功能！這個功能會讓你的工作效率直線上升！

剛才我們已經切了一套iphone4.5使用的圖出來,現在我們來使用批處理功能,切出3GS使用的一倍圖還有安卓480分辨率使用的圖片.

1.選擇fireworks 文件>批處理,看到如下對話框.選中你要縮放的圖標,然后點選添加按鈕,接著選擇繼續按鈕.

2.接著選擇 縮放 然后點添加,然后在縮放比例中選擇 縮放到百分比,選擇50%.
3.再將導出添加到右側,導出選擇png格式.

4.選擇重命名,這個功能很好用,因為之前我們的文件包含@2x,現在我們需要的這套圖是1倍,所以不需要@2x,我們將它去掉.如下圖所示. 這樣就可以批量替換@2x為空白了.

5.注意,我們必須先才處理好縮放等步驟后,再導出,然后重命名,否則文件會變大,右側的命令從上到下代表處理的步驟.這個可以調整. 選好后選擇繼續.

6.接下來的界面中我們選擇自定義位置,將一倍的圖放到其他文件夾備用.注意不要選與原始文件位置相同,否則你之前切的二倍圖會被覆蓋哦.切記.然后,選擇批次,就開始批處理了

7.轉眼之間,1倍和2倍的圖就好了,方便吧?

8.那么安卓的圖怎么處理呢?有同學已經猜到了,要切hdpi使用的圖,只需要把iphone5尺寸的圖標縮小到原來的3/4即可.就是批處理的縮放比例中填寫75%即可.

對于安卓圖片的特殊處理

大 家知道,對于一張png圖片,從大往小縮放,是可以的,但從小往大,可是會虛的哦.所以,同學們,可不能硬拉這些位圖哦. 對于xxhdip和xhdpi分辨率使用的圖片.我們需要特殊處理.要放大,最方便的圖片格式就是矢量了,如果你在fireworks中使用的是原生的矢 量圖形.我們可以直接使用fireworks的放大圖像功能,對整個圖像進行放大處理,這樣圖片質量也可以保證不會虛的.
首先,我們假設設計的圖全是矢量,接著,我們選擇設計稿下方屬性菜單. 直接將圖片寬度調整到1080,當然 得是等比例的縮放,所有我們將右側的小鎖鎖上,這樣就是等比例調節了.

無損調整到1080分辨率后,我們可以按上邊的步驟進行xxhdpi圖標的切圖. 然后按照靜電上邊給到的圖的比例進行縮放即可. 比如從xxhdpi縮放到iphone5使用的圖標大小,那么比例就是640/1080 這個比例進行縮放,具體大家自己算.

所以,對于圖標尺寸,按1080分辨率設計,其實是最理想的,但是基于靜電在切圖教程1中闡述的理由,所以靜電選擇了使用640分辨率.當然,如果大家設備許可,制作高清圖可是不2之選,一切都很方便,少了放大這個步驟.

小貼士:由于安卓機型分辨率比較多,所以安卓開發工程中,采用了幾種分辨率來適配各個機型,具體原理比較復雜,靜電就不在這里闡述了,但靜電給出如下對應關系,可以直接來套用即可. 大家請教下開發同學,就會發現,在安卓開發工程的res目錄下,分別有drawable,
drawable- mdpi,drawable-ldpi,drawable-hdpi,drawable-xhdpi,drawable-xxhdpi等文件夾.我們經常 使用的 就是hdpi,xhdpi,xxhdpi等幾個.其他的可以忽略.另外,安卓還有一種圖,叫點9圖.這個靜電在下次設計教室中為大家單獨講解.