pixel-arms

Androidのアイコン一覧ファイルを作成しました。

アイコンをデザインする際には一貫性を保ったり、新規のモチーフを検討するために他のアイコンを参照するといいと思います。Drawableのフォルダの中からアイコンだけを抽出して、編集しやすいようにPhotoShopのファイルにしましたので、必要な方はダウンロードしてお使いください。

実際にテンプレートをベースにIllustratorを使ってアプリケーションのアイコンを描いてみます。アプリケーションのアイコンデザインは、Market Placeでの売れ行きを左右しますからとても大事だと思います。例としてメモ帳のようなアプリを想定しています。まずはテンプレートのパース図に沿ってベースとなる形状を描きます。

まずはメモ帳本体の底面となる四角形を描いて、「効果」＞「スタイライズ」＞「角を丸くする」、半径16ピクセルで角を丸くします。それを天面にコピーして稜線でつなぎ、全体の形を作ります。位置はテンプレートに合わせて微調整します。

次に塗りを適用できるように、側面と天面に分割して線を接続し直します。

このようにして基本となる形状を作ったら、細かな形状を追加していきます。ガイドラインには細かな角度が書いてありますが、それはあくまでベースとなるパースペクティブの話なので、見た目でおかしくないように、また実際は48×48ピクセルに縮小するので細かくなりすぎないように細部を書き込みます。例ではリング部はちょっと細かすぎたかもしれません。

形が決まったらテンプレートのスウォッチから塗りを選択して角度や濃度を調整します。またシャドー部を追加します。オリジナルアプリアイコンの色から抽出したスウォッチを使っているので、何となく感じが似てきます。コツは外形線を引かないことと、明るめの配色を心がけることです。外形線がないので背景が暗めになってしまうとアイコンの絵自体が見えづらくなってしまうので明るめにします。もちろんGoogleっぽくしたくない場合は、まったくオリジナルのカラースキームを使った方がいいでしょう。

最後にもう一度250×250ピクセルの枠内に配置して全体の大きさを微調整します。これをPhotoShopに書き出して48×48ピクセルのサイズに縮小し、透明背景付きのPNGファイルに書き出して完成です。

こうして描いてみると、適当な絵を1枚用意すればいいiPhoneと違って結構大変ですね。