hdk_embeddedの日記

Android 2.1アイコン作成方法 3つのポイント

Android | 02:27

ADF2010 LT Android開発Tipsの後半です。お待たせしました。

Android DeveloperのIcon Design Guidelines, Android 2.0が原典です。

英語ですがデザインについて大変参考になります。

以下を読んで興味を持ったひとは是非、読んでみて下さい。

• ランチャアイコンのデザインポイント
• アイコンの推奨サイズ
• 綺麗に見せる便利ツール"Draw9patch"

ランチャアイコンはアプリの顔

Androidアプリケーションの顔といえるアイコンですが、意外に苦労している人が多いはず。

アイコン作成のポイントを紹介します。

(Style Do’s and Don’ts)より

図はグッドプラクティスとバッドプラクティスの比較です*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」で保存して下さい。

画面でピンクの部分が拡大・縮小(左右比を保ったまま)される箇所です。

緑の部分が引き延ばし方向に合わせて伸びます。

どの環境でも綺麗に見えるアイコンのできあがりです。

(アイコンだけでなく、拡大/縮小が必要な各種画像に使えて便利）