2017年2月21日更新
感謝偉大的Sketch，為我們提供了更便捷的icon導(dǎo)出方法，原理差不多，用一個公用組件來實現(xiàn)同步修改，不同尺寸的用途都標(biāo)注在導(dǎo)出的名稱內(nèi)，見附件

11月30日更新
附件中提供的模板使用方法：

雙擊圖層縮略圖，將你的1024x1024的icon放入智能對象中，保存后模板中就會全部更新為你的新icon了，其實用本文提到的方法只用一個圖層就可以導(dǎo)出各種尺寸的文件了，做成這樣是為了方便大家預(yù)覽所有尺寸的效果，尤其是小尺寸的icon

另外新做了一版用二次線性算法縮放的psb智能對象，這樣就不用墊底色了，邊緣是完美的硬邊~

更新還包括了iphone6+專用的60x60@3x.png（180x180）

--------------------------更新的分割線--------------------------

做App設(shè)計的小伙伴有沒有遇到這種情況呢，同一個icon要輸出N種尺寸，用傳統(tǒng)的方法批處理調(diào)整圖片大小比較繁瑣，不方便同時整體預(yù)覽，如果后續(xù)修改了設(shè)計，又要重復(fù)一次這個批處理的過程，有沒有一鍵輸出所有尺寸的方法呢？本熊這就給大家推薦一種強大的技巧：智能對象+生成圖像資源，是的，本熊不要臉的將其命名為“熊氏切圖法”

總的思路就是設(shè)計好最大的尺寸（1024px*1024px）后，將對應(yīng)的所有層轉(zhuǎn)換為智能對象，再縮放至各種不同的小尺寸，然后重命名圖層，最后通過

文件 > 生成 > 圖像資源，自動生成不同尺寸的icon文件。

智能對象已經(jīng)誕生很久啦，想必大家都不陌生，我就不廢話了，相關(guān)的資料早就有酷友分享過，另外這個“生成圖像資源”是從adobe cc后才有的新功能，它的橫空出世讓UI設(shè)計師們終于脫離了手動切圖的苦海，這個功能默認(rèn)是關(guān)閉狀態(tài)，每次都需要手動開啟（文件 > 生成 > 圖像資源），它的原理是識別圖層名稱中有無“.jpg”".png"之類的擴展名，將擁有擴展名的圖層或組自動保存為單獨的對應(yīng)格式的圖片（保存的時機是在你保存psd文件的同時），存放在psd同級目錄的“-assets”文件夾中；當(dāng)你需要修改icon或者導(dǎo)出其他項目的icon時，只需要打開任意一個智能對象，將新設(shè)計替換進去，保存智能對象和psd后，所有小尺寸的icon也更新為修改后的版本，assets文件夾中的文件也會更新。

原理明白了，實際操作中會遇到一些具體的問題，以下就是本熊根據(jù)上述方法發(fā)展出的三種方案he和一些心得體會，與大家分享，希望能拋磚引玉

方案1：psb智能對象

轉(zhuǎn)換為智能對象的圖層，實際上是被轉(zhuǎn)換成了“psb”格式的文件保存在“psd”文件中（很拗口有木有？）雙擊智能對象圖層的縮略圖即可編輯，我稱之為psb智能對象（說句題外話，將圖層轉(zhuǎn)換為智能對象默認(rèn)是沒有快捷鍵的，而“轉(zhuǎn)換色彩模式”這么不常用的功能居然有快捷鍵，而且還是ctrl+Y，ctrl+T自由變換的時候很容易誤操作有木有？餓逗比太反人類了，所以建議把ctrl+Y改成轉(zhuǎn)換為智能對象~）

優(yōu)點：所有效果都在ps中實現(xiàn)，無需切換軟件，像素級精細(xì)

