デザインちーむテクニックツールデザインPhotoshopどうもこんにちは、最近ブルーライトに負けているぴきたんぬです(視力的な意味で)。早いものでもう入社から半年経とうとしています...!そして、Photoshopを使うようになって1年半くらい経ちましたが、未だによくわからない機能が多かったりします。そんなこんなで今回は、二次元なのにレイヤーを立体的に見せることができるPhotoshopのレイヤースタイル「ベベルとエンボス」について本気出して考えてみました。参考サイト様ベベルとエンボスとは聞きなれない人も多いであろう「ベベルとエンボス」...。Adobeのページでは、ベベルとエンボスについてこう説明されています。ハイライトとシャドウの様々な組み合わせをレイヤーに追加します。oO(シンプルな説明すぎて、分からない...)カタカナだし英語だろう!というわけで、困ったときの英和辞典です。bevel:斜角、傾斜、斜面emboss:~を浮き彫りにするベベルは斜めに浮かびあげる(額縁のイメージ)、エンボスは下からぷっくりと浮きだたせるといったイメージです。※エンボスは画像検索すると分かりやすいです!あなたもベベルとエンボスが使われたデザインを目にしたことがあるはず!このぷっくりしたものも、シュピーンとしているものも、メタリックっぽいものも、ベベルとエンボスで作られているのです!ベベルとエンボスがあるからより立体的に見える!ベベルとエンボスがなければ、なんだかもの寂しくなってしまいます...。スタイルについてでは、立体的な表現がしてみたい!よし、ベベルとエンボスを使ってみよう!ハイライトとシャドウを使って、どんな風に立体的に見せよう?それは、スタイルで設定できます。それぞれのスタイルの違いはなんでしょうか。AbobeのPhotoshopヘルプページを簡単にまとめてみました。内容ベベル(内側)レイヤーの縁の内側に、面で押し上げたようなベベルが作成されるベベル(外側)レイヤーの縁の外側に、面で押し上げたようなベベルが作成されるエンボスレイヤーの下に、レイヤー全体を浮き彫りにした効果がつけられるピローエンボスレイヤーの縁を、レイヤーの下にスタンプした効果がつけられるエンボスの境界線を描くレイヤーに境界線を付けた場合、境界線だけに浮き彫りの効果がつけられるポイントは各エンボス効果の違いです。画像と説明文を見ながらなんとな~く違いを感じてみてください。このスタイルの名称がややこしいのが、ベベルとエンボスの難しいところだと個人的には思っています(笑)テクニックについて次は「テクニック」という項目について説明します。滑らかに側面の凹凸が滑らかで丸みを帯びるシゼルハード側面の凹凸は鋭く傾斜するシゼルソフト側面に粗く削ったような跡が残るシゼル(chisel)は彫刻刀、彫るという意味です。シゼルハード/ソフトはカッチリとした質感を出したい時に使うとgoodですね。光源の位置を設定するのが「角度と高度」です。ベベルとエンボスとは、「ハイライト」と「シャドウ」。光と影で立体表現をしているので、その光源の位置も大切ですね。今回、上の図では、ベベル(外側)のスタイルで、黄色を「ハイライト」色にしています。高度を0°にして、角度だけ変更してみました。すると、シャドウが一切表示されずに、ハイライトの位置が「角度」の数値によって動いているのがわかると思います。ベベルとエンボスの「角度」とは光源の位置、と言えます。ちなみに、数値の範囲は-180°~180°です。光源の位置が決まれば、高度を調整して、影をどんな風に配置するか決めましょう。数値が小さいほど、シャドウがはっきりとしていますね。高度の数値を最大(90°)に近づけるほど、ハイライトの割合が減っていきます。光沢輪郭ハイライトとシャドウの分布設定ができるのが「光沢輪郭」です。光沢輪郭は、下図のようにグラフの線を調整してハイライトとシャドウをどんな風に配置するか決めるわけです。この(正直見方がよく分からない)グラフについて覚えておくべきことは2つです。自学も兼ねたブログ執筆だったため、色々なサイトや記事にお世話になりました。どちらも参考になるものばかりですので、みなさんもぜひご一読を。-ベベルとエンボスによる立体表現を熟知する」ベベルとエンボスの内容と仕組みを必要最小限、簡潔に説明している記事です。Emboss」ベベルとエンボスの全ての設定項目の効果を分かりやすい比較図を用いながら説明している記事です。光沢輪郭のグラフの見方について、図付きで簡単に説明してくれています。これが知りたかったー!と思わず心の中で叫んだシンプルなチュートリアル記事です。多くのフリーのレイヤースタイルを紹介しているブログ記事です。実際にダウンロードしてみると「他のデザイナーさんはこのデザインをこうやって作っているんだなあ...」と参考になります。いかがでしたでしょうか。みなさんのお役に立てたならば幸いです。適度に非現実的な世界が好きな新人Webデザイナー。うっかりすると、現実逃避している。運動不足だから運動しなくちゃ☆と思い続けて数か月が過ぎました。絶望的に熱しやすく冷めやすい。スマホサイト制作にかかせないbackground-sizeについて5簡単作成!オリジナルのイラストなどのデザインQRコードを作ってみた。2017.02.17調達したサーバーにApacheをインストールする2014.12.01インフラちーむ、ブログ参戦します!!2016.11.18削除フラグっているの?いらないの?2017.01.27重複してるデータを探してみよう!~Linuxコマンド編~2014.12.24USB2.0とUSB3.0の見分け方(色、ケーブル、形などで2015.08.03第二種電気工事士への道【その2】2015.12.07第二種電気工事士への道~衝撃の結末へ~2016.05.24デスクが綺麗な人って...!デスク周りから見る性格が面白い!2014.09.09知らなかった!常識的ビジネスマナーの豆知識2016.06.29インフラ系女子、モニターを修理してみた。ブラジル食材>2016.06.18スマホのカメラモードで現れる「HDR」って何?今さら聞けない2016.06.14興奮してます!~メタボ編~2014.09.02スマホの通話料を安く抑える方法。