こんな方におすすめ！
・ベベルとエンボスではどんなことができるの？
・どんなデザインの時にベベルとエンボスは役に立つ？
・効果的なデザイン作成ができるようになりたい！
・Webデザインに奥行きを出したい
・Photoshopのレイヤースタイルを使いこなしたい
Photoshopのベベル・エンボス効果をマスターしよう！
この記事では、ベベル・エンボスの効果から詳しい使い方について詳しく解説しています。
デザインに立体感と深みを加える方法を知りたい方におすすめの記事です♪
初心者向けの簡単な設定方法からデザイン事例まで紹介していますので、立体的で魅力的なデザインを作りたい方は是非チェックしてみてください！
【Photoshop】ベベル・エンボスってなに？
ベベル・エンボスには立体感、３D感を出してくれる効果があります。
ハイライトとシャドウを使って文字やシェイプを浮き上がらせるようにしたり、深さがあって奥にあるように見えるようにすることもできます！
✓ 金属 のようにみせたり
✓ 氷 のように見せたり
【Photoshop】ベベル・エンボスの効果
Photoshopのベベル・エンボスの効果は、オブジェクトに立体感や浮き彫りのような効果を与えることができる便利な機能です。
エンボス効果：オブジェクトの表面を凹凸のある浮き彫りのような効果にする機能
ベベル効果の特徴
- オブジェクトの端を斜めに削り取ることで立体感を出すことができる
- 光の当たり方によって立体感を変化させることができる
- 柔らかな質感を出すことができる
エンボス効果の特徴
- オブジェクトの表面を凹凸のある浮き彫りのような効果がある
- 金属やレザーなどの質感を表現することができる
- 光の当たり方によって立体感を変化させることができる
こんなデザインをしたい時に使える！
テクスチャを貼り付けることで、金属や石などのリアルな質感を表現することができます。
パターンオーバーレイで個性を出す
パターンオーバーレイをすることで、オブジェクトに個性的な模様を加えることができます。
【Photoshop】ベベル・エンボスの各設定の説明
ベベルとエンボス
スタイル
- ベベル（外側）：斜面を外側につける
- ベベル（内側）：斜面を内側につける
- エンボス：浮き出し、型押しして凹凸をつける
（※内側・外側両方に効果がつきます！） - ピローエンボス：エンボスの反対
（※内側・外側両方に効果がつく） - エンボスの境界線を描く：境界線があるときのみ反映
（この設定だけだと何も効果が反映されませんが、レイヤースタイルの「境界線」にチェックをいれると反映されます！）
テクニック
- 滑らかに：滑らかに仕上がる
- シゼルハード：角ばった感じに仕上がる
- シゼルソフト：滑らかに、丸くなっているところなどは波のようになります
深さ
- 0％～1000％
ハイライトとシャドウの加減を調整できる
方向
- 上へ
- 下へ
※ハイライトとシャドウの向きを変えることができる
サイズ（px）
ベベルとエンボスのサイズ（大きさ）を調整することができる
ソフト（px）
とがった箇所を柔らかく調整をすることができる
角度と高度
光源（太陽）の位置高さ（0～90°）を調整することができる
包括光源を使用：他に使っているベベルとエンボス・シャドウ（内側）・ドロップシャドウと同じ角度になる！
光沢輪郭
ハイライトとシャドウの加減を変えることができる
アンチエイリアス
- ✓をいれる：滑らか
- ✓をいれない：ギザギザ
あまり見えない部分です…！
ハイライトのモード
- 元の色と馴染ませる効果がある
ハイライトは明るいので、「スクリーン」がおすすめ！ - ハイライト（明るい部分）の色を変えることができる
不透明度
透明度を変えることができる
シャドウのモード
- 元の色と馴染ませる効果がある
シャドウは暗いので、「比較（暗）」「乗算」などがおすすめ！ - シャドウ（暗い部分）の色を変えることができる
不透明度
透明度を変えることができる
ベベルとエンボス内のサブセクション「輪郭」と「テクスチャ」
輪郭
周りの輪郭部分だけ輪郭加減を変えることができる
アンチエイリアス
- ✓をいれる：滑らか
- ✓をいれない：ギザギザ
あまり見えない部分です…！
範囲
- ←：輪郭の部分が内側に向かっていく
- →：輪郭の部分が外側に向かっていく
テクスチャ
パターンの選択をすることができる
比率（％）
パターンの比率を調整することができる
深さ
光沢に合わせた深さを調整することができる
階調を反転
白黒反転をすることができる
レイヤーにリンク
✓を入れると：レイヤーを動かしたときにパターンも一緒に動かすことができる
【Photoshop】ベベル・エンボスを使ったデザイン事例！
立体感のあるゴールド文字
ベベルとエンボスを活用した再現方法！
ゴールド文字作成の手順
①テキストを入力！
「カラーコード：ffcc00」でテキストを入力します。
②「ベベルとエンボス」で立体感を演出
- スタイル：ベベル（内側）
- テクニック：シゼルハード
- 深さ：100％
- 方向：上へ
- サイズ：20px
- ソフト：0px
- 角度：133°
- 包括光源を使用：✓を入れる
- 高度：0°
- ハイライトモード：スクリーン
- 不透明度：100％
- シャドウのモード：通常
- 不透明度：50％
③「ドロップシャドウ」で影を調整！
- 描画モード：乗算
- 不透明度：22％
- 角度：90°
- 包括光源を使用：✓を入れる
- 距離：5px
- スプレッド：0％
- サイズ：5px
- ノイズ：0％
透明のガラスのような文字
ベベルとエンボスを活用した再現方法！
透明のガラスのような文字を作成する手順
①テキストを入力！
白（#ffffff）でテキストを入力し、塗りの透明度を50％にする。
②「ベベルとエンボス」で立体感を演出
- スタイル：ベベル（内側）
- テクニック：滑らかに
- 深さ：70％
- 方向：上へ
- サイズ：60px
- ソフト：0px
- 角度：133°
- 包括光源を使用：✓を入れる
- 高度：0°
- ハイライトのモード：スクリーン
- 不透明度：100％
- シャドウのモード：通常
- 不透明度：25％
「輪郭」で輪郭加減を調整
- アンチエイリアス：✓を入れる
- 範囲：50％
③「境界線」で周りの線を調整！
- サイズ：2px
- 位置：外側
- 描画モード：通常
- 不透明度：100％
- 塗りつぶしタイプ：グラデーション
- スタイル：シェイプバースト
- 角度：0°
- スケール：100％
- 方法：知覚的
石に掘ったような文字
ベベルとエンボスを活用した再現方法！
透明のガラスのような文字を作成する手順
①石の画像を用意
②テキストを入力！
黒（#000000）で文字を入力し、塗りを10％にする
③「ベベルとエンボス」で立体感を演出
- スタイル：ベベル（外側）
- テクニック：シゼルハード
- 深さ：180％
- 方向：下へ
- サイズ：8px
- ソフト：0px
- 角度：-50°
- 高度：11°
- ハイライトのモード：オーバーレイ
- 不透明度：100％
- シャドウのモード：乗算
- 不透明度：41%