缺點：智能對象如果是psb圖層的話，縮小后最邊緣的一圈1px的范圍會發(fā)虛，變成半透明的狀態(tài)（這個無法避免，跟縮放的算法有關(guān)），我的解決方案是：在智能對象下建立一個大小一致的矢量圖層，放在同一文件夾之下，文件夾名稱改為“生成圖像”的命名規(guī)則（如image@2x.png），如下圖：

關(guān)閉邊緣填充圖層的小眼睛，放大看看icon邊緣有啥不同？

方案2：ai智能對象
在ai中復(fù)制的對象，粘貼到ps中時會詢問粘貼為：

如選擇智能對象，那么之后雙擊縮略圖就會在ai中打開，我稱之為ai智能對象

優(yōu)點：在ai中利用尺規(guī)作圖繪制復(fù)雜的曲線十分便捷（再說句題外話，順手推薦神器：SubScribe，請自行谷歌），縮放后不會出現(xiàn)上邊psb智能對象的邊緣透明問題，所以文件層級結(jié)構(gòu)簡單，給智能對象改名即可

缺點：元素不要超出1024x1024這個畫布的范圍，否則保存后回到ps里邊緣可能會虛（把超出的圖層隱藏掉也沒用）；除非開啟像素預(yù)覽+像素對齊，否則ai中的錨點和曲線坐標(biāo)可能出現(xiàn)小數(shù)點導(dǎo)致邊緣發(fā)虛

對比下psb的版本，不需要填補邊緣的透明色，層級簡單多了

方案3：純ai文件

其實ai本身有2個很強大的特性：符號和畫板，可以方便的實現(xiàn)同一個元素的不同尺寸輸出：將任意圖形拖動到符號面板里即可轉(zhuǎn)換為“符號”，

這個符號就等于是一個智能對象啦，然后將它復(fù)制若干份調(diào)整為不同的大小，再用“畫板工具”點擊每個符號生成多個畫板，記得重命名畫板

最后用“導(dǎo)出”命令，勾選“使用畫板”，就能生成一系列不同尺寸的圖片，文件名是ai文件名+畫板名。

舉個栗子：把畫板的名稱修改為image@2x，ai文件名是App icon，那么導(dǎo)出的png圖片就是App icon_image@2x.png，如覺得ai文件名多余，可用批量重命名工具去掉“_”之前的ai文件名

以上就是全部三種方法啦，其實這個方法不止限于App icon，同樣適用于生成手機壁紙等需要輸出各種尺寸的場合，大家可以發(fā)揮一下想象~

更新補充：

感謝微博上@T哎cc 提醒，其實還有有一種十分簡單殘暴的方法可以將一個圖層導(dǎo)出成為若干個不同尺寸的文件（無需轉(zhuǎn)換為智能對象），只需要用到生成器：將圖層或組命名為“1024.jpg,50% 512.png,200% 2048.jpg”，這樣就可以生成1024.jpg、 512.png、2048.jpg三張圖片，圖層名中的逗號用來分割文件名，百分比表示在當(dāng)前圖層或組的基礎(chǔ)上縮放的比值，真正做到“一鍵生成”多種尺寸，當(dāng)然這個方法也有缺點，跟第一種方式一樣，被縮小的圖像會因為算法的問題導(dǎo)致邊緣虛掉，且無法用添加底層的方法彌補，如果輸出的圖像多的話，圖層名稱會非常的長...感受一下4個圖像時的效果：

順手附上：Adobe官網(wǎng)的“生成器命名規(guī)則”

好啦，最后是福利，附件中是我制作的三種方法對應(yīng)的源文件，大家可以下載下來研究下（使用mac打包的，win系統(tǒng)的話請用最新版winRAR解壓，否則文件名可能會有亂碼）本熊比較懶，附件里沒有做retina HD 的@3x尺寸，需要的朋友可以自己動手做做看，另外附上App Icon Template [4.0] 文件太大所以只提供鏈接，里邊包含了iphone6 plus對應(yīng)的icon尺寸。