利用 ImageMagick 製作 App 所需的 icon size

以下是 Android / iOS 兩種平台的 icon 開發指南，裡面有條列解析度/機型對應的 icon size

• Android: Iconography | Android Developers
• iOS: iOS Human Interface Guidelines: Custom Icon and Image Creation Guidelines

在此我是利用 PhoneGap 建立 mobile 專案，預設就有一組 icon，我們只要準備相同解析度的圖片覆蓋過去就可以了

Android 各解析度 icon 分別放置在不同的資料夾底下

• res/drawable/logo.png 96x96
• res/drawable-xhdpi/logo.png 96x96
• res/drawable-hdpi/logo.png 72x72
• res/drawable-mdpi/logo.png 48x48
• res/drawable-ldpi/logo.png 36x36

iOS 擺放 icon 的位置在專案資料夾底下的 {project-name}/Resources/icons/

• icon-72.png 72x72
• icon-72@2x.png 144x144
• icon.png 57x57
• icon@2x.png 114x114

利用 ImageMagick 搭配 shell script 就可以一次轉出所有解析度的 icon

安裝 ImageMagick 目前最新版本 6.8.6-8

$ ./configure --with-png=yes
$ make && make install

轉換解析度

$ convert logo-src.png -resize 72x72 logo-72.png

批次轉換 script: convert.sh

#/bin/sh

res=(144 114 96 72 57 48 36)
for i in "${res[@]}"
do
    echo "convert icon for ${i}x${i}"
    convert logo-src.png -resize ${i}x${i} logo-${i}.png
done

記得 icon 的來源檔案解析度至少要大於144，轉出來才不會糊掉