投稿日：2010年08月20日　　　レベル：中級者　　　　ソフトウェア：

このチュートリアルでは、ミリタリーなウェブサイトを作成する方法を紹介します。

• Step1 ： 背景とメインの箱をつくる
• Step2 ： ヘッダーをつくる
• Step3 ： メインに画像を加える
• Step4 ： タイトルをつくる
• Step5 ： ナビゲーションバーをつくる
• Step6 ： 完成

背景色#131313でサイズが800x600ピクセルの新規ドキュメントを作成します。
長方形選択ツールを選んで、上から4分の3の高さの長方形を描きます。
#222222の色で塗りつぶし、1ピクセルの黒い線を加えます。

一番上に20〜25ピクセルぐらいの高さで横幅はドキュメントの幅いっぱいの長方形を描きます。
長方形は2種類のグレーのグラデーションで塗り、1ピクセルの黒い線を追加してください。

横書き文字ツールを使って、ヘッダーにテキストを書き込みます。

使用する画像を用意します。
用意した画像をコピー＆ペーストして、初めに作った大きい方の長方形の右側に合うようにサイズを調整してください。
マスクを追加して画像上でグラデーションをドラッグし、画像の右側が背景に溶け込むようにします。

キャラクターの3D模型の写真を用意し、切り取って配置しました。

タイトルやロゴ、キャッチフレーズを加えましょう。
横書き文字ツールを使ってキャッチフレーズやタイトルを書き、3D模型の横に配置します。
レイヤースタイルをいろいろと試してみてください。
私はメインタイトルに1ピクセルの線を加えて、ロゴを配置しました。

長方形選択ツールで先ほどの画像の下に長方形を描き、グラデーション（2種類のグレー）で塗りつぶします。
1ピクセルの黒い線を追加してください。
これがナビゲーションバーになります。
リンク先のタイトルを記入してください。

ナビゲーションにアクセントを加えるため、文字の横に小さなグラフィックを加えてもいいでしょう。

これでメインの部分は終わりです。
サイトのコンテンツはお任せしますが、2つの例を紹介しておきましょう。
コンテンツボックスは単なる明るいグレーの長方形に1ピクセルの線を追加したものです。
コンテンツボックスの見栄えを良くする方法はたくさんあるので、想像力を働かせてみてください。

クリックして拡大

引用:Web Design Library　著者:Hv-Designs.co.uk　翻訳：幕澤