GIMPとInkscapeでAndroid用Menuアイコンを作る


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

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

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

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

手順の概要は次の通りです。
  1. Inkscapeで形を作る
  2. GIMPでエフェクトをつける

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

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

1. Inkscapeで形を作る

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

(1)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 です。

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

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

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

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

(5)3と4を繰り返し、下にも矢印を書きます。

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

(7)メニューの「パス」から「結合」を選びます。

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

(8)もう一つの矢印も同様に結合します。

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

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

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


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

[ポイント]Android Icon Design Guidelines: Menu Icons Figure 2(図2)では、角丸について下記のように記載されています。
2 pixel corner radius, when appropriate
(適切な場合、2ピクセルの角の半径)
Inkscapeの「丸結合」のアイコンを見ると、線の幅を半径とする丸みがつくようなので、ここでは線の幅を2ピクセルにします。

(13)下の矢印も同様に「フィル/ストローク」を設定します。

(14)「Inkscape SVG形式」で保存します。

Inkscapeでの作業は以上です。

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

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

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

開いたところ。

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

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

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

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

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

3. 完成

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

今回作成したアイコンはこちらです。
以上です。

COMMENTS

名前

Android,8,Excel,3,GIMP,5,Inkscape,3,iPhone,1,Kindle,2,PC,4,Thinkpad X240,1,Thinkpad X260,2,TOEFL,1,TOEIC,4,VBA,4,VBScript,2,Windows 10,1,インターネットバンキング,1,デザイン,1,圧縮&解凍,2,英語,8,雑感,1,資格,13,情報処理技術者試験,5,電子書籍,2,読書,1,簿記,2,
ltr
item
勉強とガジェット: GIMPとInkscapeでAndroid用Menuアイコンを作る
GIMPとInkscapeでAndroid用Menuアイコンを作る
https://2.bp.blogspot.com/-i-LM-q2qECQ/WENTGqprYGI/AAAAAAABwNg/8UJrXzkMMlwsstwQH-Nh2daKT7R5TcO_wCLcB/s400/pens-1803673_1920.jpg
https://2.bp.blogspot.com/-i-LM-q2qECQ/WENTGqprYGI/AAAAAAABwNg/8UJrXzkMMlwsstwQH-Nh2daKT7R5TcO_wCLcB/s72-c/pens-1803673_1920.jpg
勉強とガジェット
http://tanaka-misaki.blogspot.jp/2012/01/gimpinkscapeandroidmenu.html
http://tanaka-misaki.blogspot.jp/
http://tanaka-misaki.blogspot.com/
http://tanaka-misaki.blogspot.com/2012/01/gimpinkscapeandroidmenu.html
true
8692194293250221214
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy