2005年09月07日

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

今週は先週の続きで
ナビゲーションバーの制作です。
完成まであとちょっとなんで頑張りましょう!



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


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



▼先週はここまで制作


#011_24


▼制作レシピ



[25]カラーパレットで描画色を白色に指定(これが文字の色になります)

#011_01




[26]左サイドから文字ツールを選択

#011_02




[27]ナビゲーションバーのいちばん左に位置する文字から入力します。

#011_03




[28]同じように左から2番目に今度は日本語で「会社概要」と入力
  HOMEとの違いは文字のサイズです。

#011_04




[29]文字の位置はこんなふうにズレていても構いません。

#011_05




[30]文字の位置を調整するために、先週やったようにグリッドを
  表示させてガイドにしましょう。

#011_06




[31]グリッドが表示されたら左サイドから移動ツールを選択して
  位置を調整しましょう。

#011_06




[32]全て文字を入力して位置を調整し、グリッドを非表示にした状態。
  これでボタンのデザインは完成です。

#011_08




[33]レイヤーの名前を各ボタンの文字に設定しておけば便利
  (レイヤーをダブルクリックすれば変更可能)

#011_09




[34]さてここからWEB用に保存するしますが、その前に!!
  必ず保存しておきましょう!!

#011_10




[35]それでは書き出していきましょう。

#011_11




[36]左サイドのツールから「選択範囲」ツールを選択

#011_12




[37]]HOMEのボタン部分を選択

#011_12





[38]「編集」→「コピー」これでクリップボードに
  HOMEボタンがコピーされました。

#011_14




[39]ここで、HOMEボタンを書き出すため、新規書類を作成し
  そこに貼り付けます。

#011_15




[40]新規ドキュメントができました。

#011_15




[41]ここで「編集」→「貼付け」でさきほどのHOMEボタンの画像を貼付け

#011_17




[42]「選択範囲」→「選択範囲の解除」で選択エリアを解除

#011_15




[43]はい、これで独立したボタンができましたね。

#011_15




[44]あとは「ファイル」→「名前をつけて保存」をしてファイルの種類は
  「Jpegファイル(jpg)」で保存。あとのボタンもこの繰り返しです。

#011_20




[45]全てボタンの書き出しが終わったら、
  元のナビゲーションバーのファイルを閉じます。

#011_21






さぁ、あとはHTMLでナビゲーションを制作しましょう!
それぞれのボタンにリンクを設定するのをお忘れなく(笑)


あなたのWebサイトをどんどんクールに♪







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


それでは、また来週!



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

http://trackback.blogsys.jp/livedoor/maneweb99/50042443