利用 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，轉出來才不會糊掉

在 OS X 安裝 GraphicsMagick 和 Pgmagick

有時候在 Mac OS X 想自己抓 source code 回來裝都會很頭大，所以有人就會建議用套件管理程式，像 MacPorts、HomeBrew、Fink，但說真的也不是什麼套件都在這地方找得到。


這次想在 OS X 安裝 GraphicsMagick 和 Pgmagick，GraphicsMagick 是一套圖形處理的 library，比 ImageMagick 更快更好。其實我也沒有要處理太複雜的事情，就 圖形的裁切、縮放、套用一些濾鏡而已，但速度是我考量的。而 Pgmagick 則是 for python 的 wrapper。


直接抓 GraphicsMagick 原始碼下來編譯
遇到問題：

Undefined symbols for architecture x86_64:
  "___builtin_object_size", referenced from:
      _BlurImageScanlines.omp_fn.1 in magick_libGraphicsMagick_la-effect.o
      _XShearImage.omp_fn.0 in magick_libGraphicsMagick_la-shear.o
      _YShearImage.omp_fn.1 in magick_libGraphicsMagick_la-shear.o
ld: symbol(s) not found for architecture x86_64
collect2: ld returned 1 exit status
make[1]: *** [magick/libGraphicsMagick.la] Error 1
make: *** [all] Error 2

遇到這種問題都很沒轍，上次遇到時好像是 dependency 的library configure 時沒有加 --enable-shared，但這次就不知道怎麼找了。

加了一些有的沒的環境變數 LDFLAGS="-arch x86_64" CXXFLAGS="-arch x86_64" CFLAGS="-m64" ... 沒用。