右側にあるボタンを作ろうというのが今回の目的。裏テーマは「覚えておきたいレイヤースタイル」です。こっちが本命。

PSDファイルダウンロードはこちら(Google Docsへ移動)
リンク先で「Ctrl + S」でDLできます

では早速取り掛かりましょー。

STEP1:ボタンの土台作り
STEP2:文字とアイコンを乗せる
STEP3:マウスオーバー用の画像

ボタンの土台作り

「ファイル」→「新規」(Ctrl + N)から300 × 300ピクセルのステージを作成します。


矩形ツール(U)の角丸長方形を選択し、丸み5pxに設定。
240 × 60ピクセルの長方形シェイプを作成します
(「Ctrl + @」でグリッドを表示させると作りやすい)


いま作成したシェイプのレイヤースタイルを設定していきます。
(シェイプレイヤーを右クリック→レイヤー効果 or ダブルクリック)

設定する項目は「シャドウ(内側)」「グラデーションオーバーレイ」「境界線」の3つです。順に設定してきます。

シャドウ(内側)

ボタン上部に1ピクセルだけ入る白いラインを作ります。
これが入ることで、ボタンに立体感が出ます、

描画モード:通常
シャドウのカラー:#ffffff
角度:90°(「包括光源を使用」にチェック)
距離:2px
サイズ:0px
に設定します。

グラデーションオーバーレイ

図のように#2cb0dcから#33ccffのグラデーションを作成します。


この時の色の決め方ですが、先にどちらか片方の色(今回は#33ccff)を決めます。
もう一色は、先ほど決めた色よりも「少し明るめ」or「少し暗め」にすると失敗しません。
カラーパレットでいえば少し上か下ってことですね →

境界線

サイズ:1px
位置:内側
カラー:#2288aa
に設定します。

すると、こうなります →→→
これで、ボタンの土台作りは完成です。

文字とアイコンを乗せる


いま作った土台に右図のように文字を乗せます。

つぶやき注意
フォント:ヒラギノ角ゴ W6
サイズ:18pt
カラー:#ffffff

FOLLOW ME
フォント:helvetica
サイズ:10pt
カラー:#ffffff

ツイッターアイコン
アイコンはのDLはこちら。
Twitter ロゴとアイコン

アイコンはカラーオーバーレイ「#1b7998」で塗りつぶす。

これにて終了!でもいいのですが、もう一手間加えるのがプロってもんでしょう。

つぶやき注意のレイヤースタイルを設定しましょう。
右図のように設定します。

ドロップシャドウ
描画モード:乗算
カラー:#000000
角度:-90°(「包括光源を使用」のチェックを外す)
距離:1px
サイズ:0px
で設定します。

この設定を「FOLLOW ME」にも使いますので、つぶやき注意レイヤー上で「右クリック」→「レイヤースタイルをコピー」し、FOLLOW MEレイヤー上で「右クリック」→「レイヤースタイルをペースト」します。

これで同じ設定になりました。
いま設定した「つぶやき注意」と「FOLLOW ME」の文字を見てみると、影がついて文字が凹んでいるように見えます。
最近は立体感を出すのが流行りなので、便乗。

次はアイコンも凹ましていきます。
…ただし、こっちの設定は少し変わるのでコピペでなく新たに設定していきます。

設定項目は「ドロップシャドウ」「シャドウ(内側)」です。

ドロップシャドウ
描画モード:通常
カラー:#ffffff
不透明度:30%
角度:90°(「包括光源を使用」をチェック)
距離:1px
サイズ:0px

シャドウ(内側)
描画モード:乗算
カラー:#000000
不透明度:25%
角度:90°(「包括光源を使用」をチェック)
距離:1px
サイズ:0px

右図のようにキレイに凹んでいると思います!
これにてボタンは完成です!

文字レイヤーとアイコンレイヤーの設定を変えた理由
何が違うのかよくわからんと思うので少し解説。凹んでるように見せるには「上に黒、下に白」の影をつければいいのです。
ただ、今回のテキストのように、対象物が白なのに白い影をつけても同化してしまい見難くなるだけです(黒に黒い影も同様)。なので、文字レイヤーには白い影は付けませんでした。以上。

※1:通常は「上に黒い影、下に白い影」をつけますが、今回の文字レイヤーのようにどちらか片方だけでもおkです。
※2:凹ではなく凸の場合は凹の影の角度を180°変えればおkです。

マウスオーバー用の画像

一番はじめに作ったボタンレイヤーを複製します。
ボタンレイヤーを選択した状態で「Ctrl + J」

複製したボタンのレイヤースタイルをそのまま使用しますが「グラデーションオーバーレイ」だけ変更します。

グラデーションのカラーを「#55bbdd」「#66ddff」に設定します。

以上で、マウスオーバー用の設定は完了です。
マウスをのせると画像が切り替わります→
てことで終ーー了ーー