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

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

Step1：はじめに

900x900の新規ドキュメントを作成し、階調の異なる2種類の濃いグレーを背景色／描画色に設定します。
次に、長方形選択ツール[You must be registered and logged in to see this image.]でカンバスの一番上に長方形を描き、線型グラデーションで上から下にドラッグして塗ります。
さらに、次のようなレイヤースタイルをその長方形に追加してください。
[You must be registered and logged in to see this image.]
今のところこんな感じです。
[You must be registered and logged in to see this image.]




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

横書き文字ツールでウェブサイトのタイトルとキャッチコピーを入力します。
[You must be registered and logged in to see this image.]
タイトルに次のようなレイヤースタイルを追加します。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
【クリックして拡大】









Step3：ボタンを作成する

角丸長方形ツール[You must be registered and logged in to see this image.]を選択しヘッダーの下に小さな長方形を描きます。
[You must be registered and logged in to see this image.]
その小さな長方形に、下記のようなレイヤースタイルを追加してください。
[You must be registered and logged in to see this image.]
小さな長方形はきれいなボタンみたいになったはずです。
[You must be registered and logged in to see this image.]




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

このボタンをウェブサイトに必要な数だけ複製して、ヘッダーの一番下に合わせて並べ、メニュー名を書き入れてください。
[You must be registered and logged in to see this image.]
【クリックして拡大】
ヘッダーを複製し、「編集」－「変形」－「垂直方向に反転」を適用し、
複製したレイヤーをカンバスの一番下に移動します。これがフッターになります。

横書き文字ツールでフッターに必要な情報を入力してください。
[You must be registered and logged in to see this image.]
【クリックして拡大】




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

それでは、コンテンツボックスを作成しましょう。
長方形選択ツール[You must be registered and logged in to see this image.]で次のような2つのボックスを描いてください。
[You must be registered and logged in to see this image.]
次のようなレイヤースタイルを両方のボックスに適用します。
[You must be registered and logged in to see this image.]
2つのボックスを上下に並ぶように配置してください。

こんな感じになっているはずです。
[You must be registered and logged in to see this image.]




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

両方のボックスを複製して、それぞれ独立したコンテンツボックスを作成してください。
[You must be registered and logged in to see this image.]
【クリックして拡大】
全てのコンテンツボックスに見出しを付けてください。
[You must be registered and logged in to see this image.]
【クリックして拡大】




Step7：完成

これで出来上がりです。
コンテンツを加えれば下記のような感じになります。
[You must be registered and logged in to see this image.]
【クリックして拡大】





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