細部にこだわったUIエレメントをPhotoshopで作成するポイント

Post on:2011年7月4日

オブジェクトを想像する

リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。

これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、パネルの上半分は照らされており、下半分は照らしていません。上のエッジはハイライトで、下のエッジはシャドウをもっています。
画像の左の「横から（想像）」を意識しながら、確認してみてください。

次に、複数のパネルが隣り合わせになった例を見てみましょう。

このパネルも「横から」どのように見えるか想像してみてください。
光源は上部にあり、照らしているのが「Top Edge Highlight」、影になっているのが「Inset Shadow」で、それらが各パネルで繰り返されています。

私たちが目にする素晴らしいと思うデザインエレメントは、よりリアリスティックに見えるものが多いです。光がどのようにオブジェクトにあたるか細心の注意を払い、リアリスティックなUIエレメントを作り出すことは重要なことです。

光沢 vs つや消し

Appleはしばらくの間UIエレメントに光沢のあるグロスのエレメントを使用していましたが、最近ではつや消しのマットなエレメントを使用するようになりました。

この完全なリフレッシュはすぐには完了しませんでしたが、つや消しのマットなインターフェイスエレメントはここ数年Mac OS Xの中で着実に進められています。iTunesの最新バージョンのインターフェイスを確認してみてください。そこには光沢のないインターフェイスがあるでしょう。

光沢のあるようにする時、あなたは何を想像しますか？　プラスティック？　ガラス？　反射するアルミニウム？　もし、あなたが光沢のないマットなエレメントを設計するのなら、ざらっとした触感がどのようなものか考えるようにしてください。ペーパー？　サンドペーパー？　ボール紙？　またはMacのような表面加工したアルミニウム？　そして、それらの透明度は？　など、何に模倣してリアリスティックなものにしますか？　そして、それらの資料を作成していますか？

制作に役立つTips

Photoshopを使って、美しいインターフェイスエレメントを制作する際に役立つTipsを紹介します。

ノイズレイヤー

表面に光沢のないエレメントの大きな特徴の一つが、完全に対称ではないということです。その表面は若干の質感があり、粒子をもっています。これを実現する簡単な方法は、Photoshopでフラットなカラーのレイヤーを作成し、ノイズフィルターを加えることです。
ノイズを使うポイントは微妙にすることで、ほとんど目立たないくらいにすることです。

フラットなカラー vs ノイズなテクスチャ

参考：: Photoshop初心者でも簡単できる、かっこいいテクスチャ素材を作るチュートリアル

ラジアルハイライト

光源のメインとなるのは上部からです、しかし強調するために第二の光源を用意することができます。

iPhoneアプリケーション用のカスタムナビゲーションバー

これはiPhoneアプリケーション用のカスタムナビゲーションバーで、第二の光源としてラジアルハイライトを使用しています。ブレンドモードには全体的なカラーを明るくするためにオーバーレイを使い、リアルスティックにするために不透明度を下げています。少し上がった表面のように見えるようにするため、エッジにハイライトを適用していることに注目してください。

レイヤースタイル

レイヤースタイルを利用することは、デザインのワークフローでキーとなる部分です。通常私は、ベクトルオブジェクトを描き、カラーを塗り、レイヤースタイルを適用してデザイン作業を行います。

レイヤースタイルのクリエイティブなところは、例えば誰かがドロップシャドウを加えた時にあなたはそれがどのように適用されているか知ることができ、変更も簡単にできます。これは最小の作業で多くのエフェクトを達成することができる、ということです。
下記の例では、レイヤースタイルのドロップシャドウと境界線で、角丸やグロウ・シャドウを適用した例です。

ボタンのサンプル（.psd）
※レイヤーが保持されたPSDがダウンロードできます。

[ad#ad-2]

リアリティは繊細に

インターフェイスの何かが実世界で存在しないようなものであるとき、それはおそらく偽者に見えてしまいます。インターフェイスをよりリアルに見せるポイントを紹介します。

形状をくっきりとさせる。
ぼんやりしたラインやエッジは使用しません。
常に不透明度を調整します。
完全に黒、白である必要はなく、半透明の黒、白のライン、グロウ、シャドウ、などを利用します。
ベクターで作成します。
あとで簡単にサイズを変更できます。
レイヤースタイルを使用する。
レイヤースタイルでさまざまな実験を行ってください。
ドロップシャドウは正しく使う。
たいていのエレメントは1-3pxくらいのシャドウで十分でしょう。フリーのクリップアートのようにならないようにしてください。
複雑な形状をPNG, GIFで保存するときは、最初にレイヤーをスマートオブジェクトに変え、ラスタライズしてください。この方法はカラーブレンドモードを維持します。
エレメントの中にテキストを配置するときは、暗い1pxのドロップシャドウを使ったトップ、または白い1pxのドロップシャドウを使ったインセットになります。それは決してそのエレメントと同じ表面ではありません。
実世界のオブジェクトには、完全な正方形の角をもったものはめったにありません。たいていのものは微妙な丸い角をもっており、オブジェクトをよりリアルにするために角丸を使用してください。
現実の世界では、すべてにシャドウがあります。オブジェクトには奥行きがあり、それが表面を支えているように意図するのであれば、ドロップシャドウを適用します。そのときは信じられないほど繊細にしたほうが良いです。