ImageMagickでAndroidアプリ用にiPhone風の角丸アイコン画像を生成する

iPhone アプリのアイコンは、アプリ内の PNG に対して iOS が角丸を付けて表示しますが、
Android アプリのアイコンは、アプリ内の PNG ファイルがそのまま表示されます。
Android アプリ用に、iPhone アプリみたいな角丸アイコンを作成する手順をまとめました。
ImageMagick の convert コマンドを使うので、無料で作れます。
角丸は、αチャンネルを使っているので、ジャギーが目立たずに、スムーズに表示されます。

(1)予め ImageMagick をインストールしておく
http://www.imagemagick.org/script/binary-releases.php#macosx
sudo port install ImageMagick


(2)下記のマスク画像(グレースケールPNG)をダウンロードしておく
(ファイル名:mask-white-r85.png)



(3)iPhone アプリ用と同じ 512×512 ピクセルの PNG 画像を用意する

iPhone アプリでは、512×512 ピクセルの iTunesArtwork ファイルが必要で、
そこから各サイズのアプリアイコン画像を生成していきます。
(ファイル名:artwork.png)

(4)ターミナルから、下記のコマンドを実行する

convert artwork.png -matte mask-white-r85.png -compose copy-opacity -composite -unsharp 0x1 -resize 36x36 icon-36r.png
convert artwork.png -matte mask-white-r85.png -compose copy-opacity -composite -unsharp 0x1 -resize 48x48 icon-48r.png
convert artwork.png -matte mask-white-r85.png -compose copy-opacity -composite -unsharp 0x1 -resize 72x72 icon-72r.png

ImageMagick の convert コマンドを使っています。
最初のファイル名 artwork.png が、入力元ファイル名です。
-matte mask-white-r85.png がマスクに使う画像を指定しています。
-compose copy-opacity -composite はアルファチャンネル(αチャンネル)の合成です。
-unsharp 0x1 はアンシャープマスクです。
-resize 72x72 で 512x512 → 72x72 ピクセルに縮小しています。
最後のファイル名 icon-72r.png が、出力先ファイル名です。

(5)画像ができた!

以下のように、iPhone みたいな角丸のアイコンができました。


iPhone アプリと違って、影などは付けていません。
シンプルな角丸アイコンになります。

PS.
Photoshop でもαチャンネルPNG (PNG-32) を作れるはずだけど、いまいち手順が分からなかった。



Google Androidプログラミング入門
アスキー・メディアワークス
江川 崇

amazon.co.jpで買う
Amazonアソシエイト by Google Androidプログラミング入門 の詳しい情報を見る / ウェブリブログ商品ポータル

"ImageMagickでAndroidアプリ用にiPhone風の角丸アイコン画像を生成する" へのコメントを書く

お名前
メールアドレス
ホームページアドレス
コメント