• WEB

Photoshopの立体表現!「べベルとエンボス」をマスターせよ!

  • ぴきたんぬ
    ぴきたんぬ デザインちーむ
  • このエントリーをはてなブックマークに追加
Photoshopの立体表現!「べベルとエンボス」をマスターせよ!

どうもこんにちは、最近ブルーライトに負けているぴきたんぬです(視力的な意味で)。
早いものでもう入社から半年経とうとしています…!

そして、Photoshopを使うようになって1年半くらい経ちましたが、未だによくわからない機能が多かったりします。
そんなこんなで今回は、二次元なのにレイヤーを立体的に見せることができるPhotoshopのレイヤースタイル「ベベルとエンボス」について本気出して考えてみました。
今回はベベルとエンボス効果の中でも、特にわかりにくい4点に絞って説明します!

ベベルとエンボスとは

聞きなれない人も多いであろう「ベベルとエンボス」…。
Adobeのページでは、ベベルとエンボスについてこう説明されています。

ハイライトとシャドウの様々な組み合わせをレイヤーに追加します。
Photoshop | レイヤー効果とレイヤースタイル

( ˘⊖˘).。oO(シンプルな説明すぎて、分からない…)

カタカナだし英語だろう!というわけで、困ったときの英和辞典です。

  • bevel:斜角、傾斜、斜面
  • emboss:~を浮き彫りにする

ベベルは斜めに浮かびあげる(額縁のイメージ)、
エンボスは下からぷっくりと浮きだたせるといったイメージです。
※エンボスは画像検索すると分かりやすいです!

あなたもベベルとエンボスが使われたデザインを目にしたことがあるはず!
ベベルとエンボス見本
このぷっくりしたものも、シュピーンとしているものも、メタリックっぽいものも、ベベルとエンボスで作られているのです!
ベベルとエンボスがあるからより立体的に見える!ベベルとエンボスがなければ、なんだかもの寂しくなってしまいます…。

スタイルについて

では、立体的な表現がしてみたい!よし、ベベルとエンボスを使ってみよう!ハイライトとシャドウを使って、どんな風に立体的に見せよう?
それは、スタイルで設定できます。
ベベルとエンボススタイル一覧(上方向)
では、それぞれのスタイルの違いはなんでしょうか。AbobeのPhotoshopヘルプページを簡単にまとめてみました。

スタイルの名称 内容
ベベル(内側) レイヤーの縁の内側に、面で押し上げたようなベベルが作成される
ベベル(外側) レイヤーの縁の外側に、面で押し上げたようなベベルが作成される
エンボス レイヤーの下に、レイヤー全体を浮き彫りにした効果がつけられる
ピローエンボス レイヤーのを、レイヤーの下にスタンプした効果がつけられる
エンボスの境界線を描く レイヤーに境界線を付けた場合、境界線だけに浮き彫りの効果がつけられる

ポイントは各エンボス効果の違いです。画像と説明文を見ながらなんとな~く違いを感じてみてください。
このスタイルの名称がややこしいのが、ベベルとエンボスの難しいところだと個人的には思っています(笑)

テクニックについて

次は「テクニック」という項目について説明します。
テクニックで質感の差をつけましょう!
ベベルとエンボス-テクニック-

テクニックの名称 内容
滑らかに 側面の凹凸が滑らかで丸みを帯びる
シゼルハード 側面の凹凸は鋭く傾斜する
シゼルソフト 側面に粗く削ったような跡が残る

シゼル(chisel)は彫刻刀、彫るという意味です。
シゼルハード/ソフトはカッチリとした質感を出したい時に使うとgoodですね。

角度と高度

光源の位置を設定するのが「角度と高度」です。
ベベルとエンボスとは、「ハイライト」と「シャドウ」。つまり光と影で立体表現をしているので、その光源の位置も大切ですね。

では、角度と高度って何がどう違うのか?検証です(`・ω・´)

角度

ベベルとエンボスの陰影に関する角度の項目について
今回、上の図では、ベベル(外側)のスタイルで、黄色を「ハイライト」色にしています。
高度を0°にして、角度だけ変更してみました。すると、シャドウが一切表示されずに、ハイライトの位置が「角度」の数値によって動いているのがわかると思います。
つまり、ベベルとエンボスの「角度」とは光源の位置、と言えます。
ちなみに、数値の範囲は-180°~180°です。0°~360°ではないので、要注意です!

高度

ベベルとエンボスの陰影に関する高度の項目について
光源の位置が決まれば、高度を調整して、影をどんな風に配置するか決めましょう。
数値が小さいほど、シャドウがはっきりとしていますね。
高度の数値を最大(90°)に近づけるほど、ハイライトの割合が減っていきます。

光沢輪郭

ハイライトとシャドウの分布設定ができるのが「光沢輪郭」です。
光沢輪郭は、下図のようにグラフの線を調整してハイライトとシャドウをどんな風に配置するか決めるわけです。
ベベルとエンボスの光沢輪郭について
この(正直見方がよく分からない)グラフについて覚えておくべきことは2つです。

  • グラフのハイライトが最も明るくなる領域
  • グラフのシャドウが最も暗くなる領域

これを踏まえた上で色々と光沢輪郭エディターでグラフの点を動かしてみると、思いもよらなかったデザインを見つけることができるかもしれません!
れっつ自作の光沢輪郭!

参考サイト様

自学も兼ねたブログ執筆だったため、色々なサイトや記事にお世話になりました。どちらも参考になるものばかりですので、みなさんもぜひご一読を。

MdN Design Interactive「Photoshopの上級者でさえ
なぜか曖昧な5つの基本機能 -ベベルとエンボスによる立体表現を熟知する
ベベルとエンボスの内容と仕組みを必要最小限、簡潔に説明している記事です。まずはこの記事から概要を把握すると、ベベルとエンボスもとっつきやすくなります!
envato tuts+「The Comprehensive Guide to Bevel and Emboss
ベベルとエンボスの全ての設定項目の効果を分かりやすい比較図を用いながら説明している記事です。とりあえずベベルとエンボスで「この項目ってどういう効果になるの?」と困ったら見るべし!(英語)
eserrano.com「Drawing a Photoshop gloss contour: add gloss effects to the design
光沢輪郭のグラフの見方について、図付きで簡単に説明してくれています。これが知りたかったー!と思わず心の中で叫んだシンプルなチュートリアル記事です。(英語)
CO-JIN「Photoshop用無料のレイヤースタイル1000+で作業時間を大幅短縮
多くのフリーのレイヤースタイルを紹介しているブログ記事です。実際にダウンロードしてみると「他のデザイナーさんはこのデザインをこうやって作っているんだなあ…」と参考になります。

いかがでしたでしょうか。少しでもみなさんのお役に立てたならば幸いです。
それでは、よき「ベベルとエンボス」ライフを!

このエントリーをはてなブックマークに追加

ぴきたんぬが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