Lesson 04 陰影と照明光を表現したナビゲーションバー - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

Webデザイン 表現&技法の 新・スタンダード

Lesson 4

陰影と照明光を表現した ナビゲーションバー

	制作・文			奥山寿史（ユルユラデザイン.）
＞	To Use			Photoshop | Illustrator
＞	Browser			IE | Firefox | Safari

ナビゲーションバーを浮き上がらせる陰影に格子のテクスチャを施し、右上から照明が当たったような光の表現を追加する。さりげない小技を組み合わせて、単調になりがちなグラデーションに上品な質感を与えよう。

幅950ピクセルで5つのボタンがあるナビゲーションバーを作る【1-1】。各ボタンの間に幅2ピクセルの仕切りを入れることをふまえて、値が整数になるようにボタンの幅を計算する。今回は一番文字数が多い「Information」を190ピクセルに、ほかのボタンを188ピクセルとした。

【1-1】「Information」ボタンが190ピクセル、残り4つのボタンが188ピクセル×4=752ピクセル、ボタンの仕切りが2ピクセル×4=8ピクセルで、合計が950ピクセルだ

まず格子の画像を作る。Photoshopで[サイズ：950×70 ／解像度：72dpi ／カンバスカラー：透明]の新規ファイルを作成し、描画色をグレー（#C8C8C8）に設定して塗りつぶす。背景色を黒に設定し、フィルタメニュー→"スケッチ"→"ハーフトーンパターン..."を【2-1】の設定で適用。次にレイヤーメニュー→"新規調整レイヤー"→"レベル補正..."を【2-2】の設定で実行する【2-3】。ハーフトーンパターンのレイヤーにレイヤーマスクを作成し、描画色を黒に設定。[グラデーションツール]を「描画色から透明に」に設定し、上から下にドラッグしてマスクを描画する【2-4】【2-5】。あとで微調整できるようにPSD形式で保存しておく。


【2-1】ひとまず濃いめの格子イメージを作成しておく


【2-2】「入力レベル」の右スライダを150にする。ほかはデフォルトのままでよい。フィルタのハーフトーンパターンで格子の濃さを決めず、「レベル補正」の調整レイヤーで調整すれば、あとから何度も調整できるので便利だ


【2-3】


【2-4】一度黒く描画されたところはそのまま残ってしまうので、グラデーションを何度か繰り返しても思い通りにならない場合は、一度レイヤーマスクの描画を全面消去してから再実行しよう


【2-5】レイヤーパレットの状態

このPSDファイルをIllustratorのドキュメントに配置する。同じサイズ（950×70ピクセル）の長方形を描画し、同じ位置に[描画モード：乗算]で上に重ねる。この長方形に仕上がりイメージの色を設定したら【3-1】、新規スウォッチ「keycolor」としてグローバルにチェックを入れて登録しておく【3-2】。


【3-1】


【3-2】今回は（R=185/G=0/B=50）にした。この色を使ってナビゲーションイメージを作っていくので、わかりやすい名前をつけておくとよい

03で描画した長方形を選択し、編集メニュー→ " コピー" と" 前面へペースト"を実行して前面に複製する。#000000を新規スウォッチ「black」と登録しておき、グラデーションを【4-1】の設定にする【4-2】。


【4-1】［種類：線形］［角度：90°］ 【a】［ 位置：0% ／black：75%］ 【b】[位置：40% ／black：50%] 【c】[位置：70% ／black：0%]【d】 [位置：100% ／black：80%] 【e】 [位置：50%］ 【f】［ 位置：50%］【g】 [位置：60%]


【4-2】

同様の要領で長方形を前面に複製し、グラデーションを【5-1】の設定にする【5-2】。さらに長方形を前面に複製し、グラデーションを【5-3】の設定にする。このグラデーションを入れることでより深みが増す【5-4】。


【5-1】［種類：線形］［角度：0°］【a】［ 位置：0% ／black：40%］ 【b】[位置：80% ／black：0%] 【c】 [位置：100% ／black：30%] 【d】［ 位置：50%］【e】［ 位置：60%］


【5-2】


【5-3】【a】［ 位置：60% ／black：0%］【b】 [位置：100% ／black：50%］ 【c】［ 位置：65%]


【5-4】

次に「keycolor」と同系の暗い色を設定する。スウォッチパレットで「keycolor」を選択すると、カラーガイドパレットは【6-1】のようになる。【6-1】の赤枠を選 択し、新規スウォッチ「keycolor2」として登録する。1×70ピクセルの長方形オブジェクトを作成し、[描画モード：乗算]でグラデーションを【6-2】の設定にする。このオブジェクトを複製して右に1ピクセル移動し、グラデーションを【6-3】の設定にして、[描画モード：通常／不透明度：40%]で、ここまでに作ったオブジェクトと重ねる【6-4】。これを【1-1】 のボタン間隔で配置する。


【6-1】カラーガイドパレットは、選択した色のハーモニー候補を表示してくれる。プルダウンメニューから、ほかの組み合わせ候補も選べる


【6-2】［種類：線形］［角度：90°］ 【a】［ 位置：0% ／black：100%］ 【b】 [ 位置：80%／black：0%] 【c】［ 位置：50%］


【6-3】［種類：線形］［角度：90°］ 【a】［ 位置：0% ／keycolor 2：0%］ 【b】 [位置：100%／keycolor 2：100%]【c】［ 位置：50%］


【6-4】仕切りのラインオブジェクトはグループ化して、座標入力で配置していくと正確だ。ナビゲーションバーの左上を原点とすると、今回の場合左から、[X=190／Y=0]、[X=380／Y=0]、[X=570／Y=0]、[X=760／Y=0]になる

950×3ピクセルの長方形オブジェクトを2つ作成し、ナビゲーションバーの上下に配置する。上を[描画色：keycolor]、[描画モード：通常／不透明度：100%]として、下を[描画色：black]、[描画モード：乗算／不透明度：40%]で重ねると引き締まる。最後にボタンのテキストを中央に配置していく。マウスオンイメージは上下に配置したオブジェクトの背面に、全面で[描画色：black]、[描画モード：乗算／不透明度：25%]の長方形オブジェクトを重ねると、マウスオンした時に少し暗くなるボタンイメージになる（【1-1】参照）。