DesignTips > ボタン・アイコン等 > グローバルメニューのデザインをFireworksで作成する方法

グローバルメニューのデザインをFireworksで作成する方法

グローバルメニューのデザインをFireworksで作成する方法

グローバルメニューのデザインをFireworksで作成する方法をご紹介します。

グローバルメニューはwebデザインでは必須のアイテムですね。今回はとてもシンプルなグローバルメニューを作ります。

作り方はさほど難しくはないですが、プロっぽく見せる(素人っぽくみせない)細かなポイントがいくつかあります。今回はそうした細かいポイントに注意してみて下さい。

Step01 メニューの原型の長方形を描く

Fireworksグローバルメニューのデザイン作成開始

まずはFireworksでメニューの原型となる長方形を描きます。

長方形ツールでグローバルメニューの大きさの長方形を描きます。塗りは適当(次のステップで設定します)、線なしで設定して下さい。

Step02 グローバルメニューにグラデーションを適用

グローバルメニューにグラデーションを適用

Step01で作成した長方形にグラデーションを適用させます。

長方形を選択後、プロパティインスペクタで線形グラデーションにし、上記のようにカラーを設定します。今回はさわやかなブルーのグラデーションを適用させました。

ここで1つポイントです。グラデーションは同系色で設定し、色の誤差を少なくします。かすかなグラデーションをかけるのがポイントです。

Step03 グローバルメニューに斜線を適用

グローバルメニューに斜線を適用

今回はさらにグローバルメニューにかすかな斜線を適用させたいと思います。

長方形を選択し、プロパティインスペクタのテクスチャで[斜線1]を選択。適用度を10%ほどにします。

ここもグラデーションと同様、斜線をかすかに適用させるのがポイントです。斜線の適用度を上げるとわざとらしくなり素人っぽい印象を受けてしまいます。

Step04 グローバルメニューの原型ができた!

グローバルメニューの原型ができた

ここでひとまず作業を止めて、作成したオブジェクトを見てみましょう。

かすかなグラデーションが生きてますね。べた塗りで作成してもよいのですが、ほんの少しグラデーションを加えることで印象はまったく変わってきます。

手間を惜しまず小さな効果を積み重ねていくのが大事なんですね。次のステップではさらに質感を高めるため、フィルターを活用していきます。

Step05 Photoshopライブ効果

Photoshopライブ効果

まずは、グローバルメニューの外側に線を追加します。

長方形を選択し、プロパティインスペクタのフィルタ「+」をクリック、Photoshopライブ効果をクリックします。

[Photoshopライブ効果]ダイアログが開きますので、左の[線]にクリックを入れ、上記のように設定します。まだOKはクリックしないで下さい。

Step06 べベルとエンボスをグローバルメニューに適用

べベルとエンボスをグローバルメニューに適用

さらに、グローバルメニューにべベル(内側)を追加します。

同様にダイアログ左の[べベルとエンボス]をクリックし、上記のように設定し、OKをクリックします。陰影の透明度を下げることでナチュラルな仕上がりになります。

以上でグローバルメニューの下地が出来上がりました!

Step07 グローバルメニューに区切り線を入れる

グローバルメニューに区切り線を入れる

続いて、グローバルメニューに区切り線を入れます。

ラインツールで上記のように区切りたい場所に2箇所並べてラインを入れます。

ここでポイントです。左のラインの色はメニューの外側の線と同じ色(もしくは近い色)を設定し、右のラインの色は明るい色(べベルの陰影と同程度)を設定します。

濃い線と薄い線を2本並べて設置することで遠くから見たときに、かすかな立体感(凹凸感)を演出することができます。

Step08 グローバルメニューに文字を入力

グローバルメニューに文字を入力

Step06で作成した2本の区切り線をコピー&ペーストし、全体に配置します。

最後に文字をメニューに入力して出来上がりです!

フォントの横位置を合わせる際には整列パネルを使うと便利です。

出来上がり!

Fireworksでグローバルメニューを作成する方法

シンプルなグローバルメニューが出来上がりました!

ちなみにロールオーバー時の画像は、グラデーションを上下に反転させると凹んだような表現(上図参考)になります。こちらもよく使われる表現の一つです。

いかがでしたでしょうか?作り方はさほど難しくなかったはずです。ただし、素人っぽくみせないいくつかのポイントがありましたね。こちらはとても大事な点ですのでぜひ押さえておいて下さい。

この投稿文は次の言語で読めます: 簡体中国語, 英語

Fireworksでボタンを作成する方法
Photoshopでナチュラルなwebボタンを作る方法
迷彩柄の描き方(イラストレーター)
ザラついた質感の背景の作り方(Photoshop)
イラストレーターでペンツールを使わずに作る桜2
シームレスなパターンの作り方(Photoshop)
傘のイラストの作り方(イラストレーター)
Photoshopで段ボールのテクスチャを作る
メダルバッジを作る方法(イラストレーター)