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

Mar 5, 2010

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

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

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

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

STEP1. 等間隔に黒線を引く

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

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

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

STEP2. 線をグループ化する

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

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

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

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

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

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

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

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

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

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

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

完成です!

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

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

download the source(63.7KB, Adobe® Fireworks® CS4)

白坂翔
白坂翔

東京のWEB制作会社の代表をしています。デザイナー兼ディレクター。
JELLY JELLY CAFEというお店のオーナーでもあります。MORE

LINE@やってます

'stats.label.addfriend' (MISSING TRANSLATION)

あわせてどうぞ

倒置法を使う丸ノ内線