ImageMagickでAndroidアプリ用にiPhone風の角丸アイコン画像を生成する(2010年の記事)からのアップデート版。
- 用意するもの: iOS 用アプリアイコン PNG 画像 (Artwork) (1024x1024ピクセル)
- できるもの: Android 用アプリアイコン PNG 画像(1024x1024ピクセル)
(1) 事前準備: imagemagick をインストールしておく
brew install imagemagick
(2) 事前準備: 角丸マスク画像を用意する
- iOS アプリアイコンの角丸は、OS ないし Apple がよろしく処理してくれます。
- Android アプリアイコンは、開発者側で、事前に角丸を処理する必要があります。
- iOS 7 以降と同等の角丸のマスク画像を用意してあります → ios7icon-mask.png をダウンロードして下さい。
(3) 事前知識: Android のガイドラインを参照
- Android アプリアイコンは正方形・長方形・円形といった形状によって、推奨されるサイズが異なります。
- iOS アプリアイコンは 1024x1024 ピクセルめいいっぱいを使って OK ですが、Android アプリでは余白を調整してあげる必要があります。ガイドラインを参照 すると、正方形アイコンなら192ピクセル中の152ピクセルを使うように書いてあります。つまり、見た目が 80%のサイズになるように上下左右に余白を付けます。
(4) 80%サイズのバリエーション作成
- ImageMagic を使って、Android の各画面解像度ごとの画像を自動生成できます。
mkdir drawable-mdpi drawable-hdpi drawable-xhdpi drawable-xxhdpi drawable-xxxhdpi
convert ios.png -matte ios7icon-mask.png -compose copy-opacity -composite round.png
# 192x192
convert round.png -resize 152x152 -background transparent -gravity northwest -splice 20x20 -gravity southeast -splice 20x20 drawable-xxxhdpi/ic_launcher.png
# 144x144
convert round.png -resize 114x114 -background transparent -gravity northwest -splice 15x15 -gravity southeast -splice 15x15 drawable-xxhdpi/ic_launcher.png
# 96x96
convert round.png -resize 76x76 -background transparent -gravity northwest -splice 10x10 -gravity southeast -splice 10x10 drawable-xhdpi/ic_launcher.png
# 72x72
convert round.png -resize 58x58 -background transparent -gravity northwest -splice 7x7 -gravity southeast -splice 7x7 drawable-hdpi/ic_launcher.png
# 48x48
convert round.png -resize 38x38 -background transparent -gravity northwest -splice 5x5 -gravity southeast -splice 5x5 drawable-mdpi/ic_launcher.png
(5) 100%サイズのバリエーション作成(6/14追記)
しかし、実機でみると 80%だと小さすぎる感じがしますね。
100% サイズで解像度のバリエーションを作る手順は以下のとおり。
mkdir drawable-mdpi drawable-hdpi drawable-xhdpi drawable-xxhdpi drawable-xxxhdpi
convert ios.png -matte ios7icon-mask.png -compose copy-opacity -composite round.png
# xxxhdpi: 192x192
convert round.png -resize 192x192 drawable-xxxhdpi/ic_launcher.png
# xxhdpi: 144x144
convert round.png -resize 144x144 drawable-xxhdpi/ic_launcher.png
# xhdpi: 96x96
convert round.png -resize 96x96 drawable-xhdpi/ic_launcher.png
# hdpi: 72x72
convert round.png -resize 72x72 drawable-hdpi/ic_launcher.png
# mdpi: 48x48
convert round.png -resize 48x48 drawable-mdpi/ic_launcher.png
# google play: 512x512
convert round.png -resize 512x512 -background transparent googleplay.png