切圖大法:一鍵導出App icon
切圖大法:一鍵導出App icon-移動閱讀二維碼

還在為切不同大小的app icon感到苦惱嘛?看完本文,你也許能找到答案,熊式切圖法,你值得擁有

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

總的思路就是設計好最大的尺寸(1024px*1024px)后,將對應的所有層轉換為智能對象,再縮放至各種不同的小尺寸,然后重命名圖層,最后通過

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

切圖大法:一鍵導出App icon

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

切圖大法:一鍵導出App icon

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

方案1:psb智能對象

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

優點:所有效果都在ps中實現,無需切換軟件,像素級精細

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

切圖大法:一鍵導出App icon

關閉邊緣填充圖層的小眼睛,放大看看icon邊緣有啥不同?

 

方案2:ai智能對象

在ai中復制的對象,粘貼到ps中時會詢問粘貼為:

切圖大法:一鍵導出App icon

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

優點:在ai中利用尺規作圖繪制復雜的曲線十分便捷(再說句題外話,順手推薦神器:SubScribe,請自行谷歌),縮放后不會出現上邊psb智能對象的邊緣透明問題,所以文件層級結構簡單,給智能對象改名即可

缺點:元素不要超出1024×1024這個畫布的范圍,否則保存后回到ps里邊緣可能會虛(把超出的圖層隱藏掉也沒用);除非開啟像素預覽+像素對齊,否則ai中的錨點和曲線坐標可能出現小數點導致邊緣發虛

切圖大法:一鍵導出App icon

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

方案3:純ai文件

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

切圖大法:一鍵導出App icon

這個符號就等于是一個智能對象啦,然后將它復制若干份調整為不同的大小,再用“畫板工具”

切圖大法:一鍵導出App icon

點擊每個符號生成多個畫板,記得重命名畫板

切圖大法:一鍵導出App icon

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

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

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

更新補充:

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


順手附上:Adobe官網的“生成器命名規則”

 

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

更多APP切圖教程:
“沒有它我就不會切圖!”愛用切圖神器:Slicy
使用 Adobe Illustrator 做 UI設計——切圖、導出的秘訣
APP切圖那點事兒–詳細介紹android和ios平臺
切圖小貼士

本文鏈接:http://www.casaleticia.com/a-key-export-app-icon.html
本文標簽: , , ,