シンプルメニューバーの作り方

記事の幅が狭いので、このチュートリアルでは、横幅がみじかくしてありますが、あなたの作りたいホームページの幅に合わせてサイズを指定してください。

完成予想図

400 * 40で開きました。
おなじみのカドの丸めです。

チャンネルを追加し、背景色が白になっていることをたしかめたら、
CTRL+A　＞　DELETE（または編集＞カット）

イメージ＞画像サイズ、で今の数値より10px大きくします。

選択範囲を解除（CTRL＋D）し、フィルタ＞ぼかし＞ガウス 3px、をかけます。

イメージ＞色調補正＞レベル補正を選び、そして図のように、数値を入れます。

そうすると、こうなっているはずです。これはめんどくさいのでアクションをつくりました。
チャンネルで白く四角に切り取った状態で発動すると、角がプリっとまるくなります。
使い物になるかどうか試してみてください。

このアルファチャンネル１をCTRLを押しながらクリックしましょう。

選択範囲をかかえたまま、レイヤーのタブに戻って、新規レイヤーを追加します。
そして、グラデーションツールを選択します。

の、前に、描写色背景色の設定

どっちも見た目白ですが、微妙に変えてあります。
グラデーションの設定は反射グラデーションツールを使います。

こんな感じで、グイっとグラデをかまします。

ホワっと膨らんだ感じがしましたね、そこで、レイヤー効果の光彩というのを使います。

光彩といいつつ影につかうんですね。

できあがりでーす。

追記：仕切り線を入れる場合

鉛筆ツールの1px設定にして、陰影をいれます。
新しいレイヤー追加してやってくださいね〜。

見にくいですが、境目のところ左に白1本右に黒1本の1pxの線を入れています。」これでは色が濃すぎて見栄えがわるいので、透明度を 30%〜50%くらいに下げます。

この仕切りレイヤーを作っておけばコピーして、どの位置でも仕切りを入れることが出来ますね。