Fireworks8入門・動画講座(バナーやボタン・ヘッダー画像の作り方) - FireworksでWEB2.0風の素材を作る - (3)立体感のあるナビゲーション(前編)
Fireworks8入門・動画講座(バナーやボタン・ヘッダー画像の作り方) >> FireworksでWEB2.0風の素材を作る >> (3)立体感のあるナビゲーション(前編)
ファイヤーワークス8の使い方を動画で紹介します。 バナーやボタン・ヘッダー画像の作り方など、ホームページのパーツや素材を制作する方法に絞って機能を紹介します。 ※Adobe® Fireworks® はAdobe Systems Incorporated(アドビ システムズ社)の商標です。

(3)立体感のあるナビゲーション(前編)
4分4秒
大きい解像度で見る

このページを Google Bookmarks に追加 Yahoo!ブックマークに登録 このエントリーを含むはてなブックマーク Share (facebook) Clip to Evernote
解説

こんなふうにほんのりと立体感&透明感のあるナビゲーションっていわゆるWEB2.0風ですね。
今回は、ファイヤーワークスでこんなナビを作ってみる方法です。
作例では、1本の横長のバーを作ってそこへテキストを乗せていますが
実際つかえるナビにするには、さらにボタンになるように分割しなければいけません。
マウスが乗ったら、違う色に変わったりの動作も必要ですし・・・
が・・・長くなるので、それは別の機会でやりますね。

::::::::::
モモンガの森ではwebデザイナーを目指している方を応援してます


↓遠山郷はとっても好きな場所で、年に何回か旅してます。私が駆け出しだった頃からwebの立ち上げで参加させてもらいまして、それからずっとお世話になっています。
村人さんたちのあたたかい人柄、昭和の雰囲気をそのまま残す和田宿、塩の味のする不思議な温泉、かぐらの湯、懐かしくてなぜかじんわりきてしまう「木沢小学校」、ほんとの秘境を尋ねるなら、、下栗の里・・・雄大な南アルプスを間近で見ながらキャンプができる・・しらびそ峠。ほんとにいい場所です。
神様の棲む秘境の里-信州遠山郷

WEB2.0の時代になっても変わらないちょっと古めのデザインかと思いますが・・・・・やっぱりこの山里は変わって欲しくないという私の気持ちを込めて作らせていただきました。
地元の皆さんだけでこの場所を守っていくのはとても大変なんだと思います。遠山郷のファンのみんなが応援してくれたらな・・と思います。

■ 制作者コメント
<a href="http://webnomori.net/howto/">webの森/ホームページ初心者講座</a>のモモンガです。webデザイナーの卵さ... 制作者プロフィールページへ


カテゴリー内最新記事
 
マニュアル エントリ一覧
Fireworksの基本操作(4)PN...
Fireworksの基本操作(3)ビッ...
Fireworksの基本操作(2)ビッ...
Fireworksの基本操作(1)ファ...
矢印を描いてみる
(2)線の種類とテクスチャの変更
(1)いろんな種類の線を描いてみる
ドット絵(アイコン)の作り方
チカチカと点滅するアイコン(3)アニメ...
チカチカと点滅するアイコン(2)アニメ...
チカチカと点滅するアイコン(1) 楕円...
ボタン素材(4)フレーム機能を使ってマ...
ボタン素材(3)フィルタの適用とweb...
ボタン素材(2)テキストの入力と調整(...
ボタン素材(1)プロパティの使い方、色...
(4)線画を白抜きにする
(3)写真のふちをぼかす
(2)やわらかく光ったような文字
(1)画像に影をつけてみる
(5)艶と透明感のある丸ボタン(前編)
(6)艶と透明感のある丸ボタン(後編)
(3)立体感のあるナビゲーション(前編...
(4)立体感のあるナビゲーション(後編...
(1)ふんわりしたボタン・前編
(2)ふんわりしたボタン・後編
(5)金色のシール-グループ化して回転
(4)金色のシール-文字を丸く並べる
(3)金色のシール-箔押ししたような文...
(2)金色のシール-立体感をつける
(1)金色のシール-ギザギザの円を描く
(4)写真を合成して、ヘッダ画像を作る
(3)二つの写真をぼかしながら合成する
(2)フチをぼかして背景とブレンドする
(1)写真を丸く切り抜く
(4)DreamweaverとFire...
(3)一部だけ取り出して書き出しする方...
(2)スライスの書き出し
(1)背景画像用に切り抜きする方法
(1)ペンツールで図形を描く方法
(2)ダイレクト選択ツールで曲線を修正...
(3)パスの結合
(1)複数ファイルを一括で処理する方法
(2)オリジナルのコマンドを登録してみ...
(3)作成したコマンドで複数ファイルを...


(c) Webdemo Inc All rights reserved.