pixel-arms

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

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

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

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

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

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

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

Googleのガイドラインに文句を言っていても仕方ないので、テンプレートを自作しました。標準のアプリケーションアイコンからグラデーションを抜き出して、ドキュメント内にスウォッチとして作成保存してあります。この色の組み合わせをベースにすれば、ある程度、本家のアイコンと見た目が同じようなアイコンになると思います。

また、メニューやタブアイコンの塗りカラーもスウォッチとして保存してあります。ファイル形式はIllustrator CS4です。もちろんRGBカラーモードにしてあります。

<追記>　Illustratorをお持ちでない方は、オープンソースのInkSpaceでも開くことができます。

公開されたUIガイドラインとアイコンデザインガイドラインですが、疑問な点が多々ありました。特にアイコンデザインガイドライン。まずテンプレートとしてダウンロードできるIllustratorのAIファイルですが、これがCMYKのカラーモードなのです。印刷用のデータではないのですからカラーモードはRGBにすべきでしょう。そうでないとPhotoShopにデータを持って行った際に色が変わってしまいます。まあ、それはいいとしてもカラーパレットの指定でWhiteがRGB＝0, 0, 0でBlackがRGB＝255, 255, 255というのはどう考えても逆ではないでしょうか。他にも作成があまりいい例でなかったり、説明が偏っていたり、どうも急いで作成してあまり推敲していないように思えます。

Illustrator CS4が発売されてから、ほとんどのグラフィックをAIで描くようになりました。今まではPhotoShopで描くことが多かったのですが、アートボードを複数持てるようになったので簡単な資料などもひとつのファイルで書けるようになったことや、Flashとの連携などで便利だからです。部品としては最終的にPhotoShopで加工しますが、資料からデザインまで一貫して作業できるので助かります。

最近描いたボタンをCS4のファイルでアップロードしましたので、使いたい方は下の「Download」ボタンからどうぞ。そのまま再配布する以外は改変自由、商用利用OKです。テキストはラスタライズしていないので、打ち替えて使ってください。

Androidのアプリケーションのアイコンは、３D風のちょっと斜めになった形で柔らかいデザインです。iPhoneでは正面から見たグラフィックを1枚用意すれば後はOSがやってくれるのですが、Android風のアイコンを作るにはちょっと工夫が必要です。

Androidの標準のアイコンスタイルも悪くはないですが、ちょっと子供っぽいような気もします。しかしながらせっかく自作のアプリを作るなら、標準のスタイルに準拠したデザインにして並べた時におかしくないようにしたいと思います。そこで今日はAndroid風のアイコンを作る方法を書いてみたいと思います。

作成にはIllustrator（CS以上）を使いましたが、PhotoShopでもGIMPでも同じように描けると思います。

• 角丸長方形ツールで、96ｘ96ピクセル、角丸の半径：6ピクセルの角丸長方形を描きます。線はなし、で塗りは比較的明るい色にします。



• これがデザインの元になります。サイズが似たようであればどんな形でも構いませんが、シンプルな形の方がいいと思います。



• オブジェクトメニュー＞エンベロープ＞ワープで作成　で次のように変形します。スタイルはアーチでカーブは-8％です。



• 次に効果メニュー＞３Ｄ＞ベベル・押し出しで次のように変形します。



• できたオブジェクトは次のようになると思います。満足がいかない場合はアピアランスで数値を調整します。



• ここまでできたらオブジェクトメニュー＞アピアランスを分割します。（その前にオリジナルのオブジェクトはコピーするなどした方がいいでしょう）一番手前の面を選択してコピーします。そして塗りをブラックにします。



• 影になるこのオブジェクトに対して次のような変形をします。まずは縦方向に50％ほど変形します。



• 次にシアーツールで次のように斜めに変形します。



• 効果＞ぼかしで影をぼかします。



• 影のオブジェクトをアイコン本体のオブジェクトの後ろになるように調整します。それから48ｘ48ピクセル内に収まるように40％縮小します。下の絵では出来たアイコンにリフレクションを入れています。一番右端はデフォルトのアイコンです。デフォルトは手書き風にちょっと変形しているのですが、この辺は好みで調整してください。



• 最後にできたアイコンを新規アートボード（大きさは48ｘ48ピクセル）にコピペして、編集メニュー＞ＷＥＢおよびデバイス用に保存…を選び書き出します。フォーマットはPNG24ビットにします。作例では板だけですが、板の上にモチーフを描いたり他のアイテムと組み合わせると一層アイコンらしくなると思います。

意外に知られていない機能じゃないかと思うのですが、イラストレーターで「整列」を行う場合に、基準となるオブジェクトを選択することができます。

選択ツールで３つのオブジェクトを選択します。

そのまま「整列」すると、３つのオブジェクトの位置の平均をとって整列します。

しかし、ひとつのオブジェクトを基準にしたい場合は、３つを選択した後に基準にしたいオブジェクトを再度クリックします。（CS4では選択枠が太くなります）

その状態で「整列」を実行すると基準のオブジェクトに合わせて他の２つのオブジェクトが並びます。