今回は、CSSギャラリーなどを通してさまざまなサイトを見ていて思ったことで、ディテールまでこだわったデザインサイトが増えてきているような気がしましたので、そんなことを取り上げてみようかと。
1ピクセルラインで質感を高める
グラーデーション背景にさらに1ピクセルラインを付け加えることでより質感を出すことができるテクニックの紹介です。
下記の画像はこのサイトのトップページの画像です。両者の違いは、1ピクセルのラインが入っているか、いないかの違いです。左の画像はピクセルラインあり、右側はラインなしです。（画像クリックすると原寸表示されます。）
ピクセルラインを入れることで、立体感を演出することができ、さらに質感を高めることができます。
さらに拡大した画像も下記の画像をクリックすることでご覧いただけます。
さらにこの画像を拡大したものを用意しました。（画像クリックすると原寸表示されます。）
右の画像には、合計で5本の1ピクセルラインを入れてあります。拡大しないとなかなかわかりません。
ラインを入れることで際立たせることができます。最近はこういったディテールまでこだわってデザインされているサイトが増えてきています。
グラデーションでも可能ですが、細かい設定などの手間があります。簡単に1ピクセルラインを入れてみるだけで、十分質感が高まります。
photoshop-1ピクセルラインテクニック
1ピクセルのラインを入れるのはいたって簡単です。フォトショップの一行選択ツールを使って好きな場所を選択し、新しいレイヤーにて色を乗せる部分の色をスポイトツールを使って選択しベタ塗りします。
明度を上げたい部分は、ラインのレイヤー（画像ではレイヤー１）で描画モードを【スクリーン】にして不透明度を使って明度を調整します。（他にもいろいろと方法はあります。）
ラインの表示位置は、矢印カーソルを使って移動させます。明度を上げたい部分は、1ピクセル分空けて表示してみるとのり面がでてより立体感が増します。（※あまり空けすぎると変なラインに見えてしまいます。）
明度を下げたい部分は、ラインのレイヤー（画像ではレイヤー１）で描画モードを【乗算】にして不透明度を使って明度を調整します。（他にもいろいろと方法はあります。）
背景が白の部分は、淡い灰色（#cccccc〜#333333）ぐらいの間でベタ塗りするといいと思います。
角丸でのハイライトラインの出し方
ヘッダーはじめ、さまざま部分で使われる角丸オブジェクト背景などのハイライトラインの出し方は、いくつか方法があります。たしか、Veerle's blog | Creating flexible buttons using Photoshop shapes and stylesでも趣旨は違いますが、似たようなテクニックを紹介しています。ただ、ちょっと面倒です。
レイヤースタイル【シャドウ（内側）】
今回は二通り紹介します。まず、レイヤースタイルを使った方法です。これが一番簡単です。若干ハイライト部分のピクセル数が少なく目立たないような感があります。
シェイプを使って角丸オブジェクトを作ってしまいます。（画像：headレイヤー)
header部分のレイヤーにて、レイヤースタイル【シャドウ（内側）】を選択します。設定は以下の通りです。
- 【描画モード】通常
- 【不透明度】任意で調節する。
- 【カラー】白
- 【角度】90度
- 【距離】1px
上記の設定で角丸オブジェクトに対して1ピクセルのハイライトラインをつけることができます。ただ、若干目立たない感がします。また、距離を2pxにしてしまうと今度は目立ちすぎてしまうような気がします。これがもっとも簡単で早くできます。
シェイプを重ねる
二つ目の方法はシェイプを重ねて、前面のシェイプのパスをピクセル単位で縮める方法です。こちらは、結構微調整ができるのでよりディテール・質感を求めるならこの方法がいいかと思います。
元のシェイプをコピーします。前面部分にあるシェイプのパスを選択ツールを使って上部4点を選択。矢印カーソルで下へ移動し、上部部分を縮めて行きます。（画像：headshape2レイヤー)
背面にあるシェイプは、同系色で明度の高い色を選択しておきます。（画像：headshapeレイヤー)
上記の2通りの方法が一番手っ取り早く演出できます。
参考アプリケーション
iTunesとMadiaPlayerの角丸部分を参考に表示しておきます。最近のWEBデザインはデスクトップアプリケーションに近くしてゆくような方向へ少しずつ向かっているような気がします。
参考サイト
最近リデザインされたBartelme Design | XHTML, CSS, Design, Icons, Mac and more（有名なAjaxianのサイトなどのデザインを手がけている）がいい参考になります。
- Joyent: Introducing Joyent
- http://joyent.com/
- Chris Shiflett: PHP and Web Application Security
- http://shiflett.org/
コメントする