投稿日：2009年03月31日　　　レベル：初心者　　　　ソフトウェア：

---

このチュートリアルでは、ヘッダーつきのコンテンツボックスを作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： コンテンツボックスの背景を作成する
• Step3 ： ヘッダーを作成する
• Step4 ： コンテンツボックスの見出しを作成する
• Step5 ： 完成

まずはじめに新規ドキュメントを作成します。
ここでは400ピクセル×400ピクセルにします。

背景色を「#000000」にして作業開始です。

それから、次のように角丸長方形ツールを使って半径10ピクセルで描きます。

少しずつ勢いをつけましょう。
角丸長方形のレイヤーを右クリックしてブレンドオプションを次のように設定します。

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

長方形選択ツールで指定した選択範囲を次のように白く塗ります。

当然ですが白いままにはせず先に進めます。
レイヤーを右クリックして次のようにブレンドオプションを入力します。

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

「バナー」の折り目を作ります。
すると奥行きが生まれます。
多角形選択ツールで指定した選択範囲を次のように「#FFFFFF」で塗ります。

次のようにブレンドオプションを入力します。

同じ作業をバナーの反対側に対しても行うと次のようになります。

コンテンツボックスの見出しを作ります。
文字ツールでテキストを入力しましょう。

白だと少しあっさりしているでしょうか。
レイヤーを右クリックして次のようにブレンドオプションを入力します。

すると次のようになります。
見た目が良くなっています。

もうひと手間加えてみましょう。
テキストレイヤーを複製して新しいレイヤーのブレンドオプションは変更せずフォントの色を「#FFFFFF」にします。
このレイヤーを前に作ったテキストレイヤーの下に配置したら、移動ツールで1ピクセルだけ下に移動させます。

これだと感じが強いので、少しだけトーンダウンさせましょう。
不透明度を28％にすると次のようになります。

かなり良くなりました！
コンテンツボックスにアイコンやリンクを追加すると次のようになります。

引用:Web Design Library　著者:psdvibe.com　翻訳:菊池

スポンサードリンク