11
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iPhone用アプリアイコン画像からAndroid用画像をImageMagickで一発生成する

Last updated at Posted at 2016-05-23

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
11
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?