2005年08月31日

#011 クール・ナビゲーションバー

今回のレシピは2週にわたってお届けします。
というのも、ちょっと制作工程が長いのです。


こういうナビゲーションバー、最近よく見かけますよね?
ちょっとスチールっぽい質感で、クールなの。
会社のサイトやカチっとしたイメージを出したいときにはピッタリ。


※詳細な手順は無料配信中のメールマガジンに記載されています。
 興味のある方はぜひご登録ください!
 (このブログのサイドメニューから登録できます)

※ブログの画像はクリックすると大きな画像が別ウインドウで見られます


▼完成

#011_00



▼制作レシピ


[1]メニューより「ファイル」→「新規作成」

#011_01




[2]メニューより「選択範囲」→「座標を入力して選択」

#011_02




[3]右:0、左:700、上:0、下:40を入力してOK

#011_03




[4]画面に700×40の選択範囲が点線で囲まれます

#011_04




[5]カラーパレットの描画色をクリックして色を変更

#011_05




[6]今回はエンジっぽい茶色を選択(好きな色を選択して結構です)してOK
  同じように次は背景色は白に設定しましょう。

#011_06




[7]左サイドのツールバーからグラデーションツールを選択

#011_07




[8]選択範囲の中を上から下にドラッグ

#011_08




[9]次にレイヤーパレット上で右クリック→「レイヤーの作成」

#011_09




[10]新規で作成されたレイヤーに対して、先ほどの[2]〜[5]までの作業を
  繰り返して、今度の描画色はいちばん暗い影の部分になるので
  もう一段階濃い色を設定しましょう。

#011_10




[11]レイヤーパレットで上にあるレイヤーをクリックして、
  ブレンドモードを「乗算」にします。

#011_11




[12]これでナビゲーションバーの下地ができました。

#011_12




[13]メニューの「表示」→「グリッドの表示」をクリック。
  グリッドとは方眼紙の方眼のようなものです。

#011_13




[14]次にメニュー「表示」→「グリッドサイズの変更」→「ユーザー指定」

#011_14




[15]今回はボタンの数を5つに設定しますので全体の幅700を5で割って140、
  高さは上下に10ピクセルずづ余白を取りたいので10を入力。

#011_15




[16]もうひとつ、グリッドにスナップもチェックしておきましょう。

img src="http://maneweb.livedoor.biz/data05/011/16.JPG" border="0" alt="#011_16" hspace="5" class="pict">




[17]画面を見るとこのようにグリッドが表示されます。

#011_17




[18]左ツールバーから「直線」ツールを選択。
  描画色は最後に選択した濃いエンジになっていればOK。

#011_18




[19]ラインツールで横線グリッドの10ピクセル目から30ピクセル目まで
  Shiftキーを押しながらドラッグしてラインを引きます。

#011_19




[20]同じ要領で合計4本のラインをグリッドに沿って引きましょう。

#011_20




[21]次に、「レイヤーの作成」で新規レイヤーを作り、
  もう一度同じラインを引いていきます。このとき描画色を変更します。

#011_21




[22]次に[21]のレイヤーを最初に引いたラインのレイヤーの背面(下)に移動

#011_22




[23]「移動」ツールを選択し、[21]のレイヤーを右に1ピクセル、
  下に1ピクセル移動

#011_23




[24]仕切り線が少し立体的になりました

#011_24



はい、今週はここまで。
お疲れ様でしたっ。





人気blogランキング参加中!
↑お役に立てたらポチっとクリックお願いします!


それでは、また来週!



この記事へのトラックバックURL