凹凸・立体感を出す「ベベルとエンボス」

ボタンデザインで特に頻繁に用いられるのが、この「ベベルとエンボス」です。「構造」内のスタイル・深さ・サイズなどを調整することで、板チョコのようなパキっとした凸面から、幼児向け玩具のボタンのような丸みを帯びた凸面まで、さまざまな立体感を表現できます。

1ページ目で例として作った長方形レイヤーには、このような設定で「ベベルとエンボス」をつけました

また、「陰影」内では、レイヤーに対して、どの方向・角度から光が当たっているかという点や、そのハイライトやシャドウの色味を調整して、光沢感を演出できます。

加工サンプル

レイヤーのフチに線を引く「境界線」

ボタンデザインで、上述の「ベベルとエンボス」と並んでよく用いられる効果が「境界線」。その名の通り、レイヤーの境界線を表現する際に用いる効果です。ごく身近な例で言えば、今解説しているソフト・Photoshopのポップアップウインドウに表示される「OK」ボタンや「キャンセルボタン」の周囲に見える、極細の線の線がそれにあたりますね。

設定画面で「境界線」を設定

主に「構造」内のサイズと位置を操作することで、線の太さ(px単位)と、レイヤーのどの位置(外側・内側・中央)に線を引くかが選べます。不透明度を調整して半透明の線にもできます。

また「塗りつぶしタイプ」内で、線の色や、効果を選べます。

左からカラー(単色)・グラデーション・パターン

上記図は「塗りつぶしタイプ」が分かりやすいように、境界線が太めになっていますが、実際にこの効果を用いるときは、Photoshop上のボタン要素のように、細くさりげない線を用いる方が、個人的には野暮ったくならず良いと思います。