私はフォトショップが好きです。webデザインも、バナー作成、ドットワーク、イラストワークもほとんどフォトショップです。

ですがこいつは人気者なので永遠の片想いが続いています。まあ一つのツールにばかりは構ってられないわけですが、せっかくですのでこのブログでときどきこいつのことを探っていきたいと思っています。

レイヤースタイルについてです

今回はこれについてちょっと考えてみました。

凄く便利な機能です。パターン等とも併用でき、一度しっかり作っておけばボタンや文字等のエレメントにつけた装飾がいくらでも再利用できます。フィルタといい、マスクといい、出会ったときの衝撃はそのままに、フォトショップはいつまでもドキドキさせてくれるヤツですね。

レイヤースタイルの構成

一応レイヤースタイルの各項目について軽く説明しましょう(別に知ってるよと言う人は次の節まで読み飛ばしてください)。

ドロップシャドウ

そのレイヤーに描かれてあるもの(以下「オブジェクト」と呼びます)に影をつけます。描画モードが「乗算」で、少し半透明(75％)で、位置は右下にちょっとオフセットしてます。いかにも影っぽいです。

シャドウ(内側)

内側にかかるシャドウ。主にオブジェクトの形に凹んでいる(穴があいているような)表現の時に使います。描画モードや角度、不透明度はドロップシャドウと同じ乗算の75％です。

光彩(外側)

外側にぼんやり輝くような光彩をつけます。ちょっと黄みがかってるのは光らしさでしょうが、よく邪魔になるので白にしてますｗ 同じく不透明度は75％なのですが、描画モードがスクリーンです。

光彩(内側)

内側にかかる光彩。外側の光彩と合わせてオブジェクトをぼんやりさせたり逆光ぽい光を表現できますね。外側と同じく描画モードがスクリーン、不透明度75％。

ベベルとエンボス

物を立体的に見せる陰影をこれのみで調節できます。実際はパラメータを弄らないと如何にも「Photoshopで作りました」的なエフェクトになります(これに限りませんが)。

輪郭

ベベルとエンボスの従的な項目。ベベルとエンボスでかけたエフェクトの輪郭を調節する機能の様ですが…あまりこれがあってよかった、という経験がありませんｗ こういうのも使いこなしてこそとは思うのですが…どなたかこういう局面で役に立つ！とかあったらご教授ください。

テクスチャ

これもベベルとエンボスの従的な項目。ベベルとエンボスは基本的にオブジェクトの輪郭に沿ってしか陰影がつけられませんが、テクスチャを使うとその濃い色をへこみ、明るい色を出っ張りとして、陰影をつけてくれます。鱗のような細かい凹凸を出したいときに使えますね。

サテン

サテンのようなテカテカした質感を出せます。僕ではわからないような計算の下に表現されているので未だ雰囲気でしか使ってません…。描画モードは乗算、不透明度は50％です。

カラーオーバーレイ

色をべたっと被せます。直接オブジェクトに色を乗せるのとどう使い分けるのかと思ったこともあります…。ここで色を決めると後で編集しやすい、不透明度を 下げて色を被せる、スタイルをコピー(や保存)して他に使い回せる等の利点があります。不透明度100％、描画モードは通常ですね。

グラデーションオーバーレイ

グラデーションをカラーのようにべたっと被せます。ベベルとエンボスやシャドウ、ドロップシャドウは立体感を表現するため不自然にならないよう角度が統一 されていますが、グラデーションは質感や単純に表面の色を表現するため、角度は独立しています。不透明度は100％、描画モードは通常です。

パターンオーバーレイ

上記二つのようにパターンを被せます。これもあくまで表面の平面的な模様を表現しています。テクスチャと違い色もあります。描画モード通常、不透明度100％です。

境界線

輪郭に縁取りをつけます。オブジェクトの外側、内側、中央に付けられますが、同時に両方、3つにつけたり、重複してかけることはできません。描画モード通常、不透明度100％です。

レイヤースタイルは「光と立体的な形」「色」を表している

このように様々な表現を可能にしてくれるレイヤースタイルですが、ではこの項目の並びには何か意味があるのでしょうか。上記で不透明度と描画モードをピックアップして紹介しましたが、これについてはカラーオーバーレイ以下は全て「不透明度は100％」、「描画モードは通常」であることに気付くかと思います。

