ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > PhotoshopでVista(ビスタ)風レイアウトを作成する方法

PhotoshopでVista(ビスタ)風レイアウトを作成する方法

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

このチュートリアルでは、Vista(ビスタ)風レイアウトを作成する方法を紹介します。

Step1:はじめに

透明な背景の新規ドキュメントを、800x950ピクセルで作成してください。



Step2:ヘッダーをつくる

長方形選択ツール長方形選択ツールを選び、高さ215ピクセル、幅800ピクセルの長方形を描いてください。
次に、その長方形を黒とダークグレーの線型グラデーションで塗りつぶします。
ペンツールペンツールを選び、ブラシサイズを2〜6ピクセル、色を#4c842dにセットしてください。くねくねと曲がった線を描きます。
描いた線へ、レイヤースタイルの「光彩(外側)」を下記のように適用してください。

光彩(外側)の設定

こんな感じになっているはずです。

光っている線

再度ペンツールペンツールを選び、#389fa4の色で別の線を描いてください。
「光彩(外側)」を下記のように適用します。

光彩(外側)の設定

こんな感じになっているはずです。

光っている2本の線

先ほどの色を使って1本ずつ、さらに2本の線を描きます。
今回はレイヤースタイルを適用せず、「フィルター」−「ぼかし」−「ぼかし(ガウス)」で線を3〜5ピクセルほどぼかします。

ぼかした2本の線

次に角丸長方形ツール角丸長方形ツールを選び、ヘッダーの上部に長方形を描きます。
黒で塗りつぶし、下記の設定の線を追加します。

境界線の設定

こんな感じになるはずです。

ヘッダー上部に長方形をつくる

引き続き角丸長方形ツール角丸長方形ツールを選び、右上部に小さなボタンを描きます。
下記のレイヤースタイルを適用してください。

グラデーションオーバーレイの適用

ボタン

同じ作業を繰り返します。
今回はボタンを先ほどのボタンの右に描き、下記のレイヤースタイルを適用してください。

グラデーションオーバーレイの適用

グラデーションの入ったボタン

楕円形選択ツール楕円形選択ツールを選択し、下記のように白い楕円を描きます。

楕円を選択して、白く塗りつぶす

選択範囲を反転させ、レイヤーの不透明度を20%に設定してください。両方のボタンに行うと、こんな風になります。

模様のついたボタン





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

角丸長方形ツール角丸長方形ツールを選択してヘッダーの下の部分に長方形を描き、下記のレイヤースタイルを設定してください。

グラデーションオーバーレイの適用

境界線の設定

下記のような長方形です。

ナビゲーション用の長方形

角丸長方形ツール角丸長方形ツールを選び、ナビゲーションボタンを作成します。
最初に作成したグリーンのボタンと同じスタイルを適用してください。

ナビゲーションボタン

ヘッダーとナビゲーションバーはほぼ完成です。
サイトのタイトルとキャッチフレーズ、ナビゲーションのタイトルを書き込みます。

文字を入れる



Step4:メインをつくる

長方形選択ツール長方形選択ツールを選び、ヘッダーの下部から始めて、ナビゲーションの一部が被るようにページの残り部分を選択し、白で塗りつぶします。

メインの白い長方形

白い長方形に、下記のレイヤースタイルを適用してください。

境界線の設定

角丸長方形ツール角丸長方形ツールを選び、長方形を3つ描きます。
白で塗りつぶし、下記の設定で線を加えます。

境界線の設定

レイアウトはこんな感じになっているはずです。

3つの長方形

3つのボックスにそれぞれタイトルを付けます。

ボックスにタイトルをつける

「Start Here!」のボックスに、楕円形選択ツール楕円形選択ツールを使って4つの円を描きます。
好きな色を塗り、下記のレイヤースタイルを追加してください。

光彩(内側)の設定

サテンの適用

境界線の設定

こんな感じです。

4つの円

タイトル文字を追加します。

文字を追加する

ここで、角丸長方形ツール角丸長方形ツールを再度選択し、一番最初に作成したのと同じボタンを2つ作成してください。
ただし今回はもっと大きなものにして、「Start Here!」ボックスの下に置きます。

ボックスを追加する

これら2つのボックスは、サイトの広告用に使います。

広告の文字を追加する

チュートリアル用のエリアを作りましょう。
好きなようにアイコンを作ってください。
私はカスタムシェイプライブラリーのシェイプを使用しました。
それらのアイコンをページの中央に、2セット配置してください。

チュートリアルのエリア

それぞれのセットに、タイトルを付けてください。
次に長方形選択ツール長方形選択ツールを選び、色つきの仕切り線を描いてください。

タイトルの下に線を描く



Step5:フッターをつくる

再度、長方形選択ツール長方形選択ツールを選択し、ページの一番下に黒い長方形を描いてください。
これがフッターになります。
サイトに関する重要な情報を記述してください。

フッター
(クリックして拡大)



Step6:完成

レイアウトは、これで完成です。

完成
(クリックして拡大)



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



スポンサードリンク

コメント

ランダム記事5件

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