メニューの区切り線を簡単に作る方法

ウェブサイトのグローバルメニューをデザインする時、
メニュー間に区切り線が無いと、分かりづらい場合がありますよね。

例えばこのようなメニューの場合、

区切り線を入れてあげることで、簡単に各メニューエリアの視認性があがります。
今回は、そんな区切り線を簡単に作る方法をご紹介します。

STEP1. 等間隔に黒線を引く

濃いグレーでもOKです。例ではラインツールを使って、黒(#000000)で線を引いています。

線引きました。次に影を付けていきます。

STEP2. 線をグループ化する

作成した線をすべて選択して（例だと４つ）、【Ctrl G】でグループ化します。

STEP3. ドロップシャドウを追加

グループ化した線を選択した状態で、ドロップシャドウを追加します。

【距離：1、色：#ffffff、不透明度：100%、ぼかし：0、角度：０】

Php Aide />

ドロップシャドウを加えると、以下のようになります。

影がついて、それっぽくなりましたが、全体にフィットしてませんね。
区切り線だけ浮いています。

STEP4. 不透明度を調整して、完成

全体の配色と合うように不透明度を調整しましょう。
例では35%で設定しました。

完成です！

慣れるとこの一連の作業が40秒程で出来るようになります。
使用頻度も割と高い技だと思うので、是非、使ってみてくださいね。

(63.7KB, Adobe® Fireworks® CS4)