フォトショップユーザを対象にしたコミュニティ Photoshop world

基本編

光沢のあるボタンの作り方
ナカムラゲンキ

今回は、Webサイトやアプリケーションのアイコンなどで多く目にする光沢のあるボタンデザインの作り方をご説明します。以前にスタイルを使ったボタンデザイン方法をご紹介しましたが、今回はそのステップアップ版という感じです。それでは早速トライしてみましょう。

＜スタイルを使ってボタンの基本デザインを制作＞
	1. まずはボタンの基本形状を制作します。「角丸長方形」ツールを使ってボタンの土台となる角丸長方形を制作します。
2.　土台となるシェイプレイヤーにレイヤースタイルを使って装飾をしていきます。まずは「グラデーションオーバーレイ」でボタンに色を付けます。濃い色から薄い色にすると立体感や透明感が出て綺麗に見えます。

3.　次にボタンにドロップシャドウを加えます。「距離」パラメーターによって立体感が変わりますが、値を0にすると真上から光が当たっているように影が落ちます。

4.
ボタンに文字を加えます。今回は背景色を考慮して文字色を白にしました。

5.　最後にボタンにアイコンを加えます。今回はPhotoshop標準のカスタムシェイプレイヤーから「Download」に合う矢印を選んでみました。

6.
これでボタンの基本デザインが完成しました。次はこれに光沢処理を加えていきます。

< Back　　１｜２　　 Next >

ナカムラゲンキ

2007.11.27