ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでプロフェッショナルがデザインするダークなヘッダーを作る方法

Photoshopでプロフェッショナルがデザインするダークなヘッダーを作る方法

投稿日:2009年06月19日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopでプロフェッショナルがデザインするダークなヘッダーを作ってみたいと思います。


Step1:はじめに

はじめに1000ピクセル×215ピクセルの新規ドキュメントを作成します。

1000ピクセル×215ピクセルの新規ドキュメントを作成する


Step2:メニューバーの背景を作る

次に塗りつぶしツール塗りつぶしツールを使って背景を「#000000」で塗ります。

長方形選択ツール長方形選択ツールで次のように選択範囲を作ったら「#FFFFFF」で塗ります。

選択範囲を#FFFFFFで塗る

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

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

グラデーションを設定する

境界線を設定する

グラデーションを設定する

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

結果

次のように選択範囲を作ったら「#FFFFFF」で塗ります。

選択範囲を#FFFFFFで塗る

不透明度を31%以下に設定してから、ブレンドモードをオーバーレイに変更すると次のようになります。

ブレンドモードをオーバーレイに変更する


Step3:ロゴを作る

シンプルなテキストロゴをヘッダー部分に入力します。
テキストツールテキストツールで次のように入力します。

テキストを入力する

テキストレイヤーを右クリックして次のようにブレンドオプションを設定します。

シャドウ(内側)を設定する

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

グラデーションを設定する

ここではテキストに輝きを加えてみました(作業は任意です)が、各自で思いついたアイディアを試してみてください。

結果

ヘッダーにリンクを追加します。
シンプルなフォントを使って大文字で入力します。
ここでは「Helvetica Neue」を使ってみました。

ヘッダーにリンクを追加する


Step4:アクティブリンクを作る

アクティブなリンクを表示させます。
長方形選択ツール長方形選択ツールを使って次のように選択範囲を作ったら「#FFFFFF」で塗ります。

選択範囲を#FFFFFFで塗る

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

シャドウ(内側)を設定する

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

グラデーションを設定する

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

結果

検索ボックスを追加します。
長方形選択ツール長方形選択ツールを使って次のように選択範囲を作ったら「#FFFFFF」で塗ります。

選択範囲を#FFFFFFで塗る

半径5ピクセルの角丸長方形ツール角丸長方形ツールを使って次のようにボタンを作ります。

ボタンを作る

ボタンに対して次のようにブレンドオプションを設定します。

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

グラデーションを設定する

テキストを入力すると次のようになります。

結果


Step5:完成

ここでは最後に「フィード」のエリアを追加してみました。

完成


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



スポンサードリンク

コメント

ランダム記事5件

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