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

---

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

• Step1 ： はじめに
• Step2 ： タイトル・キャッチコピーを入力する
• Step3 ： ボタンを作成する
• Step4 ： 必要な情報を入力する
• Step5 ： コンテンツボックスを作成する
• Step6 ： コンテンツボックスを複製する
• Step7 ： 完成

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

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

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

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

【クリックして拡大】

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

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

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

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

【クリックして拡大】

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

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

【クリックして拡大】

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

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

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

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

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

【クリックして拡大】

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

【クリックして拡大】

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

【クリックして拡大】

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

スポンサードリンク