ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでヘッダーつきのコンテンツボックスを作る方法

Photoshopでヘッダーつきのコンテンツボックスを作る方法

投稿日:2009年03月31日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、ヘッダーつきのコンテンツボックスを作ってみたいと思います。


Step1:はじめに

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

新規ドキュメントを400ピクセル×400ピクセルで作成


Step2:コンテンツボックスの背景を作成する

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

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

半径10ピクセルの角丸長方形を描く

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

角丸長方形のレイヤーにカラーオーバーレイを設定

角丸長方形のレイヤーに境界線を設定

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

ブレンドオプション結果


Step3:ヘッダーを作成する

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

長方形の選択範囲を白く塗る

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

レイヤーにドロップシャドーを設定する

グラデーションオーバーレイを設定する

グラデーションの設定

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

ブレンドオプションの結果

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

選択箇所を#FFFFFFで塗る

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

グラデーションオーバーレイを設定する

グラデーションの設定

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

結果

Step4:コンテンツボックスの見出しを作成する

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

テキストを入力

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

グラデーションオーバーレイを設定

グラデーションの設定

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

結果

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

レイヤーを複製して#FFFFFFにし、1ピクセル下に移動させる

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

不透明度を28%にする

Step5:完成

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

完成


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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング