2005年06月21日

#001 Webサイトの看板を作ろう

まずはここまで来てくださってありがとう!
メルマガに書いてあった制作ポイントはしっかり掴めましたか?

ではさっそくいってみましょー!
(画像は全てクリックすると原寸大が見られます)

▼完成ヘッダ

#001 完成ヘッダ

▼手順

※今回は横幅700ピクセル(以下pix)の設定で制作。
素材の「ルアーの写真(600pix:452pix)」はこちらから。
表示されたら右クリックで「名前を付けて画像を保存」してください。

◎注意:素材に関しては、商用サイト以外(法に触れる内容のサイトや
 公序良俗に反するサイトは除く)においてはご自由に使って下さい。
 (このブログにリンクなんかしてくださると、跳び上がって喜びます!)
 ただ、再配布や今のところアフィリエイトサイトなどを含む商用サイト
 へのご使用の場合は、固いこと言ってすみませんがご連絡ください。

[1]700pix×150pixの新規ドキュメントを作成。

#001 手順01


[2]700pix×150pixの四角形を作り、適当に茶色っぽい色をつける。

#001 手順02


[3]撮影した写真を左側に配置し、
 ヘッダのサイズに合わせて大きさを調整。

#001 手順03


[4]写真の色目に合わせて、背景の四角形色を変える。

#001 手順04


[5]写真と背景の境目を馴染ませる。

#001 手順05


[6]Fireworks MXの「イメージのフェード」パターン選択画面。
 今回は右側に向かってフェードアウトする上段の左から2番目を選択。

#001 手順06


[7]「イメージのフェード」直後はこんな感じ。
 ちょっと写真に茶色がかぶりすぎてますね。
 ハンドルを左右に動かしたり、長さを調節したりして調節しましょう。

#001 手順07


[8]こんなくらい。

#001 手順08


[9]ここでヘッダ上部にちょっと薄めの茶色の帯(四角形)を作ります。
 この部分には「キーワードを盛り込んだサイト紹介文」を入れます。

#001 手順09


[10]サイト名「Fising is my life」とキャッチコピーを入れる

#001 手順10


[11]ヘッダ上部にキーワードを盛り込んだサイト紹介文を入れる。

 さぁヘッダデザインの完成です!

#001 手順11


[12]上部の帯の色をグリーン系に変えたバリエーション。
 この色も写真の中から取って調整しました。ルアーの緑ですね。

#001 手順12


[13]これはオレンジ系に変えたバリエーション。
 魚の目の色から取りました。
 ベースの茶色は結構あわせやすい色です。

#001 手順13


[14]Fireworks MXの書き出し画面。

#001 手順14




さて第一回目の「マネウェブ」はいかがでしたか?
最初はうまくいかなくても、あせらないでくださいね。
きっと私の説明もまだまだなっとらんでしょうし…。

お気づきの点や感想など、ぜひください。
maneweb99@capricorn.livedoor.com

それではまた来週!


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

http://trackback.blogsys.jp/livedoor/maneweb99/25957854
この記事へのトラックバック
【モテるWebのカラクリ◆この技まるごとさしあげます】 今まで、「カッコイイホームページを作りたいナー」と思っても、 そうは簡単にはできないよっ、てあきらめてました。 このブログのデザインも、ライブドアが作ったやつから、 まあいいか、ってやつを使って
モテるWebのカラクリ◆この技まるごとさしあげます【おもしろいブログをみつけるブログ!】at 2005年06月22日 22:01
↓応援してくださると、うれしいです~♪ サイトのイメージって、タイトルバナーを変えてあげるだけで かなり印象がかわりますよね。 「 でもタイトルバナーって、どうやって変えればいんだろう? 」 そう思っていたら、こちらのサイトさんに出会いました。 ...
タイトルバナーを変更!【0からはじめるアフィリエイト!ネットビジネスで快適生活への道!】at 2006年08月26日 20:34
この記事へのコメント
ヨシカーさん、こんにちは。ブログ入門講座の oKi です。
メルマガ、創刊、おめでとうございます!!

