「PhotoshopでWebデザイン」をするためのテクニックを紹介するこの連載。第3回は、Webサイトには欠かせない「ボタン素材」をテーマに、昨今のWEBデザインでよく見られる、様々なボタン表現術の基礎をご紹介します。

おさらい
【レポート】Photoshop CS6で快適にWEBデザインするテクニック vol.1

【レポート】Photoshop CS6で快適にWEBデザインするテクニック vol.2

ボタン制作には必須の「レイヤースタイル」とは？

「レイヤースタイル」とは、その名の通り、選択したレイヤーに様々な視覚効果をつけることができる機能です。これを使うことで、ボタンにさまざまな表情をつけることができます。

それでは、実際に「レイヤースタイル」を設定してみましょう。下図内の長方形は1枚のシェイプレイヤーです。

レイヤーパネル上で、効果をつけたいレイヤーをダブルクリックすると、レイヤースタイルの設定画面が表示されます。

参考として分かりやすいように、さまざまな効果を併用してコテコテのレイヤースタイルをつけてみました。冒頭のスッピン状態の長方形とは異なる見た目ですが、この立体感や外側の水色の線、フチの光、内部の柄など、すべてレイヤースタイルでつけた効果なのです。

レイヤースタイルの利点としては、そのレイヤーをラスタライズ・統合するまで、何度でも編集可能な点、作成したレイヤースタイルを別レイヤーにコピー・ペーストできる点、頻繁に使うレイヤースタイルは、いつでも呼び出せるように登録できる点などがあります。

上の正円に適用されたレイヤースタイルを、下の正方形にもペーストしたところ

 登録したレイヤースタイルを、選択レイヤーに適用できるスタイルパネル

また、Photoshop CS6からは、複数のレイヤーを内包した「グループ」単位で、レイヤースタイルをつけることができるようになりました。

次ページからは、レイヤースタイルによって得られるひとつひとつの効果を順にチェックしていきましょう。