影の設定

基本画面の説明

レイヤースタイルウィンドウを開くと、左側にスタイルメニューが並んでいます。
その中でもとくに利用するスタイル効果は、以下の赤枠で囲ったものです。

上の「ドロップシャドウ」と「シャドウ(内側)」、「光彩(外側)」の3つは影の設定。
下の「カラーオーバーレイ」、「グラデーションオーバーレイ」、「パターンオーバーレイ」の3つは塗り潰し。
一番下の「境界線」がアウトラインと、3つの設定要素に別れていると考えてください。

スタイルを選択するときは、チェックボックスをクリックするのではなく、
テキストの名称部分をクリックしないと、右側の操作画面が切り替らないので注意してください。

ドロップシャドウ

初期値

それでは先ほど描画した200px四方のレイヤーに対して影を設定します。
デフォルトは以下のような数値の状態ですが、主に変更する箇所は、

の3箇所です。初期値では距離が5pxで、サイズが5pxとなっているので
合計でオブジェクトから10px分の影が(120度で右下に)広がっていることに成ります。

距離とサイズの意味がつかめない場合は、(距離0,サイズ5px)または(距離5px,サイズ0)で、
表示の違いを確認してみるとよいでしょう。

このときテキストボックスを移動するときに、マウスでいちいち選択してると右手の移動が面倒になってくるので、
「Tab」または「Shift + Tab」でテキストボックスを移動し、青く選択された状態で数字を上書きしましょう。
※数字を確定させるときに「Enter / Return」を押してしまうと、レイヤースタイル全体が決定され、
ウィンドウが閉じてしまうので、「Tab」キーで別のボックスに移動することで、 入力した数字を決定するようにします。

基本設定

次に、一般的によく表現されているような基準値を設定します。

影の濃さや距離をあまり強調すると、可読性が悪くなり、センスのない表現となってしまいます。(参考バナー
あくまでもさりげない質感を演出する程度の心持ちが大切なので、
出来る限り目立たなく設定するのが、上手く見せるコツとなります。

なので、不透明度を「30%」(ウィンドウズの場合やモニタの明るさによって微調整が必要)、距離を「2px」、サイズはスムーズで滑らかな広がりを見せるため「6px」にしておきます。

他に設定する箇所として120度(左上から光が当たっている意味)を、真上の90度にしたりします。
最近は斜め上からの光よりも、真上から蛍光灯が当たっているイメージのほうが、左右のマージン幅が均等になり、
余計な横幅のスペースをとらずに済むので、90度のほうが多く使用されているかもしれません。(参考サイト:Apple

ちなみに、包括光源の使用のチェックを外すと、このレイヤーだけ影の角度を変更することができます。
もしチェックしてある状態で角度を変更すると、このデータで設定されたレイヤーの全ての影の角度が
一斉に変更されてしまうので注意して下さい。

▲上に戻る

シャドウ(内側)

初期値

使用頻度は少ないですが、滑らかで内側に柔らかい影をつけるときなどに利用します。
まずは、今回の表示をわかりやすく作業するために、前回設定した
左側にメニューにあるドロップシャドウのチェックを外しておき、
そしてシャドウ(内側)を選択します。

主に変更する箇所は、ドロップシャドウと同じです。

基本設定

よく使う例としてはレイアウトのボックスの境界線として、コンテンツを囲む際に利用したりします。(参考サイト:SKYARCH

これもドロップシャドウと同じように、不透明度を「30%」、距離を「2px」、サイズを「6px」としておきます。

他にも違う表現方法としては、不透明度を「10%」、距離を「0」、サイズを「30px」(オブジェクトの大きさにより調整)で、オブジェクト全体の境界に薄く影をつけ、滑らかな柔らかさを表現します。(参考サイト:チカッパレンタルサービスWebDsignClipAppCollection
さらに描画モードを「通常」、色を「白」にすることによって、背景から柔らかい光があたった表現も可能です。
(参考サイト:蓼科東急リゾート右上の宿泊オンライン予約ボタン

▲上に戻る

光彩(外側)

初期値

この設定は、均等に放射する後光を表現するときに使用します。
初期値は描画モードがスクリーンとなっているので、背景が白の場合、
ほとんど輪郭の放射が見えていない状態になっています。

主に変更する箇所は、以下の通りです。

基本設定

また影として使用することもできます。見た目は基本的にドロップシャドウと変わりませんが、角度の設定が出来ないので均等に影を付けるときに使用します。

変更する箇所は、描画モードを「通常」、不透明度を「20%」、色の設定を「黒」、サイズを「6px」

広範囲の柔らかい影を付けるときなどにも使用できます。
(参考サイト:fotologue一光堂のメインコンテンツオクルココロ
変更箇所は、不透明度を柔らかく表現したいので薄く「10%」に、
拡散サイズを「30px」に拡げてあげます。

また、ドロップシャドウの影と合わせて緩急のつけた
深みのある表現も可能です。

柔らかい影のまま、不透明度を少し強目にして「50%」、
色の設定を「白」に置き換えると、本来の光彩としての
後光がさす表現になります。(背景に色が付いていることが前提)

▲上に戻る

<<戻る >>目次に戻る >>次へ