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

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

2019.4.25 THU

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


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

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


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


01

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

02

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

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

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

【2-3】
【2-3】

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

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

03

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

【3-1】
【3-1】

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

04

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

【4-1】[幅:400pixel][高さ:400pixel]に設定し、[ 背景] を[R125 /G190/B15]の色で塗りつぶす
【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】
【4-2】

05

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

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

【5-2】
【5-2】

【5-3】
【5-3】【a】[ 位置:60% /black:0%]【b】 [位置:100% /black:50%] 【c】[ 位置:65%]

【5-4】
【5-4】

06

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

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

【6-2】[種類:線形][角度:90°] 【a】[ 位置:0% /black:100%] 【b】 [ 位置:80%/black:0%] 【c】[ 位置:50%]
【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-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]になる
【6-4】仕切りのラインオブジェクトはグループ化して、座標入力で配置していくと正確だ。ナビゲーションバーの左上を原点とすると、今回の場合左から、[X=190/Y=0]、[X=380/Y=0]、[X=570/Y=0]、[X=760/Y=0]になる

07

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


twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

アクセスランキング

4.22(昨日)

MdN BOOKS|デザインの本