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プログラミング入門 の詳しい情報を見る / ウェブリブログ商品ポータル

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 31

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた 驚いた 驚いた
面白い 面白い 面白い 面白い 面白い
ナイス ナイス ナイス ナイス ナイス
ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!)
かわいい かわいい かわいい かわいい かわいい かわいい かわいい

この記事へのコメント

この記事へのトラックバック