ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでミリタリーなウェブサイトを作成する方法

Photoshopでミリタリーなウェブサイトを作成する方法

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

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

Step1:背景とメインの箱をつくる

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

箱を作る



Step2:ヘッダーをつくる

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

ヘッダーの箱を作る

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

ヘッダーにテキストを書き込む





Step3:メインに画像を加える

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

メインに画像を追加する

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

メインに画像を追加する



Step4:タイトルをつくる

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

タイトルを追加する



Step5:ナビゲーションバーをつくる

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

ナビゲーションバーをつくる

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

ナビゲーションにアクセントを加える



Step6:完成

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

完成1

完成2
クリックして拡大



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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング