ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

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月の人気記事ランキング