メルマガで伝えきれないところをブログで丁寧に解説
されていますね。

とても分かりやすいです♪

通常の日記系のブログに比べ、更新が大変でしょうけど、是非、頑張ってください!! (^^)
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年06月22日 11:47
あ、やっぱり画像入れて説明してくれるとすごくわかりやすい。

メルマガ創刊おめでとうございまーす!

今度こそ、今度こそアホな質問しなくてもいいように、このメルマガで勉強して、がっつりカッコいいブログ作ります♪

応援してまーす!頑張って下さい(^^)V
Posted by JULE at 2005年06月22日 17:02
oKiさん

さっそくのコメントありがとうございます!

>とても分かりやすいです♪

そう言っていただけて安心しました〜(>_<)
そこがいちばん気がかりだったんです。
まだ手探り状態だし、確かに更新は結構大変なんですけど
自分にとっても糧になるはずだし、
マイペースで頑張ります!
Posted by ヨシカー@管理人 at 2005年06月22日 18:24
JULEさん

ありがとうございま〜す!

アホな質問なんてとんでもないです(笑)
また私にヒントをくださいね!
JULEさんのブログがどんどんカッチョヨクなってくのを
楽しみにしてまっす!(なにげにプレッシャー?^^;)

これからも末永くヨロシクっす。
Posted by ヨシカー@管理人 at 2005年06月22日 18:28
ヨシカーさん

こんばんは。

そうそう、こういうバナー前から作ってみたかったんです!
解説を見てたら、なんだかできそうな気がしてきました。

応援してますんで、がんばってください。
Posted by マツモト ナオキ at 2005年06月23日 03:53
マツモト ナオキさん

こんにちは!ようこそお越しくださいました。
できそうですか?嬉しいな♪
できたらマツモト・オリジナルにもぜひ挑戦してみてくださいね(^^)

応援ありがとう、頑張ります!
Posted by ヨシカー@管理人 at 2005年06月23日 09:04
ヨッカーさん

はじめまして!誰かの掲示板から来ました!

すごいですね。


いや〜僕はうとくて〜勉強させていただきます!

かっこいい看板作ります!


・・・めちゃくちゃ初歩的な質問ですみません。
僕はビルダーなんですが、
こんな僕でも看板作れるでしょうか?


700pix×150pixの新規ドキュメント・・・
これってどこにあるんでしょうか?
いきなりすみません。

知らずは一生の恥。。。

Posted by ターザン at 2005年06月27日 18:46
ターザンさん

はじめまして、ようこそ(^^)

>僕はビルダーなんですが、
>こんな僕でも看板作れるでしょうか?

Web制作の手順では、グラフィックソフトでデザインや画像制作(部品づくりですね)をして、
ビルダーやDreamweaverなどのHTMLコーディングソフトで
組み立てていくというのが基本です。

できればビルダー+グラフィックソフトがあればいいですね!
最初はフリーソフトとか、何かのオマケでついてるソフトとか、
そういうのでとにかくなんでも作ってみるのがオススメですよ。
Posted by ヨシカー@管理人 at 2005年06月29日 00:07
ターザンさんへのつづき(笑)

>700pix×150pixの新規ドキュメント・・・
>これってどこにあるんでしょうか?

これは、グラフィックソフトで新規の書類を作ってくださいね、ということなんです。
ゴメンなさい、ちょっとわかりづらかったですね。
たいていのグラフィックソフトは新規で何かを作るとき、
サイズを指定できるようになっているんですね。
そのサイズを700pix×150pixで指定しましょう、
ということなんです。
ちなみにpixは「ピクセル」という単位のことです。

>知らずは一生の恥

そうそう、ホントそうですよね。
そして聞くは一時の恥、ですから
わからないところは気軽に質問してくださいね(^^)

カッコいい看板、ぜひ作ってください!
そして私に見せてください(笑)
Posted by ヨシカー@管理人 at 2005年06月29日 00:07