6月 15
6月 06
アメリカでPalm Preが発売になったようです。Androidには期待していますが、単純に携帯端末としてはPalm Preもなかなか魅力的な端末です。iTuneに接続できちゃうなんて大丈夫なんだろうかと思いますが、良いアイデアですね。それだったらWalkmanとかも接続できたらいいのにと思います。
下はPreのアプリケーションランチャーの画面です。アイコンのデザインテーストはちょっとMacっぽいというか、おそらくIconFactoryとかに（コメントを書き込んで頂いた方によると別の会社のようです）外注したんではないでしょうか。特徴は外形線ありで、描き込みが細かいことです。立体表現は正面、もしくはやや上からで、アイコンの後ろに薄い丸が見えます。設定のアイコンには黒い四角型の座布団のようなグラフィックを下に描いています。おいおいガイドラインなどで意味やルールが説明があると思いますが、アイコン作成はiPhoneより難しく、Androidよりやや簡単な印象です。
6月 05
実際にテンプレートをベースにIllustratorを使ってアプリケーションのアイコンを描いてみます。アプリケーションのアイコンデザインは、Market Placeでの売れ行きを左右しますからとても大事だと思います。例としてメモ帳のようなアプリを想定しています。まずはテンプレートのパース図に沿ってベースとなる形状を描きます。
まずはメモ帳本体の底面となる四角形を描いて、「効果」＞「スタイライズ」＞「角を丸くする」、半径16ピクセルで角を丸くします。それを天面にコピーして稜線でつなぎ、全体の形を作ります。位置はテンプレートに合わせて微調整します。
次に塗りを適用できるように、側面と天面に分割して線を接続し直します。
このようにして基本となる形状を作ったら、細かな形状を追加していきます。ガイドラインには細かな角度が書いてありますが、それはあくまでベースとなるパースペクティブの話なので、見た目でおかしくないように、また実際は48×48ピクセルに縮小するので細かくなりすぎないように細部を書き込みます。例ではリング部はちょっと細かすぎたかもしれません。
形が決まったらテンプレートのスウォッチから塗りを選択して角度や濃度を調整します。またシャドー部を追加します。オリジナルアプリアイコンの色から抽出したスウォッチを使っているので、何となく感じが似てきます。コツは外形線を引かないことと、明るめの配色を心がけることです。外形線がないので背景が暗めになってしまうとアイコンの絵自体が見えづらくなってしまうので明るめにします。もちろんGoogleっぽくしたくない場合は、まったくオリジナルのカラースキームを使った方がいいでしょう。
最後にもう一度250×250ピクセルの枠内に配置して全体の大きさを微調整します。これをPhotoShopに書き出して48×48ピクセルのサイズに縮小し、透明背景付きのPNGファイルに書き出して完成です。
こうして描いてみると、適当な絵を1枚用意すればいいiPhoneと違って結構大変ですね。
6月 04
Googleのガイドラインに文句を言っていても仕方ないので、テンプレートを自作しました。標準のアプリケーションアイコンからグラデーションを抜き出して、ドキュメント内にスウォッチとして作成保存してあります。この色の組み合わせをベースにすれば、ある程度、本家のアイコンと見た目が同じようなアイコンになると思います。
また、メニューやタブアイコンの塗りカラーもスウォッチとして保存してあります。ファイル形式はIllustrator CS4です。もちろんRGBカラーモードにしてあります。
<追記> Illustratorをお持ちでない方は、オープンソースのInkSpaceでも開くことができます。
6月 04
公開されたUIガイドラインとアイコンデザインガイドラインですが、疑問な点が多々ありました。特にアイコンデザインガイドライン。まずテンプレートとしてダウンロードできるIllustratorのAIファイルですが、これがCMYKのカラーモードなのです。印刷用のデータではないのですからカラーモードはRGBにすべきでしょう。そうでないとPhotoShopにデータを持って行った際に色が変わってしまいます。まあ、それはいいとしてもカラーパレットの指定でWhiteがRGB＝0, 0, 0でBlackがRGB＝255, 255, 255というのはどう考えても逆ではないでしょうか。他にも作成があまりいい例でなかったり、説明が偏っていたり、どうも急いで作成してあまり推敲していないように思えます。
6月 03
AndroidのUIガイドラインがようやく整備されて公開されました。
Android User Interface Guidline
同時にアイコンのテンプレートも正式に公開されました。ただガイドラインといってもアイコンとウィジェットに関するものだけであまり参考にならないように思います。アイコンのガイドラインもポリシーではなくて、妙に細かい書き方だけが記述されていますし、テンプレートもかなりやっつけ感が高いです。まあ、おいおい整備して行こうってことだとは思いますけれど…。
4月 10
Androidのアプリケーションのアイコンは、３D風のちょっと斜めになった形で柔らかいデザインです。iPhoneでは正面から見たグラフィックを1枚用意すれば後はOSがやってくれるのですが、Android風のアイコンを作るにはちょっと工夫が必要です。
Androidの標準のアイコンスタイルも悪くはないですが、ちょっと子供っぽいような気もします。しかしながらせっかく自作のアプリを作るなら、標準のスタイルに準拠したデザインにして並べた時におかしくないようにしたいと思います。そこで今日はAndroid風のアイコンを作る方法を書いてみたいと思います。
作成にはIllustrator（CS以上）を使いましたが、PhotoShopでもGIMPでも同じように描けると思います。
- 角丸長方形ツールで、96ｘ96ピクセル、角丸の半径：6ピクセルの角丸長方形を描きます。線はなし、で塗りは比較的明るい色にします。
- これがデザインの元になります。サイズが似たようであればどんな形でも構いませんが、シンプルな形の方がいいと思います。
- オブジェクトメニュー＞エンベロープ＞ワープで作成 で次のように変形します。スタイルはアーチでカーブは-8％です。
- 次に効果メニュー＞３Ｄ＞ベベル・押し出しで次のように変形します。
- できたオブジェクトは次のようになると思います。満足がいかない場合はアピアランスで数値を調整します。
- ここまでできたらオブジェクトメニュー＞アピアランスを分割します。（その前にオリジナルのオブジェクトはコピーするなどした方がいいでしょう）一番手前の面を選択してコピーします。そして塗りをブラックにします。
- 影になるこのオブジェクトに対して次のような変形をします。まずは縦方向に50％ほど変形します。
- 次にシアーツールで次のように斜めに変形します。
- 効果＞ぼかしで影をぼかします。
- 影のオブジェクトをアイコン本体のオブジェクトの後ろになるように調整します。それから48ｘ48ピクセル内に収まるように40％縮小します。下の絵では出来たアイコンにリフレクションを入れています。一番右端はデフォルトのアイコンです。デフォルトは手書き風にちょっと変形しているのですが、この辺は好みで調整してください。
- 最後にできたアイコンを新規アートボード（大きさは48ｘ48ピクセル）にコピペして、編集メニュー＞ＷＥＢおよびデバイス用に保存…を選び書き出します。フォーマットはPNG24ビットにします。作例では板だけですが、板の上にモチーフを描いたり他のアイテムと組み合わせると一層アイコンらしくなると思います。
