目前很多手機(jī)app設(shè)計(jì)師都在使用Cutterman工具進(jìn)行切圖，因?yàn)檫@個(gè)軟件是國(guó)內(nèi)的軟件，切圖也必將方便。也提供了3個(gè)平臺(tái)的切圖方式。最新的Cutterman切圖插件如下圖：

IOS:?如果你是為Iphone設(shè)計(jì)界面，請(qǐng)使用ios標(biāo)簽，它能夠?yàn)槟闵煞蟟os系統(tǒng)的單/雙倍圖

Android:?如果你是為Android設(shè)計(jì)界面，請(qǐng)使用Android標(biāo)簽，它能夠生成符合Android系統(tǒng)的各種DPI分辨率圖片

?PC:?如果你是做web端的設(shè)計(jì)，請(qǐng)使用PC標(biāo)簽，它可以支持輸出png/jpg/gif等各種格式和質(zhì)量大小的圖片

選擇完平臺(tái)后，會(huì)進(jìn)入到主界面，如果需要切換平臺(tái)，可以點(diǎn)擊界面左上角的箭頭按鈕，切換目標(biāo)平臺(tái)。

我們先來(lái)回顧一下切圖知識(shí)點(diǎn)重點(diǎn)提示：

1）、所有切圖必須為偶數(shù)。不管是ios的切圖 還是android 的切圖。

2）、可平鋪部件切圖時(shí)可如下圖：

帶圓角按鈕切圖時(shí)可如下圖

同理

并在效果圖中標(biāo)出具體大小和尺寸。

3）、ios切圖需要切出2套，一套是@2x png和一套@3x的png、png格式為24位的png。

APP界面具體的切圖細(xì)分：引導(dǎo)頁(yè)、啟動(dòng)頁(yè)、APP圖標(biāo)、需要作為整塊的元素都是要切除@2x和@3x2套的切圖素材。

如果需要平鋪的元素：如背景、線條、按鈕、漸變等等 都是切.9.png ? 點(diǎn)九圖是適合ios和android 2大系統(tǒng)的。

現(xiàn)在精準(zhǔn)化的元素切圖是保證還原高品質(zhì)app界面設(shè)計(jì)的保證。切圖的技巧決定移動(dòng)app界面設(shè)計(jì)美觀度。當(dāng)然還有標(biāo)注。

4）、所有表單元素務(wù)必切兩種狀態(tài)：比如按鈕的正常狀態(tài)和按下?tīng)顟B(tài) ?checkbox的選中狀態(tài)和未選中狀態(tài)等等。如下圖的圖標(biāo)切圖狀態(tài)示例圖：

25學(xué)堂的關(guān)于Cutterman切圖的干貨教程有：

1、易上手的APP切圖教程以及Cutterman切圖視頻演示

2、移動(dòng)APP設(shè)計(jì)之PS切圖插件大匯總，值得收藏

3、移動(dòng)APP切圖工具Cutandslice以及使用教程

4、Android APP界面標(biāo)注、尺寸換算和APP標(biāo)注工具

5、Android尺寸標(biāo)注設(shè)計(jì)大全和Android切圖規(guī)范

今天25學(xué)堂只是跟大家講解cutterman ps插件安裝完成之后，如何來(lái)使用cutterman工具進(jìn)行切圖。3步輕松搞定Cutterman切圖。算是一個(gè)比較簡(jiǎn)單的Cutterman切圖教程。

Cutterman切圖簡(jiǎn)單步驟：

第一種情況：導(dǎo)出一個(gè)圖層的切圖素材。

1. 選中一個(gè)你需要輸出的圖層。

2. 點(diǎn)擊“保存路徑”按鈕，設(shè)置你想導(dǎo)出到本地的某個(gè)文件夾。

3. 點(diǎn)擊“導(dǎo)出選中圖層”按鈕。

注意 !一個(gè)圖層組對(duì)Cutterman而言，仍然表示一個(gè)圖層，會(huì)將組里頭的所有內(nèi)容合并作為一個(gè)圖層輸出。

第二種情況：導(dǎo)出多個(gè)圖層切圖素材：

1. 選中多個(gè)圖層

2. 點(diǎn)擊“保存路徑”按鈕，設(shè)置你想導(dǎo)出到本地的某個(gè)文件夾

3. 點(diǎn)擊“導(dǎo)出選中圖層”按鈕

注意 !選中多個(gè)圖層進(jìn)行導(dǎo)出，默認(rèn)會(huì)逐一輸出每個(gè)選中的圖層，如果希望將選中的多個(gè)圖層合并導(dǎo)出，請(qǐng)?jiān)诮缑嬗稚辖堑脑O(shè)置項(xiàng)里頭進(jìn)行設(shè)置。

第三種情況：固定切圖尺寸來(lái)切圖素材

1. 在固定尺寸的位置填入你希望輸出的寬和高，注意必須要比icon的尺寸要大。

2. 點(diǎn)擊導(dǎo)出選中圖層按鈕。

注意 !設(shè)置固定尺寸后，icon會(huì)默認(rèn)居中顯示。如果設(shè)置的尺寸比icon尺寸小，會(huì)出現(xiàn)icon被裁剪的現(xiàn)象

以上就是使用Cutterman切圖的三種情況一一跟大家講解啦。這回是不是很容易上手來(lái)進(jìn)行Cutterman切圖啦。如果你還不是明白，可以加我們25學(xué)堂的微信或QQ群。主動(dòng)問(wèn)群里的app設(shè)計(jì)大牛們。