【Photoshop】走査線の作り方を徹底解説forフォトショ初心者

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

Photoshop（フォトショップ）でブラウン管テレビに表示される走査線を作る方法を解説します。
ファミコン時代の赤色がにじんだブラウン管テレビの映りをフォトショ初心者の方にも再現できるよう、走査線の作り方を詳しく解説します。
1980年代を感じさせるレトロな雰囲気を表現する手法の一つですよ。

Webデザイン、各種印刷物のビジュアル作成、UIデザインのあしらい等に活用できます。

この記事の目次

何が作れるの？

Photoshop（フォトショップ）でブラウン管テレビに映る走査線の作り方を解説します。
また走査線の作り方と併せて、ブラウン管テレビ風のレタッチテクニックも解説。
難しくないので是非試してみて下さい！

走査線の作り方

走査線の作り方を2種類解説します。
フォトショ初心者の方にも再現できるよう、詳しく解説いたします！

ところでPhotoshopは導入されていますか？
まだの方は事前にAdobe公式サイトから入手しておきましょう。

ハーフトーンパターンを使った方法

一つ目はフィルターギャラリーのハーフトーンパターンを使った方法です。
Photoshopで走査線のみ作るのであれば一番お手軽な方法です。

STEP.1

画像を準備する

加工したい画像素材を準備します。

素材にこだわりたい方はAdobeStockが最強！3億点以上の商用利用可能で高品質な素材が制作を加速させてくれますよ。
詳しくはコチラで解説しています。

新規レイヤーを追加し、[ 塗りつぶしツール ] を使って白色で塗りつぶしておきましょう。

なお、レイヤー上を右クリックし、[ スマートオブジェクトに変換 ] しておくと後から設定値を編集可能な状態にできます。

STEP.2

描画色・背景色を初期設定にする

[ D ] を押して初期設定の描画色を黒、背景色を白に戻しておきましょう。

[ フィルター ] → [ フィルターギャラリー ] をクリックします。

[ スケッチ ] → [ ハーフトーンパターン ] をクリックしましょう。

サイズ：1（画像サイズに合わせて要調整）
コントラスト：10
パターンタイプ：線

最後に右上の [ OK ] をクリック。

FINISH

完成

レイヤーパネルの設定を変更しましょう。

描画モード：オーバーレイ
不透明度：25%

するとPhotoshopで簡単に走査線のような表現ができます。
単に走査線を追加するだけなら一番お手軽な方法です。

グリッチエフェクトの作り方

Photoshopでグリッチエフェクトの作り方を詳しく解説しています。ワンランク上の走査線表現をフォトショ初心者の方にも再現可能できるよう徹底解説！
詳しくはコチラの記事をご覧ください。

パターンを定義して作成する方法

二つ目は走査線のパターンを定義し、パターンオーバーレイで作る方法です。
より汎用性の高い作り方ができるのでハーフトーンパターンよりオススメの方法ですよ。

STEP.1

パターン用のドキュメントを作成

Photoshopを未導入の方はAdobe公式サイトから入手しておきましょう。

新規ドキュメントを作成します。

幅：100px
高さ：400px
解像度：72px/inch

STEP.2

パターン素材を作る

[ 長方形ツール ] を選択します。
※ショートカットは [ U ]ツールモードは [ シェイプ ] を選択。
塗りの色は黒、線は無しにしておきましょう。

画面をクリックし、[ 長方形を作成 ] のダイアログ画面を開きます。

幅：100px
高さ：100px

正方形を作成し、キャンバスの上部にキッチリ合わせます。

STEP.3

パターンを定義する

[ 編集 ] → [ パターンを定義 ] → [ パターン名を入力してOK ]パターン定義はコチラの記事で詳しく解説しています。
パターン登録後は画面を閉じてOKです。

STEP.4

パターンを適用する

走査線を追加したい画像をPhotoshopに読み込みます。

素材にこだわりたい方はAdobeStockが最強！3億点以上の商用利用可能で高品質な素材が制作を加速させてくれますよ。
詳しくはコチラで解説しています。

新規レイヤーを作成し、白で塗りつぶします。
その後、レイヤーパネル右上の [ 塗り ] を0%に変更。

レイヤーパネル下部の [ レイヤースタイルを追加 ] → [ パターンオーバーレイ ] を適用します。

パターンオーバーレイのダイアログ画面が開きます。

描画モード：ビビッドライト
不透明度：15%
パターン：先ほど登録した走査線パターン
角度：0°
比率：4%（画像サイズに合わせて要調整）

最後に [ OK ] をクリック。

FINISH

完成

以上でPhotoshopのパターンオーバーレイを使った走査線が完成しました。

パターンを登録しておくと大きさや角度などを細かく調整できます。
汎用性が高い方法なのでオススメですよ。

調整を加えてレトロ感を出す

走査線を追加しただけでは当時のブラウン管テレビの質感にはなりません。
少し調整を加え、よりリアルな走査線表現をしてみましょう。
下記メイキングはパターンを定義して走査線を作成する手法の続きです。

STEP.1

チャンネルを分解

写真素材のレイヤーを [ Ctrl + J ] (Mac：Command + J) でコピーし、計3つの写真レイヤーを作成。

レイヤーパネル下部の [ レイヤースタイルを追加 ] → [ レイヤー効果 ] をクリック。チャンネルのチェックマークを各レイヤーごとにR・G・Bのみ表示します。（詳しくはコチラの記事）

※スマートオブジェクトに変換しておくと後の編集が楽です。

STEP.2

赤の滲みを作る

Rチャンネルのレイヤーのみ、少し移動させて赤がはみ出た絵にします。

ついでに [ フィルター ] → [ ぼかし ] → [ ぼかし(ガウス) ] を追加し、赤の滲みを表現します。

STEP.3

色味を調整

レイヤーパネル下部から [ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ 色相・彩度 ] を追加します。

マスターの彩度：-50

レッド系の彩度：+70

FINISH

完成

以上でPhotoshopを使った色補正の完成です。
昔のブラウン管テレビ特有の強めの赤色が滲んだような表現ができました。

ブラウン管テレビにはめ込む方法

[ 編集 ] → [ 変形 ] → [ 多方向に伸縮 ] を使えば簡単に斜めから撮影した画面にはめ込むことができます。
コチラの記事でパースのあるオブジェクトにはめ込む方法を解説していますよ。

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選！
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign（インデザイン）を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽！
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ！
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ！
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか？そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材

上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています！

ポートフォリオ用の高品質なテンプレート42選【InDesign,Illustrator,Photoshop】

【InDesign】ポートフォリオ用のテンプレートを編集する方法forインデザ初心者

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）で走査線を作成する方法についてでした。

フォトショ初心者の方にも簡単に懐かしのブラウン管テレビの映りが再現できます。
走査線を追加した後は赤みを強めてにじませるレタッチを加えるのがポイントですよ。

ぜひ1980年代を再現してデザインに活かしてください。

ではまた！