をご紹介します。
グローバルメニューはwebデザインでは必須のアイテムですね。今回はとてもシンプルなグローバルメニューを作ります。
作り方はさほど難しくはないですが、プロっぽく見せる(素人っぽくみせない)細かなポイントがいくつかあります。今回はそうした細かいポイントに注意してみて下さい。
まずはFireworksでメニューの原型となる長方形を描きます。
長方形ツールでグローバルメニューの大きさの長方形を描きます。塗りは適当(次のステップで設定します)、線なしで設定して下さい。
Step01で作成した長方形にグラデーションを適用させます。
長方形を選択後、プロパティインスペクタで線形グラデーションにし、上記のようにカラーを設定します。今回はさわやかなブルーのグラデーションを適用させました。
ここで1つポイントです。グラデーションは同系色で設定し、色の誤差を少なくします。かすかなグラデーションをかけるのがポイントです。
今回はさらにグローバルメニューにかすかな斜線を適用させたいと思います。
長方形を選択し、プロパティインスペクタのテクスチャで[斜線1]を選択。適用度を10%ほどにします。
ここもグラデーションと同様、斜線をかすかに適用させるのがポイントです。斜線の適用度を上げるとわざとらしくなり素人っぽい印象を受けてしまいます。
ここでひとまず作業を止めて、作成したオブジェクトを見てみましょう。
かすかなグラデーションが生きてますね。べた塗りで作成してもよいのですが、ほんの少しグラデーションを加えることで印象はまったく変わってきます。
手間を惜しまず小さな効果を積み重ねていくのが大事なんですね。次のステップではさらに質感を高めるため、フィルターを活用していきます。
まずは、グローバルメニューの外側に線を追加します。
長方形を選択し、プロパティインスペクタのフィルタ「+」をクリック、Photoshopライブ効果をクリックします。
[Photoshopライブ効果]ダイアログが開きますので、左の[線]にクリックを入れ、上記のように設定します。まだOKはクリックしないで下さい。
さらに、グローバルメニューにべベル(内側)を追加します。
同様にダイアログ左の[べベルとエンボス]をクリックし、上記のように設定し、OKをクリックします。陰影の透明度を下げることでナチュラルな仕上がりになります。
以上でグローバルメニューの下地が出来上がりました!
続いて、グローバルメニューに区切り線を入れます。
ラインツールで上記のように区切りたい場所に2箇所並べてラインを入れます。
ここでポイントです。左のラインの色はメニューの外側の線と同じ色(もしくは近い色)を設定し、右のラインの色は明るい色(べベルの陰影と同程度)を設定します。
濃い線と薄い線を2本並べて設置することで遠くから見たときに、かすかな立体感(凹凸感)を演出することができます。
Step06で作成した2本の区切り線をコピー&ペーストし、全体に配置します。
最後に文字をメニューに入力して出来上がりです!
フォントの横位置を合わせる際には整列パネルを使うと便利です。
シンプルなグローバルメニューが出来上がりました!
ちなみにロールオーバー時の画像は、グラデーションを上下に反転させると凹んだような表現(上図参考)になります。こちらもよく使われる表現の一つです。
いかがでしたでしょうか?作り方はさほど難しくなかったはずです。ただし、素人っぽくみせないいくつかのポイントがありましたね。こちらはとても大事な点ですのでぜひ押さえておいて下さい。