【画像加工】古のゲーム画面風味 ～イラストをゲームボーイの画面っぽく～
お気づきの人はまだいないかもですが…
音楽ページを改修中です。
なんだか、古の音源をつかった曲に反響をいただくことが圧倒的に多いため…
(ありがとうございます！)
この辺の曲たちを目立たせるようにしてみました。
整理が追い付いていないのですが、まだまだ改修・追加予定です。
その改修の一環で、各曲になるべくユニークなジャケット画像を指定してあげようと思い…
とはいえ、古の音源を使った曲に、現代のバリバリ鮮明CGイラストを使うのも何か違う気がするので…
それっぽく加工してみることにしました。
ステキな変換ツールがあるよ！
手っ取り早く思いつくのが、「ファミコン風画像変換ツール ふぁみこんぶ」を使用させていただくこと。
画像を読み込み、使用する色を選択すると、ファミコンっぽい画像に変換してくれる とてもステキなツールです。くわしい仕様・使い方については配布元で。ちなみに、「ゲームボーイ用」以外の全色を指定する場合は、色パレット上の任意の場所で右クリックすればOKです (全解除はもう一度右クリック)。
D4 GATEWAY
noia.g3.xrea.com
D4U/kokola さまが作成されたソフトウェアなどが公開されているサイトです。
「ふぁみこんぶ」の入手には、「ぱら倉庫」＞「ふぁみこんぶ」とお進みください
自称代表作「sakura night」2015年版 (10年前…！) のイメージイラストも、このとおり：
テンションが上がりますね！！
D4U/kokola さま、ありがとうございます！
ただ…
「変換してみたけれど、もうちょっと調整したい…」という場合も出てくるはず。とはいえ、納得いくまで「画像調整 → ふぁみこんぶ変換」を繰り返していたのでは、時間がかかってしまいます。
というわけで、今回はゲームボーイ画面風に限りますが、次なる手を考えます。
Clip Studio Paint (クリスタ) で加工する
クリスタの各機能を使って、それっぽくしてみます。
まずは比較用に、純粋に「ふぁみこんぶ」でゲームボーイ風に変換。
ドットサイズは2ピクセル (デフォルト、ソフト作者の推奨値)。
一応雰囲気などはわかりますが、感覚としてはちょっとピンボケしてしまったような感じ…？
元画像の明るさ、コントラストあたりを調整すれば、さらに納得のいく出来になる気がします。
まずは下準備
クリスタで、「ゲームボーイ画面風の色セット」を定義します。
一口に「ゲームボーイ画面風の色」といっても、画面の状態、年数、個人の記憶・イメージ…など、いろいろなパターンがあるようです。
初代ゲームボーイの液晶の色を再現する – ゲーム作るくんのサイト
gametsukurukun.com
ゲーム作るくん さまの記事。
個人ゲーム制作者の観点から、「経年劣化した感じ」など、複数パターンのカラーセットを紹介されています。
いろいろ考えた結果、やはり「ふぁみこんぶ」で使われているカラーセットが個人的にしっくり来たので、この4色を使用させていただきます。
クリスタの「グラデーション」ツールで、このような4色パターンを新規作成します。プリセットの「3色ストライプ」などが参考になります。
作成後は名前を付けてロックをしておくと◎。念のため、アンチエイリアスも切っておきます。
| 位置 | 色 |
|---|---|
| 0 | #42520F |
| 25 | #42520F |
| 25 | #738429 |
| 50 | #738429 |
| 50 | #A5AD42 |
| 75 | #A5AD42 |
| 75 | #D6D65A |
| 100 | #D6D65A |
これで色の準備ができました。
いよいよ画像加工！
さっそく元絵に対して
「フィルター」>「効果」>「モザイク」を選択、ブロックサイズを「2.00」にして「OK」で、2pxのドット絵もどきに変換します。
次に、先ほど保存したグラデーションマップを適用します。
「レイヤー」>「新規色調補正レイヤー」>「グラデーションマップ」を選択
一気にそれらしくなりましたが、やはり画像の調整が必要そうな感じです。
そこで、モザイク加工した元絵レイヤーとグラデーションマップのレイヤーの間に「トーンカーブ」調整レイヤーを作成します。
「レイヤー」>「新規色調補正レイヤー」>「トーンカーブ」、プレビューを見ながら調整今回はこんな感じに調整しました。
(これは個人的な色使いの傾向・癖によるものだと思いますが、こんな感じにS字型に調整するとイイ感じになる…ことが多いです。)
なんかすごくイイ感じです！！やりました！！！🙌
まとめ
ステキなソフト「ふぁみこんぶ」を使用すると、お手軽に自分の作品をファミコン風味に変換できます。テンションが上がります！
こだわりたい場合は、クリスタで調整するとテンションが一層上がります！
なお、クリスタでの調整は「トーンカーブ」フィルターにとどまらず、加筆したり、乗算レイヤー・加算レイヤーで局所的に明暗調整をしたり、ほかにもいろいろできます。
作品のさらなる可能性・ステキな表現を模索してまいりましょう🙌
音楽ページの改修もすすめないと…💦
続・フォントをつくってみた話
先日の、iPadのアプリをつかって、フォントをつくってみた！話の続編。
ついに「くろねこフォント」は小学校漢字をすべて網羅した――！
やったぜ。
この学年までくるとあんな文字列こんな文字列が書けるのか～～など想像しながらたのしく文字カキカキ。
おかげで利き手にペンだこならぬアップルペンシルだこが出来てイタイw
でもとりあえず小学校漢字を網羅したからHappy！
ヽ(* ‘∀’)ノ
↓入力して試せます。
存在しない文字は、Noto Sans JP で置き換えられます。
例：幼女戦記 古畑任三郎 我々は地球人である
*～*～*
しかし視認性可読性をあんまり意識していないこのフォント
肝心の使いどころといえば……
怪文書を書くくらい………（爆
でもまあ 今後アルファベットオンリーだけでもフォントをお手軽に作れると判明したので ヨシ！
………。
この連休はなんだかめずらしく
おえかきするでもなく DTMしたり 文字ばっかり書く日々だった…（遠い目
フォントをつくってみた話
Hi there !
Thank you for your visiting my website ! 🙂
I converted my first original font file into web-font format and am trying to use it on this blog article 😀
Haha that’s funny !
オリジナルフォントですよ！！
どうです！！？(ｸﾜ
iPad：通称ﾊﾟﾖ で、フォントがお手軽に作れるアプリがあるぞ！
…という情報をみかけたフォントだいすきまん・ほたか。
さっそくその「iFontMaker」なるアプリを購入 (￥980) し、いざ！
うっすら見えている手本文字で大きさやバランスを意識しつつ、上から手書きで文字を書くだけ。かんたん！
じゃーん。その名も「dp-くろねこフォント」！！
いつものネコチャンイメージの…というか大体普段からこんな字なんじゃね疑惑たっぷりなフォントが完成！！
↓入力して試せます ※半角英数字のみ
おもしろくなって調子にのっちゃったほたか。
こんどはひらがな・カタカナもいれてみたぞ！！
…いかに普段からけったいな文字を書いているかがバレバレだ！！
怪文書にピッタリ。（？？？
おもしろーい！
コレをゴリゴリつづけていけば、このサイト全体をこのけったいフォントで表示するのも夢ではないわけだ。（可読性無視仕様なのでやらないけどｗ
でも、しょうがっこう１ねんせい…いや３ねん…いやいや６ねんせいくらいにはなりたいかも…道のりは長いぞ！
記事を書いている今現在は ver.0.2 … 半角英数・ひらがな・カタカナまで。
はてさて これからどこまでいけるのか！？
以下続刊！！（…なのか？
[素材] Colour Textures
![[素材] Colour Textures](/img/ogp/main.jpg)
★ 素材紹介ページ: 素材をさがす – diceproj Texture | CLIP
★ Clip Studio ユーザの方は、Clip Studio からダウンロード・素材バンクに登録できます。
★ 非 Clip Studio ユーザの方は、DICE Project 素材ページからどうぞ。
–
カラーの非シームレステクスチャ6枚 (アブストラクト、手描き迷彩風、点描風、水彩風)。
(350dpi, 3200 x 4400 px, non-seamless、個別ダウンロードできます)
自作のアブストラクトなブラシの試し描きも兼ねて、よくテクスチャを作っておりまして。溜まってきた中から、いくつか選んで公開してみようと思います。お役に立ったら幸いです。
(CLIPサイトでは、本来はまとめて素材集として出すつもりでしたが、容量のせいかアップロードに失敗するため、さらに選んで単体で小出しにしました。スミマセン…)
[素材] 新素材公開：3 Grunge / Texturing Brushes
えー、Twitterなんかで再三宣伝してますけれど
ひさびさに、ブラシ・ブラシ先端用画像のフリー素材を追加しました。
Clip Studio 用のブラシ (SUT形式) の他、ブラシ先端画像用に透過PNGも配布してますので、PhotoshopやFireAlpacaでもカスタムブラシを作るのに使えます。画像は大きめなので、そのままテクスチャ画像としてもお使いいただけるかもしれません。「AUbrush Nature Soil」「AUbrush Nature Wood 5」については、FireAlpacaのブラシ設定例も載せてあり、ClipStudioのブラシの描き味はおおよそ同じ感じです。適宜ご自分の表現や用途に合った設定でお使いください。
商用利用にもドウゾ／リンクバックや作者表記、利用報告などは必要ナシ (もちろん喜ぶ！)。
お役に立ったら幸いです。
■ 全フリー素材
■ AUbrush WaterDragon Scale
オーストラリアのトカゲ・ウォータードラゴンのウロコ模様から作った Clip Studio ブラシ。ウロコはもちろん、グランジな表現にも良いかも。
■ AUbrush Nature Soil
南国樹木の根元から作った、グランジーなテクスチャ用シェイプ。
Clip Studio 用SUTファイルは、散布タイプ・テクスチャ筆タイプの2種類をZIPに詰めてあります。前者の描き味はおおよそ記事中の FireAlpaca の散布水彩の例と同じ感じです。
■ AUbrush Nature Wood 5
南国樹木の幹から作った、微グランジーなテクスチャ用シェイプ。スプレーにもなりそう。
…で、何だか3番目の「AUbrush Nature Wood 5」が断トツで反応良いみたいなので、「マジで殆どこのブラシだけで星雲が描けちゃうぜ！」っていう簡易チュートリアル。FireAlpaca使用、筆設定は素材ページで紹介している散布水彩の例と同じ。描いてる最中パラメータはブラシサイズ以外弄ってないです。
【細かい手順】参考までに。
1．一番下のレイヤーにバケツで背景色 (ほぼ真っ黒に近い) ぶちまけ
2．上にレイヤ追加。このブラシをサイズ大きくして使い、ほんのり暗い青でモヤを描く (この時はブレンドモード：可算発光にしたけれど、色の選びかたではその必要もないかも (汗)
3．上に可算発光レイヤ追加。星雲の大まかな形を描く。周りに遠くの星雲などを描くとリアルかも
4．その上に加算発光レイヤ追加。ブラシサイズを小さめにし、星雲の中でも特に光の強い部分を描く
5．さらに加算発光レイヤ追加。今度は丸い形の適当な散布ブラシで周りに小さな星々を描く。ごく小さくしたこのブラシか、デフォルトで入っている水彩筆などで、いくつか強調するとGood
6．最後にオーバーレイレイヤ追加。ブラシサイズを大きくし、ピンク、紫など色の変化をつける (これも、もちろん最初から色選びを巧くやれば必要ないかと (汗)
7．適宜、デフォルトで入ってるぼかし筆や水彩筆で整えて完成
※2と3の手順では、ブラシの色を「色⇔透明色 (消しブラシモード)」と切り替えて、形を整えていく感じ。
–
ついでに、調子こいてこのサンプル画像 (+α) の FireAlpaca データを公開します。
改変 → 非商用/商用利用もどうぞ。そのまま転載しても面白くないぞ。
  (700 x 350 px / 350dpi / .mdp形式) |
 (1100 x 550 px / 350dpi / .mdp形式) |
+αのオマケな方は、大体上の簡易チュートリアルと同じ手順を踏んだ (ボカシ使わなかったくらいか) あと、全体の調整するのに、一番上にフレーム的な乗算レイヤーを追加してます。このフレームももちろん同じブラシ (かなり大きめサイズ) で。