2013/08/26

利用 ImageMagick 製作 App 所需的 icon size

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


在此我是利用 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,轉出來才不會糊掉



沒有留言:

張貼留言