GIMPやInkscapeで作ったアプリアイコンをiOS・Android向けに一括リサイズする

#はじめに
個人アプリ開発者にとって、アプリアイコンの作成は意外に骨の折れる作業ではないでしょうか。
非デザイナーであればPhotoshopやIllustratorの代わりに無料のGIMPやInkscapeを使っている方も多いと思います。

そこで、この記事ではGIMPまたはInkscapeで作成したアイコン画像をiOSまたはAndroid向けに一括でリサイズし、実際にアプリのアイコンとして設定するまでの手順を紹介します。

##必要なもの

• WindowsまたはMac
• GIMPまたはInkscape
• XcodeまたはAndroid Studio(アイコンの生成自体には必要ありません)

#iOS・Androidで必要なアイコンの画像サイズ
##iOS 10

用途	サイズ
通知	20 x 20
設定	29 x 29
通知(2x), Spotlight	40 x 40
設定(2x)	58 x 58
通知(3x)	60 x 60
iPadホーム	76 x 76
Spotlight(2x)	80 x 80
設定(3x)	87 x 87
iPhoneホーム(2x), Spotlight(3x)	120 x 120
iPadホーム(2x)	152 x 152
iPad Proホーム(2x)	167 x 167
iPhoneホーム(3x)	180 x 180
App Store	1024 x 1024

##Android

用途	サイズ
ランチャー(mdpi)	48 x 48
ランチャー(hdpi)	72 x 72
ランチャー(xhdpi)	96 x 96
ランチャー(xxhdpi)	144 x 144
ランチャー(xxxhdpi)	192 x 192
Google Play Store	512 x 512

#アイコン画像を作る
作り始める前にガイドラインを読みましょう。

・iOS
英語：App Icon - Graphics - iOS Human Interface Guidelines
日本語：iOSヒューマンインターフェイスガイドライン: アプリケーションアイコン

・Android
英語：Icons - Style - Material design guidelines
日本語：マテリアル デザインのガイドライン（日本語版） (スタイル→製品アイコンのところ)

ガイドラインを読むとわかりますが、iOS用のアイコンは角丸の枠で切り抜く必要はありません。正方形のアイコンを設定するとシステム側が自動的に角丸に切り抜いて表示してくれます。

GIMPでアイコン画像を作る場合、キャンバスサイズはそれぞれのOSで必要な最大のサイズ(iOSは1024x1024, Androidは512x512)に合わせましょう。

GIMPとInkscapeの細かい操作方法については割愛します。

#アイコンを一括リサイズする
##GIMP編
GIMPでリサイズ元の画像を開いた状態で、メニューのフィルター→Python-Fu→コンソールを選択します。

出てきたコンソール画面に以下のコードをコピペしてEnterキーを押します。

iOS用

import os

def mkdir_if_not_exists(dir_name):
  if not os.path.exists(dir_name):
    os.mkdir(dir_name)

def main():
  # ホームディレクトリに画像出力先ディレクトリを作成
  output_dir = os.path.join(os.path.expanduser('~'), "app_icons")
  mkdir_if_not_exists(output_dir)
  ios_dir = os.path.join(output_dir, "ios")
  mkdir_if_not_exists(ios_dir)
  img = gimp.image_list()[0]
  sizes = [20, 29, 40, 58, 60, 76, 80, 87, 120, 152, 167, 180, 1024]
  for size in sizes:
    output_img = pdb.gimp_image_duplicate(img)
    # 画像をリサイズ
    pdb.gimp_image_scale(output_img, size, size)
    layer = pdb.gimp_image_merge_visible_layers(output_img, 0)
    pdb.gimp_layer_resize_to_image_size(layer)
    # PNG画像を保存
    output_filename = os.path.join(ios_dir, str(size) + ".png")
    pdb.gimp_file_save(output_img, layer, output_filename, output_filename)

main()

Android用

import os

def mkdir_if_not_exists(dir_name):
  if not os.path.exists(dir_name):
    os.mkdir(dir_name)

def resize_and_save_image(img, size, output_dir):
  # 画像をリサイズ
  pdb.gimp_image_scale(img, size, size)
  layer = pdb.gimp_image_merge_visible_layers(img, 0)
  pdb.gimp_layer_resize_to_image_size(layer)
  # PNG画像を保存
  output_filename = os.path.join(output_dir, "ic_launcher.png")
  pdb.gimp_file_save(img, layer, output_filename, output_filename)

def main():
  # ホームディレクトリに画像出力先ディレクトリを作成
  output_dir = os.path.join(os.path.expanduser('~'), "app_icons")
  mkdir_if_not_exists(output_dir)
  android_dir = os.path.join(output_dir, "android")
  mkdir_if_not_exists(android_dir)
  img = gimp.image_list()[0]
  resize_and_save_image(pdb.gimp_image_duplicate(img), 512, android_dir)
  size_map = {"mipmap-mdpi":48, "mipmap-hdpi":72, "mipmap-xhdpi":96, "mipmap-xxhdpi":144, "mipmap-xxxhdpi":192}
  for name, size in size_map.items():
    res_dir = os.path.join(android_dir, name)
    mkdir_if_not_exists(res_dir)
    resize_and_save_image(pdb.gimp_image_duplicate(img), size, res_dir)

main()

Windowsの場合、ユーザーフォルダC:\Users\ユーザー名\直下にapp_iconsという名前のフォルダが生成され、その中に各サイズのアイコンが出力されます。

Macの場合、ユーザーのホームディレクトリ~/直下にapp_iconsが生成されます。

##Inkscape編

※もし以下の手順で上手くいかない場合は、InkscapeでPNGを一度書き出してからGIMP編の手順でリサイズするのもいいと思います。書き出しサイズはiOSなら1024x1024、Androidなら512x512にしましょう。

