スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopでスタイリッシュなナビゲーションボタンを作る方法

Photoshopでスタイリッシュなナビゲーションボタンを作る方法

投稿日:2008年7月15日   レベル:中級者    ソフトウェア:PhotoShop
このチュートリアルでは、フォトショップでスタイリッシュなナビゲーションボタンを作ってみたいと思います。


Step1:はじめに
新規ファイルを表示します。サイズは800ピクセル×600ピクセルで解像度は72dpiです。塗りつぶしツールを使って色を黒く塗ります。

背景を作成


Step2:メニューパネルを作成
次に角丸長方形ツールを選択して半径20ピクセルでメニューパネルを描き、同じツールを使って半径10ピクセルで同じ形のすき間を4つ切り取って「Alt」キーを押すと次のようになります。

メニューパネルを作成

レイヤーパネルの作業するレイヤー上でマウスをクリックして次のパラメータを選択します。レイヤーのパラメータ:塗り 0%
「ブレンドオプション」−「光彩(内側)」

光彩(内側)

「ブレンドオプション」−「グラデーションオーバーレイ」

グラデーションオーバーレイ

グラデーションのパラメータ:

グラデーションのパラメータ

「ブレンドオプション」−「境界線」

境界線

メニューパネルを作成


Step3:インジケーターを作成
最初に使った角丸長方形ツールで(半径は10ピクセル)、メニューのボタンで切り替えを行うインジケーターを表現できます。レイヤーの色は「#EB2127」です。

インジケーターを作成

インジケーターのレイヤーのコピーを3つ作り、コピーしたレイヤーの色を「#58595B」に変えます。
自由変形オプションを選択してコピーを次のように配置します。

インジケーターを作成

角丸長方形ツール(半径は15ピクセル)で、ボタンの切り替えを表示するインジケーターのハイライトを描きます。

インジケーターを作成

レイヤーのパラメータ:塗り 0%
「ブレンドオプション」−「グラデーションオーバーレイ」

グラデーションオーバーレイ

グラデーションのパラメータ:

グラデーションのパラメータ

インジケーターを作成

今度はハイライトのレイヤーでコピーを3つ作り、その後自由変形オプションを選択して次の画像のようにコピーを配置します。

インジケーターを作成


Step4:分割線を作成
ラインツールを使って、3つの縦線を作ってメニューボタンを分割します。色は「#414142」です。

分割線を作成

分割線を作成


Step5:タイトルを挿入
メニューボタンのタイトルを挿入し、次のように設定します。
「About us」の設定:

文字の設定

ボタンの残りのタイトル:

文字の設定

タイトルを挿入


Step6:メニューを反射させる
メニューボタンのついたパネルを構成するすべてのレイヤーをグループ化すれば、もっとうまく作れます(「Ctrl」キーを押して対応するレイヤーを選択してからマウスを左クリックして選択したレイヤーをレイヤーパネル上で下に移動させます)。先にグループ化したもののコピーを作って一つのレイヤーに統合します(「Ctrl」+「E」キーを使用)。コピーを反転させて、自由変形を適用します。次の画像のようにコピーを配置します。

メニューを反射させる

マスクを追加オプションでレイヤーパネルの一番下にあるレイヤーでマウスをクリックします。それからグラデーションツールを選択して次のように半透明の反射を表現します。


Step7:完成
完成です!

完成
拡大画像を表示する


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



スポンサードリンク

コメント

ランダム記事5件

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