投稿日：<2006年8月8日>　　　レベル：中級　　　　ソフトウェア：

これがこのチュートリアルでの完成品になります。

ステップ1
新しいドキュメントを開いて、背景を白にします。新しいレイヤーを作成して、矩形選択ツールで、コンテンツボックスに手ごろな大きさの範囲を選択してください。そして、その領域を#8f8f8fカラーで塗ります。下の例を参考にしてください。

ステップ2
新しいレイヤーを作成して、先程作成した長方形を選択し、選択範囲>選択範囲を変更>縮小をおこないます。ここで、縮小量を10pixleに設定してください。そして、下のイメージのように、#f1f1f1カラーで塗ります。

ステップ3
さて、ここからコンテンツボックスに色々な効果を加えていきます。最初に、コンテンツボックスの輪郭を作っていきましょう。次の設定を一番大きなボックスに対して適用します。

下のようになったと思います。

ステップ4
では、内側のボックスにも手を加えていきましょう。レイヤーを選択して、次の設定をおこなってください。

こうなりましたか？

これで基本的な輪郭はできあがりました。

ステップ5
ここからは、リンクを含んだメニューを作成していきます。最もシンプルというわけではありませんが、ここでは私が作成した、次のようなメニューを使用します。

これを複製して、コンテンツボックスの中に貼り付ければ完成です。テキスト部分は、必要なように変更してください。

完成です！！

引用:Web Design Library著者:PicoDeath翻訳:atuk