Androidのランチャーアイコンを作る
久しぶりのブログ更新です。
今回はＡｎｄｒｏｉｄアプリのアイコンを、ＧＩＭＰで作ってみたいと思います。
せっかく良いアプリを作っても、ランチャーアイコンが下手くそだと、
そもそもダウンロードしてもらえない事もあると思います・・・
ですので、気合を入れて全力でアイコンを作ることをお勧めします。
Inkscapeでアイコンを作る場合はこちら
以下のサイトを参考にしました。
http://www.pixel-arms.com/2009/04/how_to_make_android_icon/
http://d.hatena.ne.jp/hdk_embedded/20100503/1272907658
http://developer.android.com/intl/ja/guide/practices/ui_guidelines/icon_design.html
Androidアイコンの特徴としては、すっきりと見やすく、あまり派手にしない事？
ごちゃごちゃしたデザインは、ユーザーから嫌われる傾向にあるようです。
下の画像はAndroidDeveloperのサイトから引用しました。
アイコンの作成
まずはＧＩＭＰをダウンロードします。
http://www.gimp.org/
ＧＩＭＰを起動して、新しい画像の生成を選択します。
AndroidDeveloperサイトの冒頭に記載されている通り、ランチャーアイコンは
- Low 32*36px
- Medium 48*48px
- High 72*72px
ですので、生成する画像のサイズは最低でも72*72px以上にしましょう。
とりあえず960*960pxのサイズで画像を生成します。
※作成する画像のサイズは任意ですが、必ず8*8pxの倍数で作るようにしてください。そうでないと画像を縮小したときにアスペクト非が崩れてしまいます。
アイコンを作り始める前に、グリッドを設定しておきましょう。
「メニュー → 画像 → グリッドの設定 」を選択。
※「メニュー → 表示」の、「グリッドを表示」と「グリッドにスナップ」にもチェックをしておきます。
とりあえず、こちらのサイトに習って同じようなアイコンをつくってみます。
ツールボックスの矩形選択で、角の湾曲した矩形を描いてみます。
適当に矩形範囲を選択後、「メニュー → 選択 → 角を丸める」
２０％で角を丸めます。
塗りつぶしツールを選択後、水色で塗りつぶします。
一旦レイヤーを固定します。「メニュー → レイヤー → レイヤーの固定」を選択します。
「フィルタ → 変形 → ひん曲げる」を選択して、アーチ型にします。
（ちょっと強引ですけど・・・）
少し寂しいので円マークを描きます。（円マークでなくても良いです）
遠近法ツールを選択して、画像の左側を上にずらし、右側を少しだけ
下にずらします。
背景レイヤーを複製して、明るさを-20に変更します。
「メニュー → 色 → 明るさ」
背景レイヤーを、レイヤー群の一番上に持ってきます。
一番下のレイヤーを「レイヤー → 変換 → オフセット」で、
Xを８、Yを−５で画像をずらす。
そのレイヤーを複製します。
先ほどと同じようにコピーしたレイヤーをずらします。
その操作を数回繰り返すと、押し出したように見えます。
次は影を作ります。背景を１枚複製して、レイヤーの一番下に持ってきます。
※影となるレイヤー以外、不可視にしておく事をおすすめします。
「メニュー → レイヤー → 拡大縮小」で、縦横比を保持しない様に設定して、高さを半分にします。
遠近法ツールを使い、右上角と左上角を右にずらします。
ファジー選択で影となるオブジェクトを選択して、黒で塗りつぶします。
移動ツールでオブジェクトが自然な影になるように、適宜ずらします。
「フィルター → ぼかし → ガウシアンぼかし」で次のようにぼかします。
※図では100,100でぼかしてますが、50,50ぐらいでも良いです。
レイヤーツールバーを右クリックして、可視レイヤーの統合を選択します。（キャンバスサイズで）
できれば最後に鏡面反射のエフェクトで仕上げたかったんですが、
GIMPには残念ながらそのような機能はありませんでした。
（探し方が足りない？）
別のやり方として、コピーしたレイヤーに白のグラデーションにかけて、
不要な部分をカットすることで、そのように見せることが出来ました。
先ほどの統合したレイヤーを複製します。
ファジー選択ツールで円マークで無いところをクリックします。
選択した箇所を別レイヤーにコピーします。
円マークの箇所がコピー出来ていないので、円マークのところは矩形選択で
コピーします。
描画色を白に設定。
ブレンドツールを選択。
グラデーションパターンを「描画色から透明」にする。形状は線形。
ファジー選択ツールで、透明部分を選択。
メニューの「選択 → 選択範囲を反転」で反転する。
左上から右下に向かってグラデーションさせる。
楕円選択ツールで、図のようにした半分を大きめに選択。
その部分を削除する。
レイヤーを統合して完成。
以上で、アイコン作成は完了です。
後は上記のアイコンを７２＊７２、４８＊４８、３２＊３２にそれぞれ
エクスポートすれば、Androidのランチャーアイコンとして使えます。
・・・ふ〜、GIMPでも頑張ればなんとかなるもんですね！
（上記のアイコン作成に半日かかりましたが、Illustratorなら数分で出来そうですね・・・）