###Windowsの場合
inkscapeコマンドを使用するため、PATHを通します。
コントロールパネル→システムとセキュリティ→システム→システムの詳細設定→詳細設定タブ→環境変数→システム環境変数のPathにC:\Program Files\Inkscapeを追加します。

コマンドプロンプトでinkscape -Vと入力してinkscapeのバージョンが表示されればOKです。

次に、以下の内容の.batファイルを適当な場所に保存してください。

iOS用

svg2png_ios.bat

mkdir app_icons
cd app_icons
mkdir ios
cd ios
inkscape -z -f %1 -e ./20.png -w 20 -h 20
inkscape -z -f %1 -e ./29.png -w 29 -h 29
inkscape -z -f %1 -e ./40.png -w 40 -h 40
inkscape -z -f %1 -e ./58.png -w 58 -h 58
inkscape -z -f %1 -e ./60.png -w 60 -h 60
inkscape -z -f %1 -e ./76.png -w 76 -h 76
inkscape -z -f %1 -e ./80.png -w 80 -h 80
inkscape -z -f %1 -e ./87.png -w 87 -h 87
inkscape -z -f %1 -e ./120.png -w 120 -h 120
inkscape -z -f %1 -e ./152.png -w 152 -h 152
inkscape -z -f %1 -e ./167.png -w 167 -h 167
inkscape -z -f %1 -e ./180.png -w 180 -h 180
inkscape -z -f %1 -e ./1024.png -w 1024 -h 1024

Android用

svg2png_android.bat

mkdir app_icons
cd app_icons
mkdir android
cd android
mkdir mipmap-mdpi
mkdir mipmap-hdpi
mkdir mipmap-xhdpi
mkdir mipmap-xxhdpi
mkdir mipmap-xxxhdpi
inkscape -z -f %1 -e ./ic_launcher.png -w 512 -h 512
inkscape -z -f %1 -e ./mipmap-mdpi/ic_launcher.png -w 48 -h 48
inkscape -z -f %1 -e ./mipmap-hdpi/ic_launcher.png -w 72 -h 72
inkscape -z -f %1 -e ./mipmap-xhdpi/ic_launcher.png -w 96 -h 96
inkscape -z -f %1 -e ./mipmap-xxhdpi/ic_launcher.png -w 144 -h 144
inkscape -z -f %1 -e ./mipmap-xxxhdpi/ic_launcher.png -w 192 -h 192

.batファイルにInkscapeで作成したSVGファイルをドラッグアンドドロップすると、app_iconsという名前のフォルダが入力のSVGファイルと同じ場所に生成され、その中に各サイズのアイコンが出力されます。

###Macの場合

Windowsの場合と同様、inkscapeコマンドを使用するためにPATHを通します。
~/.bash_profileにexport PATH=$PATH:/Applications/Inkscape.app/Contents/Resources/binを追加し、$ source ~/.bash_profileを実行するとinkscapeコマンドが使えるようになります。

ターミナルで$ inkscape -Vと入力してinkscapeのバージョンが表示されればOKです(Locale云々の警告が出ますが無視して問題ありませんでした)。

次に、以下の内容の.shファイルをInkscapeで作成したSVGファイルと同じ場所に保存してください。

iOS用

svg2png_ios.sh

#!/bin/bash

path=$(cd $(dirname $1) && pwd -P)
mkdir -p $path/app_icons/ios
for i in 20 29 40 58 60 76 80 87 120 152 167 180 1024; do
  inkscape -z -f $path/$(basename $1) -e $path/app_icons/ios/$i.png -w $i -h $i
done

Android用

svg2png_android.sh

#!/bin/bash

path=$(cd $(dirname $1) && pwd -P)
mkdir -p $path/app_icons/android
inkscape -z -f $path/$(basename $1) -e $path/app_icons/android/ic_launcher.png -w 512 -h 512
array=(mipmap-mdpi:48 mipmap-hdpi:72 mipmap-xhdpi:96 mipmap-xxhdpi:144 mipmap-xxxhdpi:192)
for i in ${array[@]}; do
  res_dir=$path/app_icons/android/${i%%:*}
  size=${i#*:}
  mkdir -p $res_dir
  inkscape -z -f $path/$(basename $1) -e $res_dir/ic_launcher.png -w $size -h $size
done

ターミナルで以下のように実行すると、app_iconsという名前のフォルダが入力のSVGファイルと同じ場所に生成され、その中に各サイズのアイコンが出力されます。

$ bash svg2png_ios.sh [ファイル名].svg

$ bash svg2png_android.sh [ファイル名].svg

#アプリアイコンを設定する
##iOS
Xcodeの左側のツリーのAssets.xcassetsをダブルクリックで開き、AppIconを選択するとアプリアイコンを設定する画面になります。
どこにどのサイズを設定すればよいのか青字で記しておきました。

あとは、前の手順で生成したPNGファイルを対応する数字の場所にドラッグアンドドロップするだけです。
1024x1024の画像はiTunes Connectでのアプリ申請時に必要となります。

##Android

プロジェクトフォルダ内のapp/main/res/直下に、前の手順で生成したapp_icons/android/の中にある5つのフォルダ(mipmap-*)をコピペしてください。
デフォルトの状態で設定されているic_launcher.pngを新しいアイコンで上書きします。

app_icons/android/直下に生成されている512x512の画像はGoogle Play Storeへの登録時に必要となります。

#参考にしたもの

• Inkscape - an SVG editing program. | Inkscape
• GIMPのプロシージャーブラウザー(GIMPメニュー→ヘルプ→プロシージャーブラウザー)