Android 2.1アイコン作成方法 3つのポイント
ADF2010 LT Android開発Tipsの後半です。お待たせしました。
Android DeveloperのIcon Design Guidelines, Android 2.0が原典です。
英語ですがデザインについて大変参考になります。
以下を読んで興味を持ったひとは是非、読んでみて下さい。
- ランチャアイコンのデザインポイント
- アイコンの推奨サイズ
- 綺麗に見せる便利ツール"Draw9patch"
ランチャアイコンはアプリの顔
Androidアプリケーションの顔といえるアイコンですが、意外に苦労している人が多いはず。
アイコン作成のポイントを紹介します。
図はグッドプラクティスとバッドプラクティスの比較です*1
Android2.0で良いとされるアイコンでは以下の3つのポイントがあります。
- モダンなデザイン
あまり古くさくしないこと(アプリまで古ぼけて見えるかも)
- 最小限の表現でアプリケーションの概要を表現する
(たとえば左から二番目のアイコンはミキサーですが、ごちゃごちゃしています。一つ上のスピーカーはシンプルですが、うまく表現しています)
- 平面的で、統一感のある色使いを心がける
(いろんな色を使いすぎると、落ち着きが無くなります)
また、Android1.xの時は、アイコンガイドラインでは「角度をつけて斜めで置けばいいよ」とありましたが、Android 2.0 エクレア以降では推奨していないようです。
(デザインガイドラインはプラットフォームの進化とともに変わっています)
アイコンサイズの肝
ランチャに表示されるアイコンは解像度によって3つのサイズが規定されています。
説明/解像度 | 高解像度 | 中解像度 | 低解像度 |
最大サイズ | 72 x 72 px | 48 x 48 px | 36 x 36 px |
推奨範囲 | 60 x 60 px | 40 x 40 px | 30 x 30 px |
矩形の範囲 | 56 x 56 px | 38 x 38 px | 28 x 28 px |
デザインごとに推奨範囲があり、四角いデザインのアイコンが
もっとも小さい指定を受けています(それだけ存在感があるから?)
(Size and positioning)より
アイコン作成に便利なツール"nine-patch"
Androidアプリケーションにはたくさん、アイコンが登場します。
ランチャ・メニュー・ステータスバー・タブ・ダイアログ・リストビュー、
それぞれの機能に解像度(高・中・低)が更に指定され、最大6パターン必要です。
全てを最初から用意するのは手間なので、出来るだけ手を抜きたいところです。
そんなとき便利なのが、SDKに同梱されているDraw9Patch。
(android-sdk-windows\tools\draw9patch.bat)
NinePatchイメージ(拡大・縮小してもきれいなまま)の作成ツールです。
これで、1つのアイコンを用意すればソコソコきれいに見えます。
9つのエリアを指定して伸縮の可/不可を決定します。
編集後は[なまえ.9.png]拡張子で保存してください。
名前が上記規則に従っていれば、自動的にきれいに拡大縮小してくれます。
ドラッグアンドドロップで元素材を読み込みます。
今回はPowerpointで四角い箱を用意しました*2
ちょっとツールの使い方にはコツがあるのですが、
・画像の左端と上端を拡大して左クリックしながら、端をなぞる
(図のように最初は緑、交差している範囲がピンクで色がつきます)
失敗しても右クリックでなぞり直すと消去できます。
画像の拡大、縮小を使いながらうまく9分割できれば、「xxx.9.png」で保存して下さい。
画面でピンクの部分が拡大・縮小(左右比を保ったまま)される箇所です。
緑の部分が引き延ばし方向に合わせて伸びます。
どの環境でも綺麗に見えるアイコンのできあがりです。
(アイコンだけでなく、拡大/縮小が必要な各種画像に使えて便利)