Kawanet Blog II

アクセスカウンタ

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

<<   作成日時 : 2010/11/23 15:19   >>

かわいい ブログ気持玉 31 / トラックバック 0 / コメント 0

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

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
ImageMagickでAndroidアプリ用にiPhone風の角丸アイコン画像を生成する Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる