【Photoshop】昔のブラウン管モニタの表現ができるフォトエフェクトPSD

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

Adobe Photoshop（フォトショップ）で昔のブラウン管モニタ（CRTモニタ）に映った映像のような表現ができるフォトエフェクトPSDの使い方と作例を解説します。

短時間で高品質なWebサイトやSNS、チラシやポスターなどのメインビジュアルを作成されたい方にオススメのコンテンツですよ。

この記事の目次

何が作れるの？

上記の様にレトロな雰囲気のブラウン管表現が短時間で作成できます。Web媒体やバナー素材、ポスター・チラシをはじめとした印刷媒体など、様々なメディアで使える汎用素材です。

ブラウン管エフェクトPSDの使い方

それではブラウン管風フォトエフェクトを使ったビジュアル作成を解説します。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。（7日間の無料体験が可能、終了後は自動課金となるため、継続しない場合は期間内に解約してください。）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

ブラウン管エフェクトの編集方法

STEP.1

ブラウン管エフェクトをダウンロード

ブラウン管エフェクトのPSDT素材をダウンロードします。サンプルは [ CRT Monitor Effect ] です。ハイクオリティなレトロ風ブラウン管表現が短時間で再現できます。

STEP.2

Photoshopで開く

ダウンロードしたブラウン管フォトエフェクトのPSDT素材をダブルクリックするとPhotoshopで左図のような画面が開きます。古いブラウン管の筐体が映っていますね。

STEP.3

画像を変更

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

４色の映像エフェクトが収録されています。中にある [ YOUR IMAGE HERE ] のスマートオブジェクトのレイヤーサムネールをダブルクリックしましょう。

別タブで [ YOUR IMAGE HERE.psb ] が開きます。お好きな画像を配置しましょう。サンプルはコチラの画像を使用しました。

最後に [ Ctrl + S ] (Mac：⌘ + S)で上書き保存しましょう。

FINISH

編集が完了

ブラウン管エフェクトのPSDタブをクリックすると画像が差し変わっています。以上でレトロなブラウン管風の表現が完成しました。

[ CRT Monitor Effect ] を使えば古いブラウン管モニタに映った映像のようなリアルな表現が短時間で実現します。様々なグラフィックのメインビジュアルとして活用できますよ。

他のカラーを使ったCRTモニターの作例です。ブルー系、グリーン系、グレー系、イエロー系の４色が収録されていますよ。

OMAKE

濃さを変えるには？

レイヤーパネル内の [ 高度なレイヤー効果 ] をダブルクリックし、レイヤースタイルの画面を表示します。

現在のレイヤー内のスライダーを動かして濃さを調整しましょう。

濃さを変更する事で印象がかなり変わりますね。お好みの調整を加えてください。

ブラウン管エフェクトを書き出す

STEP.1

書き出しを選択

[ ファイル ] → [ 書き出し ] → [ 書き出し形式 ] をクリックします。

※ショートカットは [ Alt + Shift + Ctrl + W ]
(Mac：Option + Shift + ⌘ + W)

STEP.2

書き出し設定＆書き出し

書き出し形式のダイアログ画面が開きます。左メニューに書き出し対象の画像一覧、右メニューに書き出し設定が表示されています。
サンプルは全画像をJPG形式で書き出します。

設定後は右下の [ 書き出し ] をクリック。

STEP.3

書き出しの完了

以上でCRTモニタ風フォトエフェクトをJPG形式で書き出す事ができました。[ CRT Monitor Effect ] は画像を差し替えるだけで非常に高度なブラウン管風表現ができるフォトエフェクト素材です。
フォトショップ初心者の方にも簡単に扱えるのでオススメですよ。

ドット絵エフェクトを併用した例

STEP.1

ドット絵エフェクトをダウンロード

ブラウン管とは別にドット絵風エフェクトのPSDT素材をダウンロードします。サンプルは [ Pixel Arcade Effect Mockup ] です。

STEP.2

画像の差し替え

ダウンロードしたドット絵エフェクトのPSDT素材をダブルクリックするとPhotoshopで左図のような画面が開きます。レイヤーパネル内にある [ Edit Content ] のレイヤーサムネールをダブルクリックし、別タブで開いたPSBの内容を変更しましょう。

