投稿日：2011年7月26日　　　レベル：初心者　　　　ソフトウェア：

---

このチュートリアルではPhotoshopで立体感のあるボタンを作成する方法を紹介します。

• Step1 ： はじめに
• Step2 ： レイヤーを設定する
• Step3 ： ガイドを配置する
• Step4 ： ボタンの形状を描く
• Step5 ： 大きい方のシェイプへレイヤースタイルを適用する
• Step6 ： 小さい方のシェイプにレイヤースタイルを適用する
• Step7 ： テキストを入力する
• Step8 ： 完成

行動を促すボタンは、ECサイトにおいて欠かすことの出来ない重要なパーツです。
最高の売り上げを生み出すため、押してもらいやすい立体感のあるボタンを作成しましょう。

Photoshopで、次の設定の新規ドキュメントを作成します。

レイヤーパネル上でAltキーを押し、背景レイヤーをダブルクリックして編集できるようにします。

「レイヤー」−「レイヤースタイル」−「グラデーションオーバーレイ」を選び、次のように設定します。

ボタンを描く前に、ガイドを用意します。
「ビュー」−「定規」を選び、ドキュメントに定規を表示します。
定規の上でマウスの左ボタンを押し、ドキュメント内にドラッグ＆ドロップすると、ガイドを表示できます。
縦と横のガイドを、ドキュメントの中心で交差するように配置します。

角丸長方形ツールを選択し、半径を200pxに設定します。
マウスカーソルをガイドが交差する部分に置き、マウスの左ボタンを押したままAltキーを押します。
すると中心からシェイプを作成できるので、そのままドラッグします。

同様の方法で、今度は少し小さめの角丸長方形を描きます。 （角丸長方形ツールを選択し、ガイドの交差するポイントにカーソルを合わせます。次に、マウスの左ボタンを押したままAltキーを押し、ドラッグしてシェイプを描きます。）
より良い仕上がりにするため、下の画像へ赤くマークしたように、シェイプ間の上下左右の幅を等しくするよう注意します。

大きい方のシェイプを選択し、レイヤースタイルのパネルを開きます。
次のようにスタイルを適用してください。

レイヤースタイルを適用すると、このようになります。

小さいほうのシェイプを選択し、レイヤースタイルのパネルを開きます。
下記の画像の通りにスタイルを適用してください。

レイヤースタイルを適用すると、このようになります。

文字ツールを選択し、Bebas Neue fontでボタンの真ん中へテキストを入力します。
今回は「CLICK ME」と入力します。

完成です。

引用:Web Design Library　著者:stoodit.com　翻訳：幕澤

スポンサードリンク