Crystaline [クリスタライン]

スチームパンクファッションを普段着にしているWebデザイナー、Crystalineの日記。スチームパンクな自作アクセサリーやファッションについて発信しています。作り方やスチームパンクについての基礎知識も。

クラッシックなメニューバーを作る


デフォルトパターンの木目を使って、少しスチームパンクな大人の雰囲気が漂うクラッシックなメニューバーを作っちゃうよ!

できあがりのイメージ

できあがりはこんな感じだよ!



Step1

新規ドキュメントを1000*1000ぐらいで作ります。(ここは自分の作りたいページのサイズでいいかも)
Ctrl+Jで背景を複製、描画色を#073032にしたらAlt+Backで塗りつぶし。



Step2

レイヤー名の空白をダブルクリックしてレイヤースタイルからパターンオーバーレイで下の画像を使用。



Step3

パターンオーバーレイを以下のように設定。




Step4

シェイプツールの角丸を角の半径5pxで適当なメニューバーの長さで作成する。
ここでは560pxで作成(シェイプなので後から変更も可能)



Step5

レイヤーをダブルクリックしてレイヤースタイルのパターンオーバーレイを設定。
初期設定に入っている「木」というパターンを使用します。




Step6

次にカラーオーバーレイを設定します。色を#463632にして、焼きこみカラーにするとシックな色合いに変わります。




Step7

ベベルとエンボスでツヤと立体感を出します。




Step8

シャドウ(内側)で丸みを出します。




Step9

さらにドロップシャドウで陰影をつけて立体感を出します。




Step10

次に今出来た木のバーにかぶせるようにしてシェイプツールの四角形で幅は20pxずつ小さく、高さは1px小さくして上・中央揃えにします。



Step11

レイヤー名の横をダブルクリックしてレイヤースタイルのグラデーションオーバーレイを設定。
これはとても大変だったので説明しづらいです><
画像を参考に色などを取って設定してくださいorz
成功すると下のような綺麗な金属的なグラデーションになります。





Step12

さらにその上に今作成した金属のバーよりも、角丸シェイプ(角半径5px)を幅10px、高さ10pxずつ小さくしたものを乗せます。



Step13

カラーオーバーレイで紙の色っぽい#E5E0C3を設定。光彩(内側)を使ってへこませる。(色は黒)





Step14

シャドウ(内側)を使用して奥行きを与えます。(色は黒)




Step15

ドロップシャドウに白を使用して縁に立体感を出します。




完成!

あとはロゴとバーに入る文字を(ここではGaramondで作成)入れて完成。