題字：美咲ゴシック（画像に入れるのをわすれた）

これは題字の元画像（拡大前）です　文字以外は手打ち

0.最初に買ってもらったのはゲームボーイカラー

……とポケモン緑だったので、実はゲームボーイ（初代）で遊んだことがないというのは一旦さておき

今回は「ちゃんとしたかいせつは そのうちかきます」と言いつつ1年半経過していたのを思い出したこれをやります。

https://fm7743.hatenadiary.com/entry/20180208/1518101486

どちらかというと「それっぽく加工する」的な手法です。
なので厳密な意味でのドット絵……ドット絵かこれ？？？と自分でも思っているので警察の皆様におかれましては見逃していただけると幸い

1.用意するもの（パターン）

Photoshopで「2px×2px」の新規キャンパスを作成

小さすぎて見えないので拡大して

鉛筆ツールに持ち替え！描画色は黒！左上と右下にポチっとな！（見たまんまなので説明が雑）

すべて選択(ctrl+A Macなら ⌘+A)して、メニューの編集＞パターンを定義

なにかわかりやすい名前をつけて登録しておきます。

パターンとして登録されたらこのキャンパスは保存せずに閉じてしまってもいいです。

2.用意するもの（グラデーション）

こういうグラデーションを用意します。

「4色のストライプが25%ずつ切り替わる」構造になっています。色の内訳は以下の通り……

薄い順に#ccdc5f/#91a633/#606520/#2c3706になっていますが、あくまでも目安なのでお好みで調整してください。なんかイメ検してスポイトで拾った記憶がうっすらある

グラデーションの切り変わりがいきなり変化する・グラデーションにならない設定にするにはカラーストップ（色のついた■）を2つ重ねます。少しコツがあるのですが、左側（今回は濃い色）の数値を先に入力するとうまくいく気がする……

グラデーションが完成したらプリセットの中に登録しておきましょう。

3.加工編

画像ファイルを開いて、その上に「調整レイヤー」や「塗りつぶしレイヤー」を作っていきます。

「新規調整レイヤー＞トーンカーブ」
写真加工では毎度お世話になるトーンカーブ
とりあえず今は作るだけ作ってカーブの設定はノータッチです。

「新規塗りつぶしレイヤー＞パターン」
1.で作ったタイルパターンを設定します
比率は100%。「OK」を押して確定したのちにレイヤーモードを「オーバーレイ」不透明度を「50%」にします。

「新規調整レイヤー＞グラデーションマップ」
2で作ったグラデーションを設定します。他の設定は基本的にいじりません。

できあがったらレイヤーを以下のように並べ替えます。

・グラデーションマップ
・パターン
・トーンカーブ
・元画像

（パターンレイヤーの設定を変える前に撮ってしまったので不透明度が100%のままになっていた）

設定がうまくいっているとこのようになります。ゲームボーイ風

もしも濃淡やグラデーションの出方がイマイチな時は「トーンカーブ」を調整するとうまくいくかもしれません。

たとえばこのように。

Tips:「トーンカーブ」「パターン」「グラデーションマップ」を作成・「パターン」の不透明度とレイヤーモードを変更するところまでをアクションに登録しておくことで次回以降ボタン一つで加工できるようになります。やっておきましょう。

作例

風景写真の空のようになめらかなグラデーションだった場所がタイルパターンによるグラデーション表現になります。

キリスト看板のようなコントラストのはっきりした画像はこのように

イラスト（といっても背景は実写ですが）の加工にもちょうどいいですね

4.応用

「パターン」を使用しないとタイルパターンの階調表現がなくなるので一味違った雰囲気に

「グラデーションマップ」を「ポスタリゼーション」に変更するとカラーになります。階調は最低の「2」にするとよい

まとめ

・タイルパターン用パターンを作ってオーバーレイで乗せる
・グラデーションマップで着色
・実写背景をカラーのドット絵風に加工するとノベルゲーっぽい気がする

リンク

本文中で使用したフォント：x8y12pxTheStrongGamer

ふといたてかくを　もった、ストロングな　レトロゲームふう　フォントです。

レトロゲームのメッセージ表示っぽさが出るフォント。記号類の雰囲気がキュートでおきにいりです。

本文中では使用していませんがこのようなフリーソフトがあるのでご紹介：ふぁみこんぶ

画像を減色してファミコン風に加工するソフトです。ゲームボーイ風のカラーパレットもある。

関連するかもしれない記事