【Photoshop】文字の形で差し込む斜光エフェクトが作れるPSDの使い方と作例

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）で文字の形で画像内に斜光エフェクトが差し込む表現が作れるフォトエフェクトPSDの使い方と作例を解説します。
制作に必要な時間はたったの1分！
あっという間にプロのレタッチが再現できる超便利なPSD素材です。

フォトショップで高度な光の表現をされたい方必見ですよ。

この記事の目次

何ができるの？

上記の様に好きな文字の形で斜光エフェクトが加わった表現が1分で作成できます。バナーやクリエイティブのメインビジュアルに使える印象的な絵が作成可能！
Photoshopのスキルが無くても画像を差し替えるだけで超簡単ですよ！

斜光エフェクトPSDの使い方

それではPhotoshopで文字の形で差し込む斜光エフェクトが追加できるPSDの使い方を解説します。
フォトショ初心者の方にも簡単に使いこなせますよ。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。（7日間の無料体験が可能）
11/14～11/28までアドビブラックフライデー価格で50%オフ！
アドビブラックフライデーセール2025の価格や利用条件・裏技はコチラの記事で解説しています。

Light Window Effectの使い方

STEP.1

PSDTをダウンロード

[ Light Window Effect ] をダウンロードします。商用利用可能なPSDTがダウンロードできますよ。

STEP.2

PSDTを開く

ダウンロードしたPSDTをPhotoshopで開くと左図の画面が開きます。単色の背景にサンプルテキストが添えられたシンプルな画面です。

STEP.3

変更個所を確認

レイヤーパネルを開きます。
※レイヤー非表示の場合は [ F7 ] で表示可。

当エフェクトで変更する個所は [ REPLACE ME IMAGE ] と [ REPLACE ME TEXT ] の二カ所です。変更したいスマートオブジェクトレイヤーのレイヤーサムネールをダブルクリックしましょう。

テキストを編集した場合は [ REPLACE ME.psb ] が別タブで開きます。初期設定は「YOUR IMAGE HERE」の白背景が入っているのでお好きな画像に変更しましょう。

同様に文字も差し替えましょう。

設定後は [ Ctrl + S ] (Mac：⌘ + S) で上書き保存。

FINISH

エフェクトPSDを参照

以上で画像と文字が差し替えられました。

[ Light Window Effect ] を使えば文字の形の斜光が差し込む表現が1分で作成できます。ゼロベースで作成するとPhotoshopのスキルと作成時間が必要ですが、当PSDを使えば誰でもサンプルの様なグラフィックがあっという間に作成可能ですよ。

画像を差し替えるとまた違った雰囲気にできます。

マスクを使って表現を変えてみる

STEP.1

PSDTをダウンロード

[ Light Window Effect ] でグラフィックを作成します。差し替え画像は明るめの写真にしました。

STEP.2

文字の形で選択範囲を作成

[ Ctrl ] を押しながら [ copy ] のレイヤーサムネールをクリックします。すると文字の形で選択範囲が作成されます。

[ Shift ] と [ Ctrl ] を押しながら [ NIGHT copy 3 ] のレイヤーサムネールをクリックすると更に選択範囲が追加されます。

STEP.3

マスクを作成

[ REPLACE ME IMAGE ] をアクティブにし、[ レイヤーマスク ] をクリックしましょう。すると背景イメージが文字の形状でマスクされます。

FINISH

べた塗りを追加して完成

レイヤー最下部に黒色の [ べた塗り ] を追加したら左図の様なグラフィックが完成です。

その他の光に関するエフェクトPSD

その他の高品質な光表現ができる素材です。全て商用利用可能なPSDですよ！

#01 Simple Light Window Effect

当記事で解説したPSDの表現に近い斜光エフェクトが付与できる素材です。先のエフェクトよりシャキッとした光の表現をされたい方にオススメです。

ダウンロードする

#02 Cinematic Cinema Movie Text Logo Style Effect

立体的な文字の後ろから光が当てられて後光のような表現ができるテキストエフェクト素材です。映画のロゴデザインのような表現が1分で可能ですよ。

ダウンロードする

#03 Neon Light Effect

ネオン風の文字の下にネオンの光が反射した様子が作れるテキストエフェクト素材です。ふんわりとした環境光の表現が非常にリアルですね。

ダウンロードする

#04 Cinematic Shadow Text Effect Mockup

上部からゴッドレイの様なグリーンの光が差し込む表現ができるシネマティックなテキストエフェクト素材です。スマートオブジェクト内を差し替えるだけなので超簡単ですよ。

ダウンロードする

#05 Silk Glow Photo Effect Mockup

シルクの様に柔らかなグロー表現が付与できるフォトエフェクト素材です。優しい幽霊の様な雰囲気を出したい時に最適ですよ。

ダウンロードする

#06 Epic Light Burst Text Effect Mockup

文字の後ろで輝く光が差し込む後光表現ができるテキストエフェクトのモックアップPSD素材です。映画のタイトルみたいな雰囲気が出せますよ。

ダウンロードする

#07 Neon Light Effect

白く光るネオンライトの下に反射光が付与できるエフェクトPSDです。柔らかで揺らめく光の表現が簡単にできるチート素材です。

ダウンロードする

#08 Deep Space Sun Flare Text Effect

深い宇宙の中で太陽フレアに照らされたような表現ができるテキストエフェクト素材です。上品な細めの書体が似合いそうなイメージですね。

ダウンロードする

#09 Futuristic Light Glitch Effect

虹色のプリズム風の質感が付与できるオーバーレイテクスチャのPSD素材です。ザラっとしたノイジーなテクスチャがレトロ感を誘いますよ。

ダウンロードする

#10 Rainbow Light Leak Photo Effect Mockup

虹色のレンズフレアが付与できるオーバーレイ素材です。コレ一つ追加するだけで大幅に印象的なグラフィックに改造できます。

ダウンロードする

おわりに

以上、Photoshop（フォトショップ）で使える文字の形で差し込む斜光エフェクトが作れるPSDの使い方と作例についてでした。今回使用した素材は [ Light Window Effect ] です。

スマートオブジェクト内の素材を差し替えるだけで高品質な斜光エフェクトが作れるチートアイテムですよ。Webサイトやバナー、チラシやポスターなどの印刷物など、様々な媒体のメインビジュアルがフォトショ初心者の方にも超短時間で作れるので是非ご活用下さい。

ではまた！