其實(shí)25學(xué)堂分享切圖的干貨很多了，今天學(xué)堂君就給剛剛?cè)腴T(mén)學(xué)習(xí)APP設(shè)計(jì)的小伙伴一些干糧。

優(yōu)秀的切圖工具推薦：Cutterman ?

想要了解更多APP切圖工具Cutterman的干貨，大家可以在25學(xué)堂上搜索：Cutterman就可。

Cutterman是一款運(yùn)行在photoshop中的插件，能夠自動(dòng)將你需要的圖層進(jìn)行輸出， 以替代傳統(tǒng)的手工 "導(dǎo)出web所用格式" 以及使用切片工具進(jìn)行挨個(gè)切圖的繁瑣流程。

它支持各種各樣的圖片尺寸、格式、形態(tài)輸出，方便你在pc、ios、Android等端上使用。

它不需要你記住一堆的語(yǔ)法、規(guī)則，純點(diǎn)擊操作，方便、快捷，易于上手。

如果你還不懂如果來(lái)設(shè)置這些切圖的參數(shù)，今天看完這篇文章 ，你就會(huì)了！

第一部分：蘋(píng)果iOS系統(tǒng)上的切圖參數(shù)設(shè)置規(guī)范

無(wú)論你是以750*1334px的設(shè)計(jì)稿切圖，還是以1242*2208px的設(shè)計(jì)稿切圖，都可以按照下面的參數(shù)設(shè)置切圖即可。

iOS切圖參數(shù)設(shè)置：選擇輸出支持IOS平臺(tái)的單倍圖、雙倍圖，支持IPHONE6/6P尺寸比例。如下圖所示的參數(shù)設(shè)置規(guī)范如下：

各位小白請(qǐng)記?。呵袌D最終的目的是輸出2套不同的切圖文件。

一套是@2x的（對(duì)應(yīng)iphone6 ?iphone7 以及iphone 5 5s）和一套@3x的（對(duì)應(yīng)iphone 6 plus和iphone 7 plus ?）。

另外幾個(gè)點(diǎn)跟大家說(shuō)明一下:

設(shè)置當(dāng)前基準(zhǔn)：意思是選擇你當(dāng)前的設(shè)計(jì)稿是750px的還是1242px的。

上圖當(dāng)中設(shè)置當(dāng)前基準(zhǔn)是 @3x

那么APP設(shè)計(jì)稿有可能是以1242px*2208px的設(shè)計(jì)稿?；蛘呤?920*1080的設(shè)計(jì)稿（安卓轉(zhuǎn)iOS）

在APP切圖工具Cutterman的迭代過(guò)程當(dāng)中：又一個(gè)出柜模式。不知道大家有印象沒(méi)？

新版已經(jīng)沒(méi)有出柜模式啦。

下面讓我們了解下?Cutterman 出柜模式的用途。如下圖：

Cutterman的“出柜模式”使用的場(chǎng)景是當(dāng)前設(shè)計(jì)稿尺寸是1242px的時(shí)候。

假設(shè)當(dāng)前設(shè)計(jì)稿尺寸是1242*2208px

那么問(wèn)題來(lái)了！

1242與640的比例是1.94，大于1.5

如果我把當(dāng)前的尺寸認(rèn)為是@3X，那除以1.5之后的@2X尺寸就會(huì)偏大

所以cutterman的@2X圖的尺寸是當(dāng)前尺寸除以1.94，以保證在640的屏幕下是合理的。像這樣：

cutterman最初就是這樣實(shí)現(xiàn)的……

直到有一天，一個(gè)小伙伴找上門(mén)來(lái)（就稱(chēng)呼A同學(xué)吧），告訴我這樣不對(duì)

他的理由是這樣的：

@3x的尺寸不應(yīng)該是@2X的屏幕等比例放大，而應(yīng)該是嚴(yán)格的1.5倍關(guān)系，這樣的話(huà)，對(duì)于6plus而言，圖就會(huì)偏小，但這是合理的，這樣能夠給內(nèi)容流出更多的展示空間，符合6p的設(shè)計(jì)原則，而不是簡(jiǎn)單的把5的界面等比例放大到6的界面。

然后我被說(shuō)服了……覺(jué)得這樣是有道理的。 ?于是，cutterman的實(shí)現(xiàn)變成這樣：

改成這種方案之后，cut不斷地被問(wèn)：怎么我切不出@3x的圖了，@3x的圖不對(duì)等等

因?yàn)槟阍僖矡o(wú)法切出120px的圖了……每到這個(gè)時(shí)候，我就需要給大家解釋以上那么多內(nèi)容，而且經(jīng)常都是沒(méi)有人能夠理解。

然后我發(fā)現(xiàn)，大部分同學(xué)的理解，還是以@3X為當(dāng)前設(shè)計(jì)稿尺寸，來(lái)進(jìn)行縮小展示的，所以……cutterman現(xiàn)在的策略是這樣：

這樣的策略基本就滿(mǎn)足廣大切圖小伙伴的需要了~

不過(guò)，為了滿(mǎn)足之前A同學(xué)的那種需求，cut君加入了一個(gè)開(kāi)關(guān)，即是大家看到的“出柜模式”。

默認(rèn)，該開(kāi)關(guān)是關(guān)閉的，如果你認(rèn)同A同學(xué)的理論，并且覺(jué)得它是正確的，你就打開(kāi)出柜模式，進(jìn)入出柜狀態(tài)~~

這是一點(diǎn)點(diǎn)小插曲。 這回你應(yīng)該明白 ? 出柜模式的用途吧！其實(shí)兩種都是可取的。如果你認(rèn)同A同學(xué)的看法，就選擇出柜模式。如果你認(rèn)為是正常的縮寫(xiě)1。5倍，就不需要理會(huì)出柜模式。

第二部分：Android平臺(tái)的切圖參數(shù)設(shè)計(jì)規(guī)范

輸出支持Android平臺(tái)的各種分辨率大小圖片，什么XXHPDI，XHDPI，HDPI啊之類(lèi)的，通通自動(dòng)化輸出，為你節(jié)省出更多的時(shí)間陪小伙伴好好玩耍。

安卓設(shè)計(jì)稿的詳細(xì)的切圖參數(shù)設(shè)置如下：

目前最常見(jiàn)的安卓設(shè)計(jì)稿為720*1280的或者是1920*1080px的。

最后，25學(xué)堂的小編在跟小白們叮囑一下：

設(shè)計(jì) Android 應(yīng)用的最佳實(shí)踐：

1. 畫(huà)布大小定位 720 x 1280，72 dpi

2. 只使用偶數(shù)單位的尺寸，比如 96 px 的列表項(xiàng)高度，16 px 的邊距，64 px 的圖標(biāo)邊長(zhǎng)

3. 只使用 24 pt，28 pt，36 pt 和 44 pt 的字體

4. 設(shè)計(jì)完成以后，所有尺寸的 px 值除以 2 作為 dp 數(shù)值交給工程師

5. 所有字體的 pt 值除以 2 作為 sp 數(shù)值交給工程師

6. 所有切圖變成三份，分別是原始大小、縮小 1.5 倍，放大1.5 倍，分別作為 xhdpi，hdpi，xxhdpi的資源交給安卓工程師。

以上就是25學(xué)堂針對(duì)小白使用APP切圖工具Cutterman當(dāng)中的一些疑問(wèn)做一些回答和解讀。希望對(duì)各位小白有所幫助。