Photoshopで透明もベタ塗りも表現できるオーバーレイとは?どうやって使うの?

Photoshopで透明もベタ塗りも表現できるオーバーレイとは?どうやって使うの?


「オーバーレイ」という機能をご存知ですか?
オーバーレイ(overlay)は元々「重ね合わせる」の意味の単語ですが、
Photoshopで画像の合成を行うときの必須機能ともいえる「レイヤー」の
加工になくてはなりません。そんな「オーバーレイ」を使ってできる
レイヤー加工の仕方をご紹介します。

レイヤースタイルのオーバーレイ

「オーバーレイ」は「重ね合わせる」という単語の意味するとおり、アクティブ
レイヤーに色やパターン、グラデーションを重ねることが出来ます。
このレイヤースタイルのオーバーレイの便利さはレイヤー内のオブジェクト
のみを塗りつぶせることです。
また、重ね合わせる色やパターンは透明部分は透過させることが出来ますし、
重ねる側のグラデーションやパターンに透明部分があればそのまま重ねられた
側のレイヤーを透過できます。
完全に透明な部分だけではなく、不透明度も調整可能ですのでフィルターを
掛けたように色やパターンの下からレイヤーを透けさせることも出来ます。
また描画モードで重なり方も選ぶことが出来ます。

カラーオーバーレイ

レイヤー内のオブジェクトを単色で塗りつぶすことが出来ます。

[使い方手順]
1:メニューバーの[レイヤー]→[レイヤースタイル]→[カラーオーバーレイ] をクリックします。
2:[レイヤースタイル]ダイアログのカラーオーバーレイ項目が起動します。
3:色、不透明度、描画モードを調整し[OK]をクリックします。

レイヤースタイルのカラーオーバーレイ

[使用例]

単色の塗りつぶしでも、描画モードや不透明度を変えると多様なアレンジが
可能です。また色を重ねたレイヤー同士を重ねるとさらにアレンジの幅が
広がります。

カラーオーバーレイでのレイヤー加工例

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

レイヤー内のオブジェクトをグラデーションで塗りつぶすことが出来ます。

[使い方手順]
1:メニューバーの[レイヤー]→[レイヤースタイル]→[グラデーション
オーバーレイ]をクリックします。
2:[レイヤースタイル]ダイアログのグラデーションオーバーレイ項目が
起動します。
3:グラデーションの内容(色)、不透明度、スタイル(形状)、角度、
比率を調整し[OK]をクリックします。

レイヤースタイルのカラーオーバーレイ

[使用例]
フォントやシェイプはレイヤーとして作成されますので、レイヤースタイルを
適用できます。ボタンやバナーなどのWebパーツのアレンジにも役立ちます。

グラデーションオーバーレイ使用例

パターンオーバーレイ

レイヤー内のオブジェクトをパターンで塗りつぶすことが出来ます。

[使い方手順]

1:メニューバーの[レイヤー]→[レイヤースタイル]→[パターンオーバーレイ] をクリックします。
2:[レイヤースタイル]ダイアログのパターンオーバーレイ項目が起動します。
3:塗りつぶしたいパターン、不透明度、描画モード、比率を調整し[OK]を
クリックします。

レイヤースタイルのパターンオーバーレイ

[パターンの増やし方]

パターンで塗りつぶす場面では使う用途やデザインによって用いたい色柄は
その都度違いますよね。
Photoshopに初期設定に入っているものでは事足りないときは、パターン素材
などを自分のPhotoshopにパターンとして定義すれば、塗りつぶしパターンと
して使用できます。

[手順]
1:パターン素材をPhotoshopで開きます。
(自分で作成したシームレスパターン等も同様の手順です)
2:[編集]→[パターンを定義]をクリックします。
3:[パターン名]ダイアログで名前を入力し[OK]をクリックします。
(名前を変えない場合、名前はファイル名になります)

パターンを定義

描画モードのオーバーレイ

レイヤースタイルでのオーバーレイは1層のレイヤーの内容を塗りつぶして
いましたが、描画モードの「オーバーレイ」はレイヤー同士の重ね合わせ方と
して、「乗算」と「スクリーン」の機能を合わせ持っています。
「乗算」は色に色を乗せていくので合成された色は元より暗くなり、
「スクリーン」は反転色を乗算するので色は元より明るくなる、この効果を
組み合わせています。この特色を使って、面白い表現が出来ます。

同じ写真を重ねて色鮮やかに

暗いところはより暗く、明るいところはより明るくなりますので
コントラストと彩度を上げたような効果が得られます。

下図は写真のレイヤーを複製して全く同じ写真を2枚重ねた状況にしています。
オーバーレイで重ねるとくっきり鮮やかになりました。

描画モードのオーバーレイ

フィルターのように使う

黒はそのまま黒く、白はそのまま白を保つことが出来るので、モノクロの
イラストや写真と重ねるとモノクロのコントラストを保ちながら色や
パターン、グラデーションのフィルターを掛けたような表現が出来ます。

オーバーレイでフィルター効果

最後に

オーバーレイは描画モードでレイヤー同士を重ねる際も、レイヤースタイルで
1層のレイヤーに色やパターンを重ねる際も手順はとても簡単です。
その分、何を、どのように重ね、どんな風に用いるかで使い方も効果も広がり
ます。ぜひ、いろいろ試してみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article無料なのにハイレベルなPSD素材がダウンロードできるサイト25選