Photoshop Create Web 2.0ボタン
ボタンPhotoshopのチュートリアルはおそらく、どのPhotoshopのチュートリアルサイトでも最も注目を集めるカテゴリの1つです。Web2.0は現在そのような話題になっているので、Web 2.0のWebアプリケーションに適した簡単なボタンを試してみましょう。ジャンプ後のチュートリアル.
ボタンのデザインから始めるには、幅約500ピクセル、高さ約400ピクセルの空白のキャンバスを作成します。新しいレイヤコールを作成しますbg01'。を選択 角丸長方形ツール, SHIFTを押しながら中央に円形の正方形を描きます。現段階ではどの色でも大丈夫です.
を呼び出す ブレンドオプション のbg01次のスタイルを調整します。
影を落とす
- 不透明度：40％
- 距離：0ピクセル
- 普及率：0％
- サイズ：6px
グラデーションオーバーレイ
- カラーストップ：0％、＃d00031
- カラーストップ：100％、＃ff2b5d
CTRLを押したまま 'を左クリックbg01'レイヤーのサムネイルをクリックしてその形状を選択します。行く 選択する -> 修正する -> 契約する そして値 'を入力2px'。これは選択した領域を2ピクセル縮小します.
新しいレイヤコールを作成しますbg02'（ハイライト後）のハイライト部分を任意の色で塗りつぶします。ここでは＃000000を黒にしています。 「bg02」をダブルクリックして起動します。 ブレンドオプション そして以下のスタイルを微調整します.
グラデーションオーバーレイ
- カラーストップ：0％、＃c6002f
- カラーストップ：100％、＃c6002f
テキスト用に別の新しいレイヤーを作成し、それを呼び出します。txt'。ボタンのテキストを挿入してください。表すためにアルファベットを使います。ここで使用しているフォントスタイルは次のとおりです。
- 丸みを帯びたArial Bold
- 150pt
あなたのテキストを決定した後、同じように、 'txt'をダブルクリックして起動します ブレンドオプション そして以下のスタイルを微調整します.
影を落とす
- 不透明度：25％
- 距離：0ピクセル
- スプレッド：0px
- サイズ：5px
内側の影
- 不透明度：10％
- 距離：0ピクセル
- チョーク：0
- サイズ：10px
ベベルエンボス
- 深さ：1ピクセル
- 方向：下
- サイズ：0px
- 柔らかくする：0px
- ハイライトモード不透明度：32％
- シャドウモードの不透明度：32％
グラデーションオーバーレイ
- カラーストップ：0％＃d2d2d2
- カラーストップ：100％＃f0efef
ボタンはほぼ完成です。上部を少し輝かせてみましょう。ホールド CTRL, 左クリックbg02'外側の形状を強調表示するためのレイヤーのサムネイル。選ぶ Eclipse Marquee Tool. 今すぐ開催 ALT, Eclipse Marquee Toolを選択した状態では、ドラッグすると強調表示された領域の下半分がマイナスになります。上の画像を参照.
一番上の部分が強調表示され、Eclipse Marquee Toolが選択されたままの状態で、右クリックして選択します。 フェザー;入る 15px 半径の.
新しいレイヤーを作成し、それを呼んでください。輝く'と強調表示された部分を白で埋めます[#ffffff]。これにより、ボタンの上部にグロー効果が追加されます。最終製品は下の画像のようになります。.
何か特別な…
'のブレンドオプションを微調整するbg01「と」bg02'あなたにもっと面白いボタンを与えるでしょう。これは私が以前にやったボタンに関するもう一つのPhotoshopチュートリアルです - Web 2.0のための光沢のあるボタンを作成してください
サンプルをダウンロードする
