ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > フォトショップでブログのヘッダーをデザイン

フォトショップでブログのヘッダーをデザイン

投稿日:2007年9月7日   レベル:初心者    ソフトウェア:PhotoShop

Step1:新規ファイルを作成
766x148pxで72dpiの新規ファイルを開きます。次に、長方形ツール (U)を選び、サイトのヘッダーのバックグラウンドを作成します。

新規ファイルを作成

Step2:レイヤーパラメータ
レイヤースタイルを開き、グラデーションオーバーレイの設定画面に移動します。下記のようにパラメータを設定してください。

パラメータ設定

今回利用したカラーは#44D6FC → #2D6A97 です。パラメータ設定後は、下記のようになります。

設定後

Step3:メニューボタンを作る
角丸長方形ツール (U)を使って#2B363E の色のメニューボタンをサイトのヘッダーに起きます。角丸の半径は5pxに設定します。

角丸長方形ツール

この時グラデーション設定が引き継がれている場合は、グラデーション効果をゴミ箱に捨ててください。

効果を削除

作成後

その後、境界線に色付けます。レイヤースタイルを開き、境界線の設定画面に移動し、下記のようにパラメーターを設定してください。境界線の色は、#43D1F9にしています。

境界線の設定

境界線設定後

先ほど作ったボタンのレイヤーを4つ作ります。

レイヤーをコピー

Step4:パターンの定義
20x20px、72 dpiの新規レイヤーを作成します。長方形ツール (U)を選択し、以下のような白い色のテクスチャーの最初のエレメントを描きます。テキスチャーの形の修正は通常のアンカーポイントの切り替えツールで行います。

変形

作成

新しいパターンを保存します

パターンの定義

このパターン定義で、下記の様な斜線をメニューボタンに追加できます。このステップはその準備です。

イメージ画像

Step5:メニューボタンの編集
再度、新規レイヤーを作成し、テクスチャーをメニューボタンの上に置くためのレイヤーの形に長方形ツール (U)を適用します。

長方形ツール適用

レイヤースタイルのパターンオーバーレイの設定では下記のようにします。

パターンイオーバーイ

設定後

ボタンの上にもうひとつレイヤーを作ります。

レイヤー作成

その後、不透明度を10%にし、グラデーションオーバーレイの設定で下記のように設定します。

パラメータ設定

Step6:メニューの微調整
長方形ツール (U)を使って小さい長方形を描き、下記のように設定します。カラーは境界線の色を同じです。

長方形を描く(拡大)

長方形を描く

新しく作ったレイヤーのコピーを3つ作ります。次に示す写真と同じように置きます。

設定

Step7:テキストの挿入
メニューボタンにタイトルを記入してください。

タイトルを記入

サイトタイトルを左部分に配置します。

サイトタイトルを配置

新しく作ったレイヤーのコピーを作ります。再び自由変形ツールを選んで、コピーをひっくり返し不透明度40%に設定します。パラーメタは下記のとおり。

ひっくり返す

パラメータ

設定後

Step8:完成
新規レイヤーを作ります。鉛筆ツール (B)を選択して白のポインターを作成し、全てのボタンのタイトルの左に置きます。

矢印の作成

ps_11878_30.jpg

(クリックすると拡大します)

サイトのヘッダーが完成しました。

引用:Web Design Library著者:Adobetutorialz.com翻訳:中山



スポンサードリンク

コメント

ランダム記事5件

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