Photoshopを使って、スーパーファミコン風に写真を加工する方法

ドット絵でもないけど、高解像度でもない、なつかしのスーパーファミコン風

今回はPhotoshopを使って、写真をスーパーファミコン風にする方法をお話しします。

フリーゲームを作る時、写真をスーパーファミコン風にすることがよくあります。
というのも、クオリティの高い写真やイラストを使おうとすると、お金がかかったり、時間がかかったりするので、「なんちゃってドット絵」でお茶を濁すわけです。

ただ、このやり方を毎度忘れては、都度思い出すという生産性の悪さなので、ここにメモ書きを残しておきます。

何をスーパーファミコン風と感じるのか？

今回の目的は、写真をこちら↑のようなスーパーファミコン版「かまいたちの夜」や「学校であった怖い話」のような雰囲気に仕上げることです。
これらの写真を見ると、「あ、スーパーファミコンだな」と（昭和から平成一桁生まれなら）感じると思うのですが、それは何故なのでしょうか？

その要因は、以下の２点に求められるでしょう。

1. 画像解像度
2. 色数

つまり、画像解像度を落とし、色数を少なくすれば、スーパーファミコンっぽく見えるはずです。

どの程度画像解像度を落とすか？

スーパーファミコンの画面解像度は256px x 224pxのようです^[1]2D Pixel Perfect：レトロな 16 ビットゲームの制作に向けた Unity プロジェクトのセットアップ方法 | Unity Blog。

つまり、この画面解像度に加工したい写真の解像度を近づければ、スーパーファミコンっぽくなります。

もしよくわからなければ、画像解像度を1/4～1/6くらいにすれば、だいたいそれっぽくなると思います。

ニアレストネイバー法で拡大する

Photoshopを使わなくても、画像解像度を小さくすることはできます。そして、この小さくなった画像を再度大きくすれば、スーパーファミコン風の画質を再現することができます。
しかし問題は、小さい画像を再度大きくする方法です。

Photoshopの初期設定のままだと、自動で足らない色の粒を補完してしまいます。簡単に言うと、せっかくスーパーファミコン風の画像を作ったのに、ドット絵感が無くなり、単にボケたような画像になってしまいます。

そのため、Photoshopで拡大する時に再サンプルの方法を「ニアレストネイバー法（ハードな輪郭）」にします。
この設定をすると、Photoshopは色を補完せず、ドット絵風の画像のまま、写真を拡大してくれます。

色数を減らす

画像解像度を落としただけでも、スーパーファミコンっぽい写真になりますが、色数が多く、違和感があります。

スーパーファミコンに限らず、昔のテレビゲームは使える色の数に制限がありました。
スーパーファミコンは32768色中256色を使用できたようです^[2]スーパーファミコンの色数は２５６色でいいのですか？もっと色数があった… – Yahoo!知恵袋。

そのため、加工する写真の色数も、多くて256色、感覚的に50色前後がよいでしょう。

Photoshopではイメージ > モード > インデックスカラーで色数を変更できます。「カラー」の欄の数値を色々と変更し、画像を見ながら調整していくとよいでしょう。

まとめ