投稿日：2008年10月24日　　　レベル：中級者　　　　ソフトウェア：

---

このチュートリアルでは、Photoshopを使って弁護士事務所風のウェブサイトを作ってみたいと思います。

• Step1 ： 背景を作成
• Step2 ： サイドのベースを作成
• Step3 ： メインのベースを作成
• Step4 ： テキストとイメージを追加
• Step5 ： 装飾を追加
• Step6 ： 完成

760ピクセル×770ピクセルの新規ドキュメントを作ります。

背景色に「#282828」を選択します。

長方形ツールで、シェイプを2つ作ります。




同じツールで。別の小さなシェイプを作ります。色は白を選択します。



それから小さな白いシェイプのレイヤーの不透明度の数値を変更します。



すると次のようになります。




大きな白いシェイプを選択して、レイヤーパレットを右クリックして、「レイヤーのラスタライズ」を選択します。



ブラシのセットをダウンロードできます。



Photoshopにブラシをロードします。



ブラシを新しいレイヤーに追加します（新規レイヤーを作るには、「Ctrl」＋「Shift」＋「Alt」＋「N」キーを押します。）。
次の画像のように端に黒い色を加えます。



大きい白いシェイプを選択して、多角形選択ツールを使って次のように選択範囲を作ります。



「Delete」キーを押して、「Ctrl」＋「D」キーを押します。




次のステップはテキストとイメージの追加です。
簡単にできますので方法については説明を省略します。



自分にとってこのレイアウトはシンプルです。
長方形ツールでシェイプを追加します。
シェイプが白いレイヤーの上にあることを確認してください。



グレーのシェイプに次のレイヤースタイルを設定します。







すると次のようになります。



左側に素材集の画像を配置します。




続けて楕円形ツールで円形のシェイプを作り、次のように配置します。



小さなシェイプ全部に次のレイヤースタイルを設定します。





ペンツールで、次のようなシェイプを作ります。



上のレイヤースタイルをこのシェイプにも設定します。
それからレイヤーを何度か複製します（選択したレイヤーを複製するには、「Ctrl」＋「J」キーを押します。）。
作ったシェイプを配置すると、次のようになります。




これで完成です。

引用:Web Design Library 　著者:www.talk-mania.com　翻訳:菊池

スポンサードリンク