【Photoshop】レトロな液晶ゲームのドット絵にできるエフェクトPSDの使い方と作例

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

Photoshop（フォトショップ）でゲームボーイの様なレトロな液晶ゲーム風にできるエフェクトPSDの使い方と作例をフォトショ初心者の方に詳しく解説します。

写真、イラスト、文字など、様々な素材を1分でリアルなレトロゲームのドット絵にできます。

これからPhotoshopを始められる方、より高品質なクリエイティブを短時間で実現されたい方必見ですよ。

この記事の目次

何が作れるの？

上記の様なグラフィックがフォトショップ初心者の方でも1分で作成できます。
ゲームボーイの様なレトロな液晶ゲームのドット絵表現が作成できるPSDエフェクト素材ですよ。

拡大した際の質感です。液晶の微妙なボケ感などが忠実に再現されたエフェクトです。非常に高解像度なエフェクトなのでレトロゲーム系コンテンツ等に最適な素材ですよ。

LCDエフェクトの使い方

Photoshopで使えるレトロLCDエフェクトPSDの使い方を解説します。
フォトショスキルゼロでもプロが作成したエフェクトが再現できるチート素材ですよ。

Photoshopを導入しましょう

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

STEP.1

レトロ液晶のエフェクトをダウンロード

[ LCD Screen Photo Effect Mockup ] をダウンロードします。
お好みで [ LCD Screen Text & Logo Effect Mockup ] を活用するのもアリですよ。

ライセンスを取得すると商用利用可能なPSDTがダウンロードされます。

STEP.2

PSDTをPhotoshopで開く

ダウンロードされたPSDTをフォトショップで開くと左図の画面が表示されます。

横幅4500px、高さ3000px、解像度300pixel/inchの高解像度なエフェクトモックアップ素材です。

STEP.3

レイヤーパネルを確認

レトロゲームの液晶画面エフェクトのレイヤーを確認してみましょう。

[ Edit Content ] と書かれたスマートオブジェクトレイヤーがあるのでレイヤーサムネールをダブルクリックしましょう。

すると [ Edit content.psb ] という名称のPSBファイルが別タブで開きます。お好きなアイコンやイラスト、テキスト等を配置しましょう。

アイコンやテキストとの相性が良いエフェクトです。サンプルは [ All type of emojis in one big set ] のアイコンを配置しました。5,000種類以上の絵文字を収録したベクター素材ですよ。

白黒素材の配置がオススメ

事前に白黒にしておくとエフェクトの2値化調整の必要が無くなります。ベクター素材の場合はIllustratorで事前に白黒にしておくといい感じに仕上がりますよ。

STEP.4

完成

元のレトロ液晶エフェクトを参照すると素材が差し替わっている事が確認できます。

[ LCD Screen Photo Effect Mockup ] を使えばPhotoshop初心者の方でもプロのエフェクト加工がたった１分で実現可能！

OMAKE

イラストでも可能

もちろんイラスト素材に適用する事もできます。
サンプルは [ A set of cute anime girls illustrations ] を活用した例です。（もちろん商用利用可能です。）色の濃さで2階調化する個所が大幅に変わります。

まるでゲームボーイのドット絵の様な味のある雰囲気が簡単に再現可能ですよ。

レイヤーパネル内の [ Threshold ] から2階調化が調整できます。スライダーを動かす事で2階調化するしきい値を変更でき、お好みの絵作りが簡単にできます。

PNG、JPEG等への書き出し方法

【Photoshop】PSDをJPEGやPNG・GIF形式で書き出す方法forフォトショ初心者

モックアップPSDで作成したグラフィックをJPEGやPNG等の形式で書き出す方法を詳しく解説しています。併せてチェックされてみませんか？

高品質なレトロゲーム系エフェクトPSD

商用利用可能で高品質なレトロゲーム風エフェクトが作れるモックアップPSDを厳選しました。
下記PSDの編集にはPhotoshopが必須、事前にAdobe公式サイトから入手しておきましょう。

#01 Football Stadium LED Screen Effect Mockup

フットボールスタジアムの電光掲示板のような質感が再現できるエフェクトPSD素材です。拡大すると光の三原色であるRGBが見える非常に細かい作りのエフェクトです。

ダウンロードする

#02 Pixelated Photo Effect

まるでマトリックスに登場する電脳世界の様な表現ができるフォトエフェクト素材です。PSD内のスマートオブジェクトを差し替えるだけでサンプルの様なグラフィックが作成できるチート素材ですよ。

ダウンロードする

#03 Led Dots Photo Effect

写真や文字、イラストなどをLEDを模したドット状にできるフォトエフェクトのモックアップ素材です。長辺が5000pxもあるので大型の印刷物にも耐えられる高品質＆高画質な素材ですよ。

ダウンロードする

#04 LCD Screen Text & Logo Effect Mockup

ゲームボーイや昔の液晶ゲームのような質感が再現できるテキストエフェクト素材です。PSD形式なので編集も簡単！ロゴ制作やイラスト・写真の加工に最適ですよ。

ダウンロードする

#05 Retro Glitch Photo Effect Mockup

高度なグリッチエフェクトが1分で作れるフォトエフェクトのPSD素材です。もちろん全て商用利用可能！Webやバナーのメインビジュアル、チラシなどの印刷物のグラフィックなど、様々な用途に活用できる汎用素材です。

ダウンロードする

様々なエフェクト素材

【Photoshop】写真を全く違うグラフィックに変える高品質なエフェクト50選【商用可】

写真やイラスト、文字やアイコン等を全く別物に質感に大変身させられるエフェクトPSD素材です。併せてチェックされてみませんか？

おわりに

以上、Photoshop（フォトショップ）で使えるゲームボーイやレトロ液晶ゲームのドット絵が作れるフォトエフェクトの使い方と作例でした。
今回使用したPSDモックアップは [ A set of cute anime girls illustrations ] です。

バナーデザインやWebサイトやチラシなどのメインビジュアル、そしてロゴデザイン等に最適！
もちろん商用利用可能な素材なので安心して活用できます。

エフェクトを適用する際に要する時間はたったの1分！
Photoshop初心者の方でもプロによる表現ができるチートアイテムを活用し、更にクリエイティブを加速させてください！

ではまた！