【photoshop】レイヤースタイルの基礎、使い方

スポンサーリンク




レイヤースタイルに関して

レイヤーに対して手軽に様々な表現が可能になる必須テクニックです。
私は本業がUIデザイナーですが、これがないと仕事にならない!っていうくらいに大事な機能となってます。

まずは、この機能を使うメリットデメリットを説明させていただきます。

■レイヤースタイルを使うメリット・デメリット

メリット

・効果が後で変更ができる
デザインを進めていくうちに、最初の方に作った素材の色や表現などが合わなくなったりする事は良くあります。レイヤースタイルで作った表現であれば微調整がすぐに出来ます!便利!

・再現性がある
レイヤースタイルは、他のレイヤーに対してコピー&ペーストをすることができます。なので、同じ質感・表現の素材で統一したい!という希望を叶えるのにとても適しています。

デメリット

・複雑な表現は難しい
これはゲームUIなどやってると良く感じることですが、前後に奥行があるようなパーツなどを作っている時などは、パーツがレイヤーの複数階層に跨ることがあります。このような場合はレイヤースタイルでの表現は難易度が高いです。

■レイヤースタイルの基本的な使い方

レイヤースタイルの使い方に関して、説明していきます。レイヤースタイルは、その名前の通りにレイヤーに対して適用していくものになります。基本的ない使い方です。

レイヤースタイルの適用

まずはレイヤースタイルの適用です。適用したいレイヤーを選択します。
レイヤーパネル下部のボタンから「レイヤースタイルを追加」ボタンをクリックして適用したい効果を選択します。

すると、レイヤースタイルの設定画面になりますのでこちらから各種設定を行い、OKをすることで確定させます。

レイヤースタイルの削除

レイヤースタイルを削除したい時の操作です。もっとも簡単なのがレイヤーの右側にあるfxをドラッグしてレイヤーパネル下部のゴミ箱アイコンに捨てることです。
またレイヤーを右クリックして表示されるメニューから「レイヤースタイルを消去」を選ぶことでも可能です。

レイヤースタイルのコピー

レイヤースタイルのコピーはレイヤーに適用してあるfxの部分をAltを押しながらドラッグして目的のレイヤーにドロップすることでコピーすることが出来ます。
またレイヤーを右クリックしたメニューから、スタイルをコピーしてペーストを行うこともできます。

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

①ベベルとエンボス

ハイライトとシャドウを用いて、立体感を表現します。

スタイルやテクニック、角度、高度などを用いることで多様な表現ができます。
また、ハイライトやシャドウで色のコントロールを行う事ができます。

ベベルで、シゼルハードのスタイルを使って文字を加工しました。このスタイルを使うことで立体的な文字が作れます。

②境界線

レイヤーの描画領域と透明領域の境界にラインを引きます。
文字の装飾で必須なスタイルです。

境界線は外側、内側、中央と選択でき、複数の線を重ねて適用できます。(CC2015以降)
重ねて使用することで幅のある表現ができます。

境界線を3つ適用しました。文字の輪郭が強く印象的なものになりました。

③シャドウ(内側)

描画領域の内側に影を落とす事ができ、窪みを表現することができます。

基本的な構造のパラメーターを弄ってこのような表現が出来ます。

サンプルでは左上から文字の内側にシャドウを落としてグレーの背景よりも凹んだ文字に仕上げました。

④光彩(内側)

描画領域の内側に柔かいぼかしの色を反映することができます。

内側のエッジを光らせたり文字の中央に色を入れたりと使いどころは多いです。

サンプルでは、基本的なエッジに対して明るい色を乗せてます。

⑤サテン

レイヤーに対して光沢を加えるスタイルになります。

青い文字のベースに黒い色を合わせています。私はあまり使わないのですが、感覚としてグラデーションオーバーレイに近い使い方です。

⑥カラーオーバーレイ

レイヤーの中身を単色のカラーで塗りつぶします。

文字の色を上から変更したり、グラデーションレイヤーと合わせて使ったりします。

サンプルでは、ベベルで作ってあった黄色い文字に対してカラーオーバーレイを乗せて、質感はそのままに色を変更しています。こういった他のスタイルとの組み合わせで力を発揮するスタイルとなります。

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

レイヤーの中身をグラデーションカラーで塗りつぶしを行います。

ツールのグラデーションと同様な機能をレイヤーの領域内に対して行います。グラデーションが上手く反映されない時は「整列の初期化」を行いましょう。また、比率のパラメーターも見てみましょう。(比率は100%が基本です)

サンプルは上から明るい色で少し濃い目のオレンジになるグラデーションを適用したものになります。

⑧パターンオーバーレイ

レイヤーの中身にパターンを適用します。

模様は自分で追加したりすることが、出来るのでこのスタイルで表現できることの幅は広いです。

サンプルではハッキリとした模様のパターンを適用しました。他にも砂のテクスチャや岩など、写真のテクスチャ素材を使ってリアルに仕上げたりすることもできますので色々と試してみてください。

⑨光彩(外側)

描画領域の外側に柔かいぼかしの色表現を行うことができます。

サンプルでは普通に打った白い文字の外側に黒で影を落とすようにしています。文字と背景に空間が出来ました。

⑩ドロップシャドウ

描画領域に応じた影を落とすことが出来ます。立体感や空間の表現に良く使うスタイルとなります。

こちらのサンプルも光彩(外側)と同様に白い文字に適用しています。左上からの光源で右下に影が落ちる設定になっています。文字の視認性を上げたりするときなどよく使われます。

■スタイルの組み合わせサンプル

各スタイルごとにサンプルを乗せてきましたが、最後に複数のスタイルを組み合わせたサンプルを用意させていただきました。

これはベベル、境界線、光彩内側、グラデーションオーバーレイ、ドロップシャドウを組み合わせて作ってあります。

今回はこれで終了です。この記事が皆様の参考になれば幸いです。

スポンサーリンク







コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です