Lesson 05 グラデーションを利用したサイトになじむ見出しバー - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

2011.9.22 THU

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

Lesson 5

グラデーションを利用した
サイトになじむ見出しバー

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

各ページに入ってくる見出しは、ユーザーがページを読む際にポイントとなるグラフィックパーツだ。サイトのデザインになじみつつも、主張し過ぎない程度に存在感があるデザインを施そう。

01

まず、楕円をあしらった見出しバーを作ってみよう。Illustratorで570×55ピクセルの長方形を作成し、効果メニュー→ " スタイライズ" →" 角を丸くする..." を[半径：5px]で適用したら、オブジェクトメニュー→" アピアランスを分割" を実行。塗りを【1-1】のグラデーションに設定する【1-2】。

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

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

【1-1】［種類：線形］、［角度：-90°］【a】［位置：0% ／#FFDA3F］【b】［位置：100%／#E39500］【c】［位置：50%］

【1-2】

02

前面に【2-1】のように楕円を3つ重ねる。背面の長方形をコピーし最前面にペースト後、3つの楕円形オブジェクトをマスクする【2-2】。

【2-1】【a】［塗り：白］、[ 描画モード：通常]、[ 不透明度：25%］【b】［塗り：黒］、[描画モード：オーバーレイ]、[不透明度：10%］【c】［塗り：白］、[ 描画モード：通常]、[ 不透明度：20%]

【2-2】上図は参考例なので、好みで楕円の組み合わせや配置、描画モードを変えてみよう

03

[線幅：4px]、[塗り：なし]、[線：白]で12×12ピクセルの円を作成し、左端に配置する。効果メニュー→"スタイライズ"→ " 光彩（外側）..." を【3-1】の設定にする。円の右に見出しテキスト「会社案内」を[テキストカラー：白]で入力し、コピーして背面にペーストする。背面にペーストしたテキストを、[線幅：1px]、[線：黒]、[描画モード：乗算]、[不透明度：50%]にする【3-2】。

【3-1】[描画モード：乗算]、[カラー：黒]、[不透明度：50%]、[ぼかし：2px]

【3-2】サンプルでは[フォント：ヒラギノ角ゴW4]、[サイズ：24px]、[トラッキング：200]。テキストに光彩（外側）を使わなかったのは、複雑なオブジェクトには向いていないためだ

04

右端に見出しの英文テキストを配置し、最背面の長方形に効果メニュー→"スタイライズ" →" ドロップシャドウ..." を適用すれば完成【4-1】。このデザインは柔らかいイメージのサイトに有効だ。

【4-1】ドロップシャドウの設定は[描画モード：乗算]、[不透明度：50%]、[X軸オフセット：1px]、[Y軸オフセット：1px]、[ぼかし：2px]、[カラー：黒]。英文は、[フォント：Times New Roman Italic]、[サイズ：11px]、[トラッキング：80]

05

次にドットをあしらった見出しバーを作ってみよう。Illustrator で、最初に#D2D8BE の新規スウォッチを「keycolor」の名前で登録しておく。570×55ピクセルの長方形を描画し、【5-1】の設定でグラデーションにする【5-2】。

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

【5-2】

06

この長方形をコピーして前面にペースト、上を基準に高さ3ピクセルに変形して赤いラインにする。この赤いラインをオブジェクトメニュー→"変形"→"移動..."で55ピクセル下にコピーし、【6-1】の設定でグラデーションにする【6-2】。

【6-1】［種類：線形］［角度：0°］【a】［位置：0% ／keycolor：50%］【b】［位置：50% ／keycolor：100%］【c】 [位置：100%／keycolor：50%］【d】［位置：13%］【e】［位置：87%］

【6-2】

07

[塗り：keycolor80%]で750×65ピクセルの楕円形を描画し、効果メニュー→"ぼかし"→"ぼかし（ガウス）..."で[半径：20px]に設定する。【05】で作成した長方形と中心を合わせて配置したら、最背面に送り、下に2ピクセル移動させる【7-1】。長方形をコピーして背面にペーストしたら、中央を基準に高さを80ピクセルに変形して、下の楕円形をマスクして影のように見せる【7-2】。

【7-1】

【7-2】

08

赤いラインと同じ赤で2ピクセルの正円を描画し、縦・横3ピクセル移動コピーして3列のドット模様を左端に配置する【8-1】。次に3ピクセルの正円を縦・横3ピクセル移動コピーして右端から半分弱のところまで配置し、模様全体を【8-2】の設定のグラデーションにする【8-3】。このデザインは堅めのイメージのサイトに有効だ。