元のPSDタブを参照すると画像が差し変わっています。あとは先の手順で解説したやり方で画像を書き出しましょう。

FINISH

編集が完了

ブラウン管風フォトエフェクトの [ CRT Monitor Effect ] に書き出した画像を適用すると左図の様な表現ができます。古いブラウン管モニタにドット絵のイラストをはめ込むと、より雰囲気のあるグラフィックが作成できますよ。

ブラウン管エフェクト素材

その他の高品質なブラウン管をモチーフにしたエフェクトPSD素材を厳選しました。
印刷物やWeb媒体をはじめとした各種キービジュアルやメインビジュアルにも使えますよ。

#01 Old Television Photo Effect Mockup

ザラザラとしたノイズが混じった古いテレビの雰囲気が再現できるエフェクトモックアップです。長辺が4500pxもある高解像度素材なので大型印刷にもオススメですよ。

ダウンロードする

#02 CRT Monitor Effect with Generative AI

走査線特有の表現が非常にリアルなエフェクトモックアップPSD素材です。ブラウン管モニタの周囲が緩やかなカーブがかっている感じがいいですね。

ダウンロードする

#03 Vintage TV Photo Effect Mockup With Generative AI

背景を切り抜いた人物などを配置するだけで80年代アメリカのヴィンテージなテレビ番組のような表現が再現できるフォトエフェクト素材です。背景素材付なのが非常に親切です。

ダウンロードする

#04 VHS Tape Photo Effect Mockup

古くて劣化したVHSテープの見た目が再現できるエフェクトPSD素材です。色ずれや走査線、録画表記など、当時のビデオ機器で撮影した雰囲気が見事に再現されています。

ダウンロードする

#05 Retro CRT Monitor Screen Photo Effect Mockup

レトロ系CRTモニタが再現できるフォトエフェクトPSD素材です。マトリックスの電脳世界みたいな表現がカッコいいですね。

ダウンロードする

#06 Hidden Camera Photo Effect Mockup

昔の監視カメラ映像のような質感が再現できるエフェクトPSD素材です。色や走査線だけでなく、モニタ周囲のレンズの歪みも見事に再現されていますよ。

ダウンロードする

#07 Glitch VHS Photo Effect Mockup With Generative AI

古いVHSテープの映像が再現できるPSD形式のフォトエフェクト素材です。Photoshopでスマートオブジェクトの中身を変更するだけでサンプルのような表現が再現できるチートアイテムですよ。

ダウンロードする

#08 Old TV Text And Logo Effect Mockup

画面上部の表示が故障している古いブラウン管テレビの映像質感が再現できるフォトエフェクト素材です。そのまま使っても良いですし、Photoshopで簡単に設定を変更できる便利なPSD素材です。

ダウンロードする

その他ブラウン管系エフェクト

【Photoshop】レトロなブラウン管テレビが再現できるフォトエフェクト素材20選

コチラの記事で様々なブラウン管の表現ができるエフェクトPSDを紹介しています。併せてチェックされてみませんか？

おわりに

以上、Photoshop（フォトショップ）でレトロなブラン管モニタに映った映像が表現ができるフォトエフェクトの使い方についてでした。昭和時代の古いCRTモニタに映ったような表現をゼロから作るのは非常に難易度が高いですが、[ CRT Monitor Effect ] を使えば高品質かつ短時間で実現可能です。使い方もスマートオブジェクトの中身を差し替えるだけなので、フォトショ初心者の方にも簡単に行えます。

ポスターやチラシ、バナーなど、様々なコンテンツのメインビジュアルとして活用できます。
ぜひ日々のクリエイティブを加速させて為にも有効活用をしてみて下さい。

ではまた！

テキストエフェクトの作り方まとめ

Photoshopでテキストエフェクトをゼロから自作する方法、そして1分で超高品質で商用利用可能なテキストエフェクトが作れるPSD素材の使い方と作例を解説しています。
ロゴデザイン、Webデザイン、バナーデザイン、各種DTPデザイン、UIデザイン、ポートフォリオ制作等。幅広いクリエイティブに活用できる内容です。