表面の色を変更する「カラーオーバーレイ」

ここまでに見てきたレイヤースタイルは活かしつつ、ボタンの色を変えたい場合は「カラーオーバーレイ」の効果が便利です。

「カラーオーバーレイ」設定画面

また、前述の「サテン」の例示画像はモノクロで作成しましたが、「カラーオーバーレイ」で信号で使われている3色に変更してみました。レイヤースタイルはコピー＆ペーストができるので、複数のレイヤーの色を変えたい時は、緑色のレイヤースタイルをコピーしてペーストすると、一度にたくさんの画像に緑のレイヤースタイルを適用できるため非常に便利です。

「カラーオーバーレイ」適用例

表面の色をグラデーションさせる「グラデーションオーバーレイ」

「カラーオーバーレイ」と同じ感覚で、ボタンの表面全体に、グラデーションをつけられるのが、「グラデーションオーバーレイ」です。

「グラデーションオーバーレイ」設定画面

ここでは主に「グラデーション」で色味の変化を、「スタイル」でグラデーションの形状(線形・円形・反射など)を設定します。「角度」と「比率」でグラデーションの向きと変化の滑らかさを設定できます。

また、グラデーションオーバーレイの設定中に、キャンバス上のボタン(レイヤースタイルのついているレイヤー)の表面でマウスカーソルをドラッグすると、グラデーションの位置を調整することができます。

レイヤースタイルを保存する

冒頭でも軽く触れた通り、作成したレイヤースタイルは保存することができます。保存するにはまず「新規スタイル」をクリックし、スタイル名を入力しましょう。

レイヤースタイルの保存

スタイルパネル

こうして保存したスタイルは、「スタイルパネル」からいつでも呼び出せます。Photoshopにもともと内蔵されているスタイルもありますし、WEB上で無料配布しているスタイルも読み込んで使えます。それらの「見た目」と「設定数値」を覚えておけば、思い通りに使いこなせるようになります。

今回は、レイヤースタイルの効果を分かりやすくするため、適用範囲をボタンに限定して紹介しましたが、もちろんそれ以外にも、アイコンやUIパーツ、ロゴタイポといった素材作成時にも役立ちます。

次回は「バナーと背景」を解説!

次回は「バナーや背景」をテーマに、主に写真素材や外部素材(Illustratorのaiデータや3Dデータなど)を読み込んで、バナーや背景画像を作成する際に、役立つ設定やテクニックをご紹介したいと思います。