実はレイヤースタイルは、前半部分はオブジェクトを物体とした場合の光の当たり方や反射、後半はオブジェクトを平面であっても変わりのない色をそれぞれ表現しているのです。境界線は特にどちらでもないのかも知れないですが、強いて言うなら立体に境界線というものは存在しないため、平面的なものになるかとは思います。

もちろんグラデーションオーバーレイで輝くパーツ(金属の円筒や文字等)を表現したりすることもありますが、その場合「グラデーションオーバーレイ」でつけた立体感は「ベベルとエンボス」に影響しません。大きめのパーツを作るときは気にした方がいいかもしれませんね。

レイヤースタイルの重なり順

そして色と言うのは元々その物体が持っている表面の色なので(厳密に言うと違うのですがここでは説明を省きます。色と色覚 – 色 – Wikipediaを参照してください)素地としてレイヤースタイルの重なり順の下に来るようになっています。「カラーオーバーレイ」「グラデーションオーバーレイ」「パターンオーバーレイ」等がそうです。

その上の「サテン」と「ベベルとエンボス」は更にオブジェクトの立体的な質感を表現します。これも(オブジェクトが物体だとして)それ自体が持つ要素ですね。

そしてさらにその上の4つ、ドロップシャドウ、シャドウ(内側)、光彩(外側)、光彩(内側)は物体が発している光や物体が落とす影を表現しています。一番あとから表現されるべき要素だから、重なり順の上に来ている(上乗せされている)わけですね。

この辺りを理解していると、より効果的にレイヤースタイルによる表現を使いこなせるのではないかと思います。

webデザインにおけるレイヤースタイルの活用

webデザインにおいてレイヤースタイルが重宝するのは特に

• ボタン
• 文字
• 飾り枠
• etc.

の表現になると思います。現在CSS3の新しいプロパティによってこういったパーツの表現はCSSで可能になってきています。ですので特にweb制作においては、この用途に関しての需要は後々下がってくるのかも知れません。まだまだ普通に使われている技術ではありますが…。もちろんパーツではなく普通のアートワークにもなくてはならないものです。

それに「画像を使う」という容量等の問題を除けばこの「スタイル」を駆使することによるパーツの制作スピード、クオリティはＣＳＳに譲ることなど未だありません。どんな環境でも同じように表示できることも強みですね。

レイヤースタイルの重なり順を応用して変わった表現をしよう

さてこの「レイヤースタイルの重なり順」が(個人的に)役に立つと思える部分を説明します。

まずレイヤースタイルの上の４つ、

• ドロップシャドウ
• シャドウ(内側)
• 光彩(外側)
• 光彩(内側)
• 境界線

これらは初期値や項目等細かい違いはあれど、同じような値を設定することでほぼ同じ表現をすることが出来ます。

二つの「シャドウ」は色を明るく、描画モードをスクリーンにし、距離を0にするとほぼ光彩と同じになります。

そして二つの光彩は同じように色を暗く、描画モードを乗算にすればシャドウのような効果が得られます(ただしオフセットは出来ません)。

更に内側二つは「チョーク」、外側二つは「スプレッド」(ともに色の拡散の密度を示しています)を100％にすることで、ほぼ「境界線」のような効果が得られます。

これによって例えば、最大5重の輪郭線をオブジェクトにつけることが出来ます(図を参照)。

…まあさすがにそこまで重ねることはないにしてもｗ 2重の線等は手軽に出来ますね。ただ見てもわかる通り、スタイルはピクセルを元に作成されている為、特に曲線や斜めの線を含むと粗くなります。更に、外側に拡がったスタイルは角が丸くなってしまいます。その辺りに気をつけて使えば、オブジェクトの表現を幅広く出来るのではないかと思います。

ついでに他の項目を含めたスタイルの重なり順を図に示しておきます(図を参照)。どの層がどの項目を表わしているかは見た感じで分かると思います。

どうでしょうか。今まで何となく使っていたレイヤースタイルはこんな仕組みになっていたと、理解できたでしょうか。これを踏まえた上でしっかり作られたスタイルを適用したオブジェクトを見てみると、それがどういう風に作られているのかわかってくるのではないかと思います。

…とはいえ、レイヤースタイルは使いやすい機能なので、厳密には知らなくても感覚で普通に使えている方も多いと思いますがねｗ

参考としてレイヤースタイルに関するエントリーを貼っておきますので活用してみてください。

Photoshop Vip ? 保存版！Photoshop用無料レイヤースタイル750個+まとめ

有名サイトのボタンデザイン21個をPhotoshopのレイヤースタイルファイルにしてみました | DesignWalker