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

---

• Step1 ： 新規ファイルを開く
• Step2 ： レイヤーパラメータ
• Step3 ： メニューボタンを作る
• Step4 ： パターンの定義
• Step5 ： メニューボタンの編集
• Step6 ： メニューの微調整
• Step7 ： テキストの挿入
• Step8 ： 完成

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



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



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



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



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





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





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



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





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



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



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



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





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



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



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





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



メニューボタンにタイトルを記入してください。



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



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







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





（クリックすると拡大します）

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

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

スポンサードリンク