このエントリでは、GIMPとInkscapeを使ってAndroidアプリ用にMenuアイコンを作る手順を紹介します。PhotoshopとIllustratorを使わず、無料で使えるGIMPとInkscapeで作ります。

まず、公式ドキュメントとその勝手翻訳サイトは下記の通りです。このエントリのゴールは、こちらのガイドラインに沿ったMenuアイコンを作ることです。

次に、参考にしたサイトは下記の通りです。この手順をアレンジして、より簡単にMenuアイコンを作りたいと思います。

Tutorial for creating an icon for an Android button: Part 1 of 2（英語）
Tutorial for creating an icon for an Android button: Part 2 of 2（英語/上記の続き）
フリーソフトのみ使って、Android用のアイコンを作成する（上記英語サイトの日本語解説）

必要なソフトは次の通りです。

Inkscape
GIMP
この手順では、GIMPのプラグイン「Android Icon」を使うので、下記手順を参考にインストールしてください。

手順の概要は次の通りです。

Inkscapeで形を作る
GIMPでエフェクトをつける

左図のようなアイコンを作り、右図のようにメニューに表示します。

では、手順を紹介します。

1. Inkscapeで形を作る

Inkscapeを使い、図形を組み合わせてアイコンの形を作ります。

（１）Inkscapeで新規ドキュメントを作成、サイズを設定します。
メニューの「ファイル」「ドキュメントの設定」から、サイズを設定します（48 x 48 px）。

[ポイント]Android Icon Design Guidelines: Menu Icons ではピクセル数などの図が中解像度用（48 x 48 px）のため、今回は 48 x 48 px としました。
高解像度用は 72 x 72 px、低解像度用は 36 x 36 px です。

（２）絵を描く前に、目印となるガイド線を引きます。
ガイド線を引くには、図中の赤矢印のように、メジャー（定規）から、ガイド線をおきたいところまでマウスでドラッグします。

[ポイント]Android Icon Design Guidelines: Menu Icons では画像サイズのほかにアイコンのサイズも決められています。画像サイズぎりぎりまでアイコンにせず、ガイドラインあるアイコンのサイズの中に図を作ります。

（３）ガイド線に沿って、四角形を書きます。
ツールボックス（画面左に並んだメニュー）から、矩形ツールを選択し、ガイド線に沿って四角形を描きます。この時点では、色は気にしなくてOKです。

（４）ガイド線に沿って、ペンツールで直線を書きます。
ツールボックスからペンツールを選択し、ガイド線に沿って直線で三角形を書きます。こちらも色は気にしなくてOKです。

（５）３と４を繰り返し、下にも矢印を書きます。

（６）ツールボックスから矢印ツールを選択し、四角形と三角形を選択します。
まず四角形を選択し、Shiftキーを押しながら三角形を選択します。

（７）メニューの「パス」から「結合」を選びます。

すると、四角形と三角形が結合されて1つになります。

（８）もう一つの矢印も同様に結合します。

（９）上の矢印を右クリックし、「フィル/ストローク」を選択します。

（１０）塗りつぶしを黒にします。
「フィル」で「単一色」（単一色のアイコン）、RBGAを、0,0,0,255に設定します。

（１１）線も黒にします。
「ストローク」で「単一色」（単一色のアイコン）、RBGAを、0,0,0,255に設定します。

（１２）角を丸くします。
「ストロークのスタイル」で幅2ピクセル、結合を「丸結合」にします。

[ポイント]Android Icon Design Guidelines: Menu Icons Figure 2（図2）では、角丸について下記のように記載されています。

2 pixel corner radius, when appropriate
（適切な場合、2ピクセルの角の半径）

Inkscapeの「丸結合」のアイコンを見ると、線の幅を半径とする丸みがつくようなので、ここでは線の幅を2ピクセルにします。

（１３）下の矢印も同様に「フィル/ストローク」を設定します。

（１４）「Inkscape SVG形式」で保存します。

Inkscapeでの作業は以上です。

2. GIMPでエフェクトをつける

ここからは、GIMPを使って作業を行います。

（１）さきほどInkscapeで作成したSVGファイルを開きます。
「ファイル」から「開く」を選び、さきほどのSVGファイルを開きます。
この際、「Scalable Vector Graphicsを描く」というダイアログが表示されるので、すべてデフォルト値でOKをクリックします。

開いたところ。

（２）画像を拡大して見やすくします。
左側のツールボックスにある「ズーム」で画像を拡大できます。

（３）「フィルタ」から「Android Icon」を選択します。
「Android Icon」は、画像にAndroidのMenuアイコンのスタイルを適用するプラグインです。
※もし「Android Icon」が表示されていない場合、「GIMPにAndroidアイコン作成に役立つプラグインを追加」を参考にインストールしてください。

適用後。AndroidのMenuアイコンのスタイルになりました。非常にありがたいプラグインですね！

（４）PNG形式で保存します。
保存ダイアログで、ファイルタイプを拡張子で判別する設定になっている場合、ファイル名の拡張子を.pngにするとPNG形式で保存できます。

ダイアログが表示されます。私は全部デフォルトでOKをクリックしています。

3. 完成

完成したアイコンをMenuアイコンとして使ったサンプルアプリをエミュレータで動かしてみました。
左がこの手順で作ったアイコン、右がAndroidのシステムリソースのHelpアイコンです。システムリソースと並べたときに違和感がないので、ガイドラインに沿ったアイコンができたと思います。
検証方法が雑ですみません。。。