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

---

このチュートリアルではPhotoshopで見映えの良いボタンを作成する方法を紹介します。

• Step1 ： はじめに
• Step2 ： Photoshopで木材のテクスチャを開く
• Step3 ： ボタンの背景を作成する
• Step4 ： メインのボタンを作る
• Step5 ： ボタンを装飾する
• Step6 ： 完成

今日はこのボタンを作成します。

まずは、素材を準備します。下記2点をダウンロードしてください。
木材のテクスチャ
ダウンロードアイコン

Photoshopで、先ほどの木材のテクスチャを開きます。
1024px×768pxとし、今回の作品の背景にします。

今回作成するボタンは、透きとおるような表面の背景とメインのボタンという2つのパーツから成り立っています。
メインのボタンにはグリーンのグラデーションを使い、木材のテクスチャとマッチするようにします。

角丸長方形ツール（U）を選択して、40pxの半径で360px×80pxの白いシェイプを描いてください。

このシェイプに内側の影を付けて線を加え、シェイプの不透明度を25％にします。
このシェイプのレイヤーをダブルクリックして、下記のレイヤー効果を加えます。

このようになります。

角丸長方形ツール（U）を再度選択し、半径30pxで340px×60pxのシェイプを描きます。
先ほどのシェイプの真ん中に置き、真ん中のシェイプとボタンの背景の間の余白が10pxになるようにします。

次に、下記のレイヤースタイルを加えます。

このようになります。

Step1で準備したダウンロードアイコンを24px×24pxに縮小し、ボタンの大きさに合わせます。
Photoshopでエレメントのサイズを変えるには、Ctrl＋Tを押すか「編集」−「パスを変形」−「拡大・縮小」を選択します。

次に、ボタンにテキストを加えます。
ここでは無料フォントのMuseo 500を使い、"Download this tutorial"と書きます。
Museo 500は、エレガントでとても人気のあるフォントです。

完成です。

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

スポンサードリンク