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

---

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

• Step1 ： はじめに
• Step2 ： ボタンの作成
• Step3 ： ボタンに立体感をつける
• Step4 ： ボタンに光の反射をつける
• Step5 ： テキストとアイコンの追加
• Step6 ： 完成

このチュートリアルでは、立体感のあるツイッターのフォローボタンの作り方について説明します。
完成図は以下の通りです。

Photoshopを開いて600px×400pxの新規ファイルを作成します。
背景を薄い青（#f0f5f9）で塗ります。

角丸長方形ツールを選択し、半径を10pxに設定します。
295px×58pxの長方形を描きます。

「レイヤー」−「レイヤースタイル」−「レイヤー効果」を選択し、次のようにレイヤースタイルを設定します。

角丸長方形のレイヤーを複製し、最初に作ったレイヤーの下に配置します。
「編集」−「変形」−「拡大・縮小」を選択し、ボタンの高さを64pxにします。

複製元のレイヤーと同じレイヤー効果がついているため、これを削除します。
レイヤー効果を削除するには、レイヤーパレットの該当するレイヤーの上で右クリックし、「レイヤースタイルを消去」を選択します。

「レイヤー」−「レイヤースタイル」−「レイヤー効果」を選択し、次の画像のように設定します。

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

複製した方のレイヤーの、レイヤーパレットのサムネイルの上で、「Ctrl」キーを押しながらマウスをクリックします。
すると図がある部分だけが選択されます。

新規レイヤーを作成し、一番上に配置します。
ブラシツールを選択し、250pxの大きさで白（#ffffff）のソフト円ブラシを使って、選択範囲の下側を1、2回塗ります。
ボタンの下側が明るくなります。

テキストとツイッターの鳥のアイコンを追加します。
テキストには「Arial」フォントを使います。

ツイッターの鳥はここからダウンロードしてドキュメントに追加します。
サイズを32px×23pxに変更し、下の画像のように配置します。

テキストと鳥に次のレイヤー効果を設定します。

これでボタンの完成です。

引用:Web Design Library　著者:2expertsdesign.com　翻訳：菊池

スポンサードリンク