Link:INB Home|INB English| INB русский язык|INB العربية|INB Türkiye|INB فارسی|INB Español|INB Français|INB Português|INB Deutsch|INB 國語|INB 中文|INB 日本语|INB 한국어|INB ภาษาไทย|INB tiếng Việt||PS チュートリアルPhotoshop でプロフェッショナルなメニューボタンを作る方法
INB 日本語掲示板
ようこそ(産業・自然科学者)ここでは、工業化時代のファイティングスピリットに満ちている、あなたと私の両方を通してこのネットワーク空間の自国の生物学的精神科学者と狂気の所に来ました。ホームinbforum.com、永久の名前:jp-inb.forumotion.com
INB 日本語掲示板

ようこそ(産業・自然科学者)ここでは、工業化時代のファイティングスピリットに満ちている、あなたと私の両方を通してこのネットワーク空間の自国の生物学的精神科学者と狂気の所に来ました。ホームinbforum.com、永久の名前:jp-inb.forumotion.com


You are not connected. Please login or register

《《《《《《《上一页INBforum   Go down

上一页INBforum》》》》》》》前のトピックを表示 次のトピックを表示 Go down  メッセージ [Page 1 of 1]

1 PS チュートリアルPhotoshop でプロフェッショナルなメニューボタンを作る方法 on Thu Mar 17, 2011 4:31 pm

Admin


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



Step1:背景を作成

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




Step2:ボタンを作成

[You must be registered and logged in to see this image.]角丸長方形ツール(半径10ピクセル)を使って好みの色でボタンを描きます(この段階ではどの色を使っても問題ありません)。
[You must be registered and logged in to see this image.]
「レイヤー」-「ラスタライズ」-「シェイプ」を選択してラスタライズしたら、レイヤースタイルを次のように設定します。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
すると次のようになります。
[You must be registered and logged in to see this image.]
ボタンの周囲に選択範囲を作ったら(「選択範囲」-「選択範囲を読み込む」を選択)、選択範囲を1ピクセルに縮小します(「選択範囲」-「選択範囲を変更」-「縮小」を選択)。
その後新規レイヤーを作成して「#1b1b1d」で塗ります。
それから「Ctrl」+「D」キーを押して選択範囲を解除します。
[You must be registered and logged in to see this image.]









Step3:ボタンに光を入れる

ボタンの内側に光を入れます。
新規レイヤーを作成したら、[You must be registered and logged in to see this image.]楕円形選択ツールで次のように選択範囲を作ります。
青い色(「#479ea5」)で塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」+「D」キーを押して選択範囲を解除したら、「フィルタ」-「ぼかし」-「ぼかし(ガウス)」を選択して次のように設定します。
[You must be registered and logged in to see this image.]
ボタンの画像にぼかしが入りました。
[You must be registered and logged in to see this image.]
「フィルタ」-「ぼかし」-「ぼかし(移動)」を選択して次のように設定します。
[You must be registered and logged in to see this image.]
どこまで進んだかを確かめましょう。
[You must be registered and logged in to see this image.]
これから[You must be registered and logged in to see this image.]多角形選択ツールを使って、次のように選択範囲を作って白く塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」+「D」キーを押して選択範囲を解除し、「フィルタ」-「ぼかし」-「ぼかし(ガウス)」を設定します。
[You must be registered and logged in to see this image.]
違いを確かめてみてください。
[You must be registered and logged in to see this image.]
「フィルタ」-「ぼかし」-「ぼかし(移動)」を選択して、次のように設定します。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]




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

それから[You must be registered and logged in to see this image.]長方形選択ツールで選択範囲を作ります。
[You must be registered and logged in to see this image.]
「Ctrl」+「Shift」+「I」キーを押して選択範囲を反転し、「Delete」キーを押して選択範囲を削除します。
「Ctrl」+「D」キーを押して選択範囲を解除します。
[You must be registered and logged in to see this image.]
ボタンにテクスチャを加えます。
3ピクセル×3ピクセルの新規ドキュメントを作成したら、[You must be registered and logged in to see this image.]鉛筆ツールで黒い格子を描きます。
[You must be registered and logged in to see this image.]
「編集」-「パターンを定義」で、画像をパターンとして保存します。
それからこのドキュメントを保存せずに閉じて、作業中のドキュメントに戻ります。
[You must be registered and logged in to see this image.]長方形選択ツールで選択範囲を作って白く塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」+「D」キーを押して選択範囲を解除し、次のようにブレンドオプションを設定します。
[You must be registered and logged in to see this image.]
塗りの不透明度を7%にすると次のようになります。
[You must be registered and logged in to see this image.]




Step5:光沢をいれる

新規レイヤーを作成し、[You must be registered and logged in to see this image.]多角形選択ツールで次のように選択範囲を作って白く塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」+「D」キーを押して選択範囲を解除し、「フィルタ」-「ぼかし」-「ぼかし(移動)」を選択して次のように設定します。
[You must be registered and logged in to see this image.]
すると次のようになります。
[You must be registered and logged in to see this image.]




Step6:ボタンを装飾する

新規レイヤーを作成したら、「#e2dedf」の[You must be registered and logged in to see this image.]鉛筆ツールで次のようにドットを描きます。
[You must be registered and logged in to see this image.]
「Ctrl」+「J」キーを押してレイヤーを複製し、複製したレイヤーに「フィルタ」-「ぼかし」-「ぼかし(移動)」で次のように設定します。
[You must be registered and logged in to see this image.]
すると次のようになります。
[You must be registered and logged in to see this image.]
新規レイヤーを作成し、「#479ea5」の[You must be registered and logged in to see this image.]鉛筆ツールで3本の線を引きます。
[You must be registered and logged in to see this image.]
レイヤーを何枚か複製したら[You must be registered and logged in to see this image.]長方形選択ツールで選択範囲を作り、3本の線と同じ色で塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」+「D」キーを押して選択範囲を解除し、不透明度を30%に設定してレイヤーを結合します。
それから、「フィルタ」-「ぼかし」-「ぼかし(移動)」で次のように設定します。
[You must be registered and logged in to see this image.]
すると次のようになります。
[You must be registered and logged in to see this image.]




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

ボタンを選択したら(レイヤーパレットのサムネイルを「Ctrl」キー+左クリックする)、新規レイヤーを作成して黒く塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」+「D」キーを押して選択範囲を解除し、「フィルタ」-「ノイズ」-「ノイズを加える」を選択します。
[You must be registered and logged in to see this image.]
レイヤーモードを変えてみます。
ここではスクリーンを使って不透明度を60%にします。
[You must be registered and logged in to see this image.]




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

ボタンにテキストを加えます。
横書き文字ツールを使って、「#70ffff」の色でテキストを入力します。
[You must be registered and logged in to see this image.]




Step9:完成

他のボタンを同様に作って並べてみました。
[You must be registered and logged in to see this image.]





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

ユーザーのプロフィールを表示 http://jp.inbforum.com

上一页INBforum   Go down

上一页INBforum前のトピックを表示 次のトピックを表示 トップに戻る  メッセージ [Page 1 of 1]

Permissions in this forum:
返信投稿: 不可

Copyright ©2009-2010 LTD Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

IT:SINGLESERVGoogle谷歌翻译TranslateFORUMSOFTLAYERGoogle谷歌广告联盟AdSenseAsia

 

Create a forum on Forumotion | © PunBB | Free forum support | 連絡先 - | Report an abuse | Sosblog