ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでプロフェッショナルなメニューボタンを作る方法

Photoshopでプロフェッショナルなメニューボタンを作る方法

投稿日:2010年04月06日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルでは、プロフェッショナルなメニューボタンを作る方法を紹介します。

Step1:背景を作成

はじめにサイズが500ピクセル×300ピクセルの新規ドキュメントを作成して、背景にグラデーションを入れます。
最適な色を選択するにあたり、ここでは「#000000」と「#1b2c3e」にしています。

新規ドキュメントを作成する



Step2:ボタンを作成

角丸長方形ツール角丸長方形ツール(半径10ピクセル)を使って好みの色でボタンを描きます(この段階ではどの色を使っても問題ありません)。

ボタンを描く

「レイヤー」−「ラスタライズ」−「シェイプ」を選択してラスタライズしたら、レイヤースタイルを次のように設定します。

ドロップシャドウ

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

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

結果

ボタンの周囲に選択範囲を作ったら(「選択範囲」−「選択範囲を読み込む」を選択)、選択範囲を1ピクセルに縮小します(「選択範囲」−「選択範囲を変更」−「縮小」を選択)。
その後新規レイヤーを作成して「#1b1b1d」で塗ります。
それから「Ctrl」+「D」キーを押して選択範囲を解除します。

結果





Step3:ボタンに光を入れる

ボタンの内側に光を入れます。
新規レイヤーを作成したら、楕円形選択ツール楕円形選択ツールで次のように選択範囲を作ります。
青い色(「#479ea5」)で塗ります。

楕円を描いて塗る

「Ctrl」+「D」キーを押して選択範囲を解除したら、「フィルタ」−「ぼかし」−「ぼかし(ガウス)」を選択して次のように設定します。

ぼかし(ガウス)

ボタンの画像にぼかしが入りました。

結果

「フィルタ」−「ぼかし」−「ぼかし(移動)」を選択して次のように設定します。

ぼかし(移動)

どこまで進んだかを確かめましょう。

進捗

これから多角形選択ツール多角形選択ツールを使って、次のように選択範囲を作って白く塗ります。

選択範囲を白く塗る

「Ctrl」+「D」キーを押して選択範囲を解除し、「フィルタ」−「ぼかし」−「ぼかし(ガウス)」を設定します。

ぼかし(ガウス)

違いを確かめてみてください。

結果

「フィルタ」−「ぼかし」−「ぼかし(移動)」を選択して、次のように設定します。

ぼかし(移動)

結果



Step4:ボタンにテクスチャを加える

それから長方形選択ツール長方形選択ツールで選択範囲を作ります。

選択範囲を作る

「Ctrl」+「Shift」+「I」キーを押して選択範囲を反転し、「Delete」キーを押して選択範囲を削除します。
「Ctrl」+「D」キーを押して選択範囲を解除します。

結果

ボタンにテクスチャを加えます。
3ピクセル×3ピクセルの新規ドキュメントを作成したら、鉛筆ツール鉛筆ツールで黒い格子を描きます。

新規ドキュメントに格子を描く

「編集」−「パターンを定義」で、画像をパターンとして保存します。
それからこのドキュメントを保存せずに閉じて、作業中のドキュメントに戻ります。
長方形選択ツール長方形選択ツールで選択範囲を作って白く塗ります。

選択範囲を白く塗る

「Ctrl」+「D」キーを押して選択範囲を解除し、次のようにブレンドオプションを設定します。

パターンオーバーレイ

塗りの不透明度を7%にすると次のようになります。

結果



Step5:光沢をいれる

新規レイヤーを作成し、多角形選択ツール多角形選択ツールで次のように選択範囲を作って白く塗ります。

選択範囲を白く塗る

「Ctrl」+「D」キーを押して選択範囲を解除し、「フィルタ」−「ぼかし」−「ぼかし(移動)」を選択して次のように設定します。

ぼかし(移動)

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

結果



Step6:ボタンを装飾する

新規レイヤーを作成したら、「#e2dedf」の鉛筆ツール鉛筆ツールで次のようにドットを描きます。

ドットを描く

「Ctrl」+「J」キーを押してレイヤーを複製し、複製したレイヤーに「フィルタ」−「ぼかし」−「ぼかし(移動)」で次のように設定します。

ぼかし(移動)

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

結果

新規レイヤーを作成し、「#479ea5」の鉛筆ツール鉛筆ツールで3本の線を引きます。

3本の線を引く

レイヤーを何枚か複製したら長方形選択ツール長方形選択ツールで選択範囲を作り、3本の線と同じ色で塗ります。

選択範囲を塗る

「Ctrl」+「D」キーを押して選択範囲を解除し、不透明度を30%に設定してレイヤーを結合します。
それから、「フィルタ」−「ぼかし」−「ぼかし(移動)」で次のように設定します。

ぼかし(移動)

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

結果



Step7:ボタンにノイズを入れる

ボタンを選択したら(レイヤーパレットのサムネイルを「Ctrl」キー+左クリックする)、新規レイヤーを作成して黒く塗ります。

新規レイヤーを黒く塗る

「Ctrl」+「D」キーを押して選択範囲を解除し、「フィルタ」−「ノイズ」−「ノイズを加える」を選択します。

ノイズを加える

レイヤーモードを変えてみます。
ここではスクリーンを使って不透明度を60%にします。

結果



Step8:ボタンにテキストを加える

ボタンにテキストを加えます。
横書き文字ツールを使って、「#70ffff」の色でテキストを入力します。

テキストを入力する



Step9:完成

他のボタンを同様に作って並べてみました。

完成



引用:Web Design Library 著者:PhotoshopStar 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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