on:2011年7月4日sponsorsウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。Interfaces[ad#ad-2]少し古い記事ですが、現在でも役立つ情報なのでご紹介。下記は各ポイントを意訳したものです。つや消し制作に役立つTipsリアリティは繊細にオブジェクトを想像するリアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、パネルの上半分は照らされており、下半分は照らしていません。上のエッジはハイライトで、下のエッジはシャドウをもっています。画像の左の「横から(想像)」を意識しながら、確認してみてください。次に、複数のパネルが隣り合わせになった例を見てみましょう。このパネルも「横から」どのように見えるか想像してみてください。Shadow」で、それらが各パネルで繰り返されています。私たちが目にする素晴らしいと思うデザインエレメントは、よりリアリスティックに見えるものが多いです。光がどのようにオブジェクトにあたるか細心の注意を払い、リアリスティックなUIエレメントを作り出すことは重要なことです。つや消しAppleはしばらくの間UIエレメントに光沢のあるグロスのエレメントを使用していましたが、最近ではつや消しのマットなエレメントを使用するようになりました。Xの中で着実に進められています。iTunesの最新バージョンのインターフェイスを確認してみてください。そこには光沢のないインターフェイスがあるでしょう。あなたが光沢のないマットなエレメントを設計するのなら、ざらっとした触感がどのようなものか考えるようにしてください。それらの資料を作成していますか?制作に役立つTipsPhotoshopを使って、美しいインターフェイスエレメントを制作する際に役立つTipsを紹介します。表面に光沢のないエレメントの大きな特徴の一つが、完全に対称ではないということです。その表面は若干の質感があり、粒子をもっています。これを実現する簡単な方法は、Photoshopでフラットなカラーのレイヤーを作成し、ノイズフィルターを加えることです。ノイズを使うポイントは微妙にすることで、ほとんど目立たないくらいにすることです。ハイライト光源のメインとなるのは上部からです、しかし強調するために第二の光源を用意することができます。ハイライトを使用しています。ブレンドモードには全体的なカラーを明るくするためにオーバーレイを使い、リアルスティックにするために不透明度を下げています。上がった表面のように見えるようにするため、エッジにハイライトを適用していることに注目してください。レイヤースタイルレイヤースタイルを利用することは、デザインのワークフローでキーとなる部分です。通常私は、ベクトルオブジェクトを描き、カラーを塗り、レイヤースタイルを適用してデザイン作業を行います。レイヤースタイルのクリエイティブなところは、例えば誰かがドロップシャドウを加えた時にあなたはそれがどのように適用されているか知ることができ、変更も簡単にできます。これは最小の作業で多くのエフェクトを達成することができる、ということです。下記の例では、レイヤースタイルのドロップシャドウと境界線で、角丸やグロウ・シャドウを適用した例です。ボタンのサンプル(.psd)※レイヤーが保持されたPSDがダウンロードできます。[ad#ad-2]リアリティは繊細にインターフェイスの何かが実世界で存在しないようなものであるとき、それはおそらく偽者に見えてしまいます。インターフェイスをよりリアルに見せるポイントを紹介します。形状をくっきりとさせる。したラインやエッジは使用しません。常に不透明度を調整します。完全に黒、白である必要はなく、半透明の黒、白のライン、グロウ、シャドウ、などを利用します。ベクターで作成します。あとで簡単にサイズを変更できます。レイヤースタイルを使用する。レイヤースタイルでさまざまな実験を行ってください。ドロップシャドウは正しく使う。エレメントは1-3pxくらいのシャドウで十分でしょう。フリーのクリップアートのようにならないようにしてください。GIFで保存するときは、最初にレイヤーをスマートオブジェクトに変え、ラスタライズしてください。この方法はカラーブレンドモードを維持します。エレメントの中にテキストを配置するときは、暗い1pxのドロップシャドウを使ったトップ、または白い1pxのドロップシャドウを使ったインセットになります。それは決してそのエレメントと同じ表面ではありません。実世界のオブジェクトには、完全な正方形の角をもったものはめったにありません。ものは微妙な丸い角をもっており、オブジェクトをよりリアルにするために角丸を使用してください。現実の世界では、すべてにシャドウがあります。オブジェクトには奥行きがあり、それが表面を支えているように意図するのであれば、ドロップシャドウを適用します。そのときは信じられないほど繊細にしたほうが良いです。