Photoshopの光沢のあるWeb 2.0ボタンをデザインする
光沢のあるWeb 2.0ボタンをデザインしよう? これは、見栄えの良い赤い光沢のあるボタンを取得する方法を段階的に説明する簡単なPhotoshopのチュートリアルです。.
ステップ1 - ベースを作成する
新しいキャンバスを起動し、以下の画像に従って次の設定(黄色でマークされている)を調整します。残りはデフォルトとして来るはずです。あなたもデフォルトで二重チェックしたいかもしれません.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop.gif)
新しいレイヤコール 'Button'を作成します
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_2.gif)
「ボタン」レイヤーで、角丸長方形ツールを選択します
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_3.gif)
半径を7pxにする
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_4.gif)
下の画像のような長方形を描きます.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_5.gif)
ステップ2 - 赤いボタン
「ボタン」レイヤーのブレンドオプションを右クリックします
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_6.gif)
以下の設定を微調整します。
影を落とす
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_7.gif)
内側の影
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_8.gif)
ベベルとエンボス
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_9.gif)
グラデーションオーバーレイ
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_10.gif)
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_11.gif)
あなたのボタンはこのように見えるはずです
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_12.gif)
ステップ3 - 光沢のある効果を作成する
「Glass」という新しいレイヤコールを作成します
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_13.gif)
Retangularマーキーツールを選択し、 'Button'レイヤーを選択していることを確認してください。あなたのCtrlキーを押しながらレイヤーの「ボタン」をクリック”のレイヤーのサムネイル。あなたのボタンは今強調表示されるべきです.
ここで 'Glass'ボタンを選択し、Retangularマーキーツールを選択した状態でAltキーを押します。下の画像のように、ボタンの下半分を横切って描画(カット)します.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_14.gif)
バケツツールを使用して、選択した領域を白色の#ffffffで塗りつぶします
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_15.gif)
不透明度を18%に調整
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_16.gif)
あなたはこのように見える光沢のあるボタンを持っているべきです.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_17.gif)
ステップ4 - パターンオーバーレイ
ボタンに若干のパターンオーバーレイを与えましょう。先ほど作成したカスタムstripe5pxを使用します。 「Button」と「Glass」の間に「Pattern」という新しいレイヤーコールを作成し、ブレンドオプションに進みます。.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_18.gif)
[パターンオーバーレイ]を選択し、[Stripe5px](または作成した任意のパターン)を選択して[OK]をクリックし、ダイアログを閉じます。.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_19.gif)
まだ長方形のマーキーツールを使用していることを確認してください。
ステップ5 - テキストを挿入する
以下の設定で、白い#ffffff色のランダムなテキストを入れてください
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_20.gif)
テキストのレイヤーに次のブレンド効果を使用する.
影を落とす
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_21.gif)
ステップ6 - 最終出力
あなたはこのような画像を得なければなりません.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_22.gif)