スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopでウェブレイアウトを作成する方法

Photoshopでウェブレイアウトを作成する方法

投稿日:2009年12月25日   レベル:中級者    ソフトウェア:PhotoShop

このチュートリアルでは、Photoshopでウェブレイアウトを作ってみたいと思います。

Step1:はじめに

900x900の新規ドキュメントを作成し、階調の異なる2種類の濃いグレーを背景色/描画色に設定します。
次に、長方形選択ツール長方形選択ツールでカンバスの一番上に長方形を描き、線型グラデーションで上から下にドラッグして塗ります。
さらに、次のようなレイヤースタイルをその長方形に追加してください。

ドロップシャドウ

境界線

今のところこんな感じです。

レイヤースタイル効果



Step2:タイトル・キャッチコピーを入力する

横書き文字ツールでウェブサイトのタイトルとキャッチコピーを入力します。

タイトル・キャッチコピー

タイトルに次のようなレイヤースタイルを追加します。

グラデーション

レイヤースタイル効果02

【クリックして拡大】





Step3:ボタンを作成する

角丸長方形ツール角丸長方形ツールを選択しヘッダーの下に小さな長方形を描きます。

小さな長方形

その小さな長方形に、下記のようなレイヤースタイルを追加してください。

光彩(外側)

光彩(内側)

グラデーションオーバーレイ

境界線

小さな長方形はきれいなボタンみたいになったはずです。

レイヤースタイル効果03



Step4:必要な情報を入力する

このボタンをウェブサイトに必要な数だけ複製して、ヘッダーの一番下に合わせて並べ、メニュー名を書き入れてください。

ボタン複製

【クリックして拡大】

ヘッダーを複製し、「編集」−「変形」−「垂直方向に反転」を適用し、
複製したレイヤーをカンバスの一番下に移動します。これがフッターになります。

横書き文字ツールでフッターに必要な情報を入力してください。

フッター

【クリックして拡大】



Step5:コンテンツボックスを作成する

それでは、コンテンツボックスを作成しましょう。
長方形選択ツール長方形選択ツールで次のような2つのボックスを描いてください。

コンテンツボックス

次のようなレイヤースタイルを両方のボックスに適用します。

グラデーションオーバーレイ

境界線

2つのボックスを上下に並ぶように配置してください。

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

レイヤースタイル効果04



Step6:コンテンツボックスを複製する

両方のボックスを複製して、それぞれ独立したコンテンツボックスを作成してください。

ボックス複製

【クリックして拡大】

全てのコンテンツボックスに見出しを付けてください。

見出し

【クリックして拡大】



Step7:完成

これで出来上がりです。 コンテンツを加えれば下記のような感じになります。

完成

【クリックして拡大】



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



スポンサードリンク

コメント

ランダム記事5件

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