デザインとグラフィックの総合情報サイト
[エムディエヌ・デザイン・インタラクティブ]

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

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】[種類:線形]、[角度:-90°] 【a】[ 位置:0% /#FFDA3F]【b】[ 位置:100%/#E39500] 【c】[ 位置:50%]

【1-2】
【1-2】

02

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

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

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

03

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

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

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

04

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

【4-1】ドロップシャドウの設定は[描画モード:乗算]、[不透明度:50%]、[X軸オフセット:1px]、[Y軸オフセット:1px]、[ぼかし:2px]、[カラー:黒]。英文は、[フォント:Times New Roman Italic]、[サイズ:11px]、[トラッキング:80]
【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】
【5-1】 [種類:線形][角度:0°] 【a】[ 位置:0% /keycolor:35%] 【b】[ 位置:50% /keycolor:0%] 【c】 [位置:100%/keycolor:35%] 【d】[ 位置:50%] 【e】[ 位置:50%]

【5-2】
【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-1】[種類:線形][角度:0°] 【a】[ 位置:0% /keycolor:50%] 【b】[ 位置:50% /keycolor:100%] 【c】 [位置:100%/keycolor:50%] 【d】[ 位置:13%] 【e】[ 位置:87%]

【6-2】
【6-2】

07

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

【7-1】
【7-1】

【7-2】
【7-2】

08

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

【8-1】
【8-1】

【8-2】[種類:線形]、[角度:-180°] 【a】 [ 位置:0%、keycolor:75%] 【b】[位置:100% /keycolor:0%] 【c】[ 位置:50%]
【8-2】[種類:線形]、[角度:-180°] 【a】 [ 位置:0%、keycolor:75%] 【b】[位置:100% /keycolor:0%] 【c】[ 位置:50%]

【8-3】ドットのオブジェクトを全部選択し、ツールからグラデーションツールを選択して、右から左に水平にグラデーションを引く
【8-3】ドットのオブジェクトを全部選択し、ツールからグラデーションツールを選択して、右から左に水平にグラデーションを引く

見出しは[フォント:ゴシックMB101 DB]、[サイズ:16px]、[トラッキング:120]、[テキストカラー:#4D4D4D]。欧文は[フォント:Arial Regular]、[サイズ:10px]、[トラッキング:80]、[テキストカラー:#E62837]
見出しは[フォント:ゴシックMB101 DB]、[サイズ:16px]、[トラッキング:120]、[テキストカラー:#4D4D4D]。欧文は[フォント:Arial Regular]、[サイズ:10px]、[トラッキング:80]、[テキストカラー:#E62837]



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