このチュートリアルでは、Photoshopでウェブサイトをデザインする方法を紹介します。

• Step1 ： はじめに
  
• Step2 ： タブ型のボタンを作る
  
• Step3 ： ロゴ、スローガンを配置する
  
• Step4 ： 6つのボックスを作る
  
• Step5 ： テキスト・画像を配置する
  
• Step6 ： 完成
  

Step1：はじめに

新規ドキュメントを1000ピクセル×1355ピクセルで作成し、
「#2493b0」と「#23454c」の色を選択してグラデーションツール[You must be registered and logged in to see this image.]のリニアグラデーションを使って背景を塗ります。
最も明るい色を画面の上にします。

長方形選択ツール[You must be registered and logged in to see this image.]で、横がキャンバス幅、縦が50-150ピクセルの長方形を描いたら、
「#222223」の色で塗ります。すると次のようになります。
[You must be registered and logged in to see this image.]




Step2：タブ型のボタンを作る

長方形に幾らかのウェルカムテキストと角丸長方形ツール[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.]









Step3：ロゴ、スローガンを配置する

ウェブサイトのタイトル、ロゴ、スローガンを最適な位置に追加し、テキストに「光彩(外側)」の効果を加えます。
[You must be registered and logged in to see this image.]
ここで雲ブラシ（PSDダウンロードファイルに含んでいます）を使って、画面上部の長方形とタイトルの下に雲を追加します。
[You must be registered and logged in to see this image.]
雲をキャンバスの右側へかかるほどには作り過ぎないようにしてください。
できるだけ中央部に配置します。

角丸長方形ツール[You must be registered and logged in to see this image.]で長方形を2つ描いて、一つを白で、もう一つを「#212121」で塗りつぶします。
すると次のようになります。
[You must be registered and logged in to see this image.]




Step4：6つのボックスを作る

長方形選択ツール[You must be registered and logged in to see this image.]で「#ebebeb」の色を選択し、白い角丸長方形の上部に長方形を描きます。
「Ctrl」キーを押したままで白い長方形のレイヤーをクリックし、選択範囲を作成します。
グレーの長方形をクリックして、「選択範囲」－「選択範囲を反転」してから「Delete」キーを押すと、次のようになります。
[You must be registered and logged in to see this image.]
同じように操作し、角に三角形を作ります。
[You must be registered and logged in to see this image.]
同じ操作を繰り返して、合計6つのボックスを作ります。
[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.]




Step6：完成

最後に、ページ上部と同じ方法でフッターを加えます。
これで完成です。
[You must be registered and logged in to see this image.]





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