コラムColumn

【Photoshop初心者必見】5分で分かるレイヤースタイルの使い方

レイヤースタイル

 

こんにちは!臨月で骨盤が広がって足腰が弱ってる「のへ」です!!
歩いても痛い、寝ても起きたらめっちゃ痛い、座ってるのが一番楽なのでもう動きたくありません。
今回はPhotoshopの「レイヤースタイル(レイヤー効果)」について使い方をまとめてみました。私自身、Photoshopを使い始めた頃「これどういう時にどうやって使うん?」と躓いたところでもあります。

ではでは早速やっていきましょう~。

 

レイヤースタイルとは

Photoshop では、シャドウ、光彩、ベベルなどの様々な効果を使用して、レイヤーの内容の外観をすばやく変更できます。レイヤー効果は、レイヤーの内容にリンクされています。レイヤーの内容を移動または編集すると、変更された内容にも同じ効果が適用されます。例えば、テキストレイヤーにドロップシャドウを適用した後、新しいテキストを追加した場合、新しいテキストにも自動的にシャドウが追加されます。

(引用:https://helpx.adobe.com/jp/photoshop/using/layer-effects-styles.html
要するに、手軽に立体感や模様を付け加えられる便利な機能ってことですね!やったー!!

では早速、レイヤースタイルの各機能について説明していきたいと思います。

まず、例としてお花の形のシェイプを作ってみました。こちらにレイヤースタイルを追加していきます。

レイヤースタイルは、「ウィンドウ」→「レイヤー」でレイヤーウィンドウを表示させて(もしくはF7を押して)、レイヤーウィンドウ下部にあるボタンを押して選択しましょう。

 

150917_02

 

これでいつでもレイヤースタイルが使えちゃいます!

では上から順に試してみましょう~。

 

 

レイヤースタイルの各機能

べベルとエンボス

 

とりあえず「べベルとエンボス」にチェックを入れるとこんな感じになります。

150917_03

メタリックな感じの効果があるんですね~。さらに、このメタリック感の「深さ」も調節できちゃいます!

「ハイライトのモード」で光の当たっている部分を、「シャドウのモード」で影になる部分の深さ(面積?)を変えることができます。

 

150917_04

 

こんな感じに色を変えると、金属っぽいですよね。エンブレム的な!

 

 

 

境界線

 

こちらはレイヤースタイルの中でも分かりやすくて使いやすい機能のひとつですね。

こんな感じに、一定の太さの線が縁取られます。

150917_05

 

 

色も不透明度も変えられますし、グラデーションやパターンの境界線もつけられちゃいます!

ポップな感じにしたいときにはフォントなどにも多用しています。

 

シャドウ(内側)

 

内側に立体感をつけられるので、凹みがあるように見えますね。

150917_06

 

 

光彩(内側)

内側に向かって光を当てたいときなどに使用できます。

150917_07

 

 

上の画像だと境界線が表示されててちょっとわかりづらいので、一旦ウィンドウを閉じてみます。

150917_08

こんな感じになります。

「光彩」という機能ですが、色を白系統ではなく黒系統に変更すると影のようにもなるので色を変更してみると面白いです!

 

サテン

 

サテンといったら、赤いドレスのイメージがあるのは私だけでしょうか。

前職で濃い赤色のドレスやスカートを作るために、よくサテン生地を使用していました。サテンといったら淡い色より濃くて暗い色だと、より高級感が出て素敵に見える気がするのです。

 

なので、ちょっと色を変えてみます。明るいピンクから、暗めの濃いピンク色へ。

150917_09

 

シェイプの形に沿って、サテン生地のような影がつきました!立体感がありますね。

150917_10

 

 

カラーオーバーレイ

現状の色の上に、色を重ねてしまう機能です。

色の指定をこのカラーオーバーレイでしておけば、複数のレイヤーの色をまとめて変更したいときに便利です!

レイヤースタイルはコピー&ペーストが出来るので、レイヤーひとつひとつの色を修正せずに済んじゃいます。

(レイヤースタイルのコピー&ペーストは、レイヤーウィンドウ上を右クリックした際に項目が出てきます。)

(altを押しながらレイヤースタイルの名前をドラッグしてもコピペできちゃいます)

 

150917_11

 

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

こちらも現状の色の上に、色を重ねてしまう機能です。ただし、こっちは単色ではなく、グラデーションですね。

描画モードが「通常」で不透明度が100%だと、元々のピンク色が見えなくなってしまいます。

 

150917_12

 

そこで、描画モードを「通常」から「乗算」にして、不透明度を下げてあげると、元のピンク色を保ちつつ、グラデーションの色を上からかけることが出来ます!

描画モードを色々調整してみると、より手の込んだレイヤースタイルになりますね。描画モードについてはもうちょっと下のほうで解説していきます。

 

150917_13

 

 

 

こちらの描画モードは「焼き込みカラー」にしてみました。

白黒のグラデーションが上から乗るのではなく、シェイプの元の色のコントラストが調整できます。

150917_14

 

 

 

描画モードを色々調整してみると、より手の込んだレイヤースタイルになりますね。描画モードについてはもうちょっと下のほうで解説していきます。

 

パターンオーバーレイ

カラー、グラデーションと続いて、「パターンオーバーレイ」です。

150917_15

 

カラー、グラデーションと続いて、「パターンオーバーレイ」です。

模様をレイヤーに重ねることができます。描画モードを活用すると、パターンの色を変えることもできちゃいます!

 

 

光彩(外側)

 

「光彩(内側)」があるなら「光彩(外側)」だってあるのです。

 

150917_16

 

 

あっ 背景が白色で薄い黄色の光彩だとすごく分かりづらいですね…

背景を黒くしましょう。

 

150917_24

 

こんな感じでフチが光っているように見えます。

 

逆に、黒系統の色を使えば影のようにすることも。

150917_17

 

 

 

ドロップシャドウ

 

私が一番よく使う機能でもあり、使いすぎてデザイン全体の色調が暗くなりがちになる原因でもあります…。

150917_18

 

これくらいうっすらしているシャドウだと、デザインに馴染みやすいですね。

150917_19

 

 

上記のレイヤースタイルを活用してみると、こんな感じのものも作れちゃいます。

150917_20

 

こちらは健康食品のランディングページのデザインの一部です。

「食べるコラーゲン習慣」のテキストにレイヤースタイルをがっつりつけました。コラーゲンのぷるぷる・ツヤツヤ感を表現出来ているでしょうか?

複数のレイヤースタイルを使いこなすことでこのような質感も作りだすことができます。

 

 

 

 

 

描画モードとは

描画モードを指定することによって、ペイントツールまたは編集ツールでの操作を画像内のピクセルにどのように合成するかを調節します。(引用:https://helpx.adobe.com/jp/photoshop/using/blending-modes.html)

「合成方法」と言われるとイメージしづらいですが、とりあえずやってみましょう!

今回は私がよく使う描画モードを3つご紹介します。

 

乗算

「乗算」では、元のレイヤーの色に指定した色を重ねたようになります。

150917_25

「通常」で不透明度を下げるより、元のレイヤーの色(ここではピンク色)を保つことができます。

 

 

ディザ合成

「ディザ合成」をするとじゃりじゃりした質感になります。

150917_21-1

 

こんな風に、ノイズがかかったような具合です。

 

私は黒板にチョークで描いたようなデザインのときに使っています。

「画用紙にクレヨンで描いたようなデザイン」のときでもいけますね。

150917_21

 

 

パターンオーバーレイの描画モード

 

白色の花のシェイプの上に、パターンオーバーレイでドット模様を乗せてみました。

150917_22

 

 

こちらの描画モードを「オーバーレイ」 にしてみます。

 

 

じゃん!ピンク系統なドット柄になりました!!

150917_23

 

「オーバーレイ」「ソフトライト」「ハードライト」「ビビッドライト」「リニアライト」「ピンライト」「ハードミックス」の描画モードを使うと、パターンの色を変更することができます。

「パターン使いたいけど、この色じゃない色がいいんだよなぁ…」というときに、簡単に違う色に変えられちゃいます!

 

 

 

まとめ

いかがでしたでしょうか。レイヤースタイルを使いこなすことで、より一層かっこいいデザインが作れちゃいます!

 

「自分で作るのって難しそう…」って思っても大丈夫!レイヤースタイルを配布しているサイトがいっぱいあるのです。

例えばこちら。

クリックひとつで完成するPhotoshopレイヤースタイル30個まとめ - PhotoshopVIP

 

クリックひとつで完成するPhotoshopレイヤースタイル30個まとめ – PhotoshopVIP

http://photoshopvip.net/archives/23365

 

登録しちゃえばすぐに活用できるレイヤースタイルがたくさんそろっています!私はボタンのデザインをよく参考にさせてもらってます。

使い慣れないうちは、配布されているレイヤースタイルを片っ端から使わせてもらうのも手ですね。

 

レイヤースタイルをマスターして、素敵なデザインライフを!

 

 

ところで話は変わりますが、今回冒頭で述べたように臨月真っ最中の私です。

今回のブログを最後に、産休&育休に入ります!来年の春に復帰予定です!!

初産なのでどうなるやらですが、私はこの仕事が大好きなので必ず復帰します。

 

無事に戻って来られるよう、みんな祈っててくれよな!!!

来年にまたお会いしましょう~٩( ‘ω’ )و

 

Photoshop / WEBデザイン / デザイン / フォトショ

執筆者:nohe

お問い合わせフォーム