投稿日：2010年09月03日　　　レベル：中級者　　　　ソフトウェア：

---

このチュートリアルでは、ポートフォリオサイトのレイアウトを作る方法を紹介します。

• Step1 ： 長方形を描く
• Step2 ： 境界線をつける
• Step3 ： 長方形の一部を消す
• Step4 ： 上に箱をつくる
• Step5 ： 左に箱をつくる
• Step6 ： さいごに

新規ドキュメントを800ピクセル×600ピクセルで作成し、背景色を#1f1f1fにします。
新規レイヤーを作成し、ページの左側に四角形を描いて#2d2d2dで色を塗ります。
同様に画面の上と下に四角形を描き、ファイルを保存します。
3つの四角形が別々のレイヤーに分かれていることを確認してください。

背景レイヤーの上のレイヤーをダブルクリックし、レイヤーオプションを開きます。
1ピクセルの黒い色の境界線を、不透明度30％に設定して追加します。
一番上のレイヤーをクリックし、Ctrl＋Eを二度押して下のレイヤーを結合します。
「四角形の入っているレイヤーと背景のレイヤー」の2つが残ります。

少しだけズームし、長方形選択ツールで四角形の端を削除します。
Shiftを押して、2つ目の選択範囲を四角形の両端に指定します。

クリックして拡大

四角形の両端を選択し、Deleteを押します。

新規レイヤーを作成し、レイヤー名を数字にします。
小さな箱を作り、#101010の色で塗ります。
数字の名前のレイヤーをダブルクリックし、レイヤーオプションを表示させます。
2ピクセルの黒い色の境界線を追加し、次のように配置します。

箱のレイヤーを複製し、複製した方のレイヤーを選択します。
Shiftを押しながら右矢印のキーを5回押すと、程よい間隔がつきます。
この作業を10回繰り返し、10個の箱を作ります。
その後、箱に1-10までの数字を入れます。

続けて、画面の左側に4つの箱を作ります。
レイヤースタイルは数字の入った箱と同じ設定にします。

テキストを追加します。

サイトのタイトル、スローガン、ロゴを追加します。
私は、メインギャラリーのイメージと小さめのイメージを追加しました。
あなたの想像力を発揮し、思い通りになるまで試してみてください。

画像にインフォメーションボックスを追加して、文章を入力しましょう。
メインギャラリーイメージの隣に箱を作り、レイヤースタイルを設定します。
インフォメーションボックスと同じスタイルを設定し、1ピクセルの黒い色の境界線とドロップシャドウをつけて、ボックスにタイトルを入れてみました。

できあがったサイトは、こちらです。

引用:Web Design Library　著者:Hv-Designs.co.uk　翻訳：菊池

スポンサードリンク