ゲームに合うように背景画像をクリスタで加工するよ!※画像が多い記事です※

ゲ制コラム

 
こちらは ノベル/ADV制作者によるアドベントカレンダー 参加記事です!!
 

\ みなさ~~ん! ゲームで背景ってどうしてますか~~~! /

えっ……3D空間……? オリジナルドット? 背景外注………??
なるほど…………………知らない子ですね。

この記事では素材サイトさんからお借りしてきたり、背景アセットを買ってます私がゲームの雰囲気に合わせるためにやっている加工をご紹介する記事です!
ついでに(Adobe税は支払えないので)イラストに使っているクリスタで基本的に加工します。

記事の中では写真を使っていますが、イラストのときも実は同じようなことをしています。
そして本日のお写真は全て撮影者あきらとなっております。


準備編

どれにしようかな~~!
あっこちらのファイル管理ソフト見やすいでしょう?
Eagleって言います!
これむっちゃ便利なのでおすすめ! って記事を過去に書きました(お金をもらってないダイマ)

選んだ画像は最初にゲームに必要なサイズに縮小拡大してトリミングしておきましょう。
概ねゲームの解像度になるのではないでしょうかっ!

加工していくよっ

線を潰す

フィルターのイラスト化、もしくは調整レイヤの階調化あたりで画像の細やかさを潰します
どれくらい潰すかは本人の好み次第……と思うんですけど、今どきのイラストは細部にわたって、細やかに、繊細に描き込んでいる感じがするので、そこまでやらなくて良いんじゃないでしょうか。
あんまり潰しすぎる2010年くらいっぽいゲームの背景になる!と思ってます。

それと、イラスト素材を調整する時はこの作業はあまりしないです。
する事もあります。
複数の素材をお借りするときは、統一感のためにしたりします。
その場合階調化が多いかな??

雰囲気を作る

色味を決める

みんな大好きグラデーションマップ!!!
アセットストアに行けば色々目移りするくらいおいてある!!!!

作りたい雰囲気っぽい色合いのを選んでオーバーレイかスクリーンにするのが王道な使い方だと思うんですけど……私もそうするんですけど……

こういった派手でむしろぜんぜん違う色!ってのを選んで「除外」「除算」「減算」のようなモードもおすすめ。
今回はこれを除算したよ!!

きれ~~~~~~~!!

ちなみに、定期的に「表示レイヤーをコピーして結合」しています。
1枚のレイヤじゃないと出来ないこともあるし、区切りにもなるしね!!!

それと、グラデーションマップ以外にもオートアクションでも色味をいじれるものがあります。
イチオシは「アクアレモンフィルター」
どういう原理なのか良く分かってませんが、とりあえず青/レモン/ピンクっぽいエモーショナルな色になります。

◇素材◇

透明感グラデーションセット - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。
とっておきグラデ120 - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。
アクアレモンフィルター - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。

質感フィルター

貼り付けてオーバーレイ!!!!!!!
もしくはスクリーンや焼き込みカラー。

この手のテクスチャ素材はクリスタのアセットストアよりDesigncutpixivDLsiteで手に入れることが多いかも?

◇素材◇

水彩テクスチャ大きめ - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。
ドラマチックフィルターセット - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。

プラスアルファ!

このままじゃまずい!

それはそうと、なんか右側が白くなりましたね?
まあ、これはこれで良いんですけど、そういう時やってる加工もせっかくだから解説です。

\ ぽんっ! /

ということで、葉っぱのついた枝をぽんっとスタンプしました。
植物系の素材はクリスタアセットにたくさんあるのでとてもおすすめです。

ついでに、ちょっとだけぼかしをかけておくと背景に馴染みやすいと言うか、手前の物がぼやけてる感じします。

◇素材◇

枝葉ブラシ - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。
ちょっとした植物 - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。

模様をつける

可愛い系の同人乙女ゲームだと良く背景に模様がついています。
(ノベコレさんなどでも見つけられます)

私も好きです。

そういうのはタイル素材を敷き詰めて白か黒×オーバーレイかスクリーンでつけることが出来ます。

せっかくデジタルでいくつでもパターンを見比べることができるので色々やってみると面白いですよ!
後可愛くなる。とにかくかわいい。

◇素材◇

ベーシックパターン素材集 - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。
レトロポップパターンセット ver.2.0 - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。

一応状況を変えてみたり

天気の変更、時間の変更が必要だったらクリスタで描き足します。
今回は特に必要なかったけれど、お天気雨が大好きなのでお天気雨にしてみました。

◇素材◇

Rain -小雨ブラシ素材集- - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。
1分で雨ブラシ - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。

完成っ!

お疲れ様です!!!!!!!!!!
ものすごい早足&スクショ数で気圧されたかも知れませんが……今回丁寧にやってるだけで! 半分くらいの作業しかしないものです。

そしてこちらが完成品をゲームに組み込んでみせた所。
だいぶ写真みが薄くなったのではないでしょーかっ!

そして、私はいかにもエモーションな色合いと雰囲気が好きなので大満足です。

別パターンたち

上のとこで終わっても良かったのですが……

もうちょっと書けそうなことがあったのでエクストラターン!
別の画像を加工するところもちょっぱやな早足でご紹介したいと思います。

車内画像

こちらの(奇跡的に誰も居なくなったので、全力でゲーム用に取りまくった)電車内写真を加工しますっ!

前のと何が違うかって言うと「人工物細かくてしんどい」「室内は誤魔化しづらくてしんどい」と言うことです。

加工しやすく加工する

フィルターや補正などを使わない場合、jpegらしいぶつぶつがあったりします。
クリスタにはそれをワンクリックで取り除く機能があるので適当に何回かかけておきます。

もーゴチャゴチャして見るからに写真なのでとにかく明るくしてあげます。
明るくしてると白くボケるので、ちょっとコントラストもあげてるのが↑のスクショです。
そのご微妙に彩度を上げたりなんだりして、とにかくボケない範囲で明るくします。

頑張った結果です。

模様をひねり出す

室内(車内)は「良くわからないけれどこれをオーバーレイかスクリーンすると良い感じになるよ」系のテクスチャが違和感出ると言う逆境なので、ペンで謎の光を描き足してます。

この時使うペンは漫画用のコマの後ろを埋めるペンや良い感じのふわふわを描いてくれるペンが優秀です。
写真に置くときはイラストっぽいやつ、イラストに置くときは実写っぽいやつを使うとエモーショナルで今どきな描き込み多めのイラスト……に勘違いさせやすい! 気がする!!

◇素材◇

点描ムードブラシ - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。
キラチカブラシ - CLIP STUDIO ASSETS
イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。

枠をつける

これはゲームエンジン側でやるべきことかも知れませんが、ケース・バイ・ケースということでここで紹介してみます。
ぽんっと背景画像を置くよりも、上下全体をぐるっと枠で囲んであるほうが雰囲気が出ると思います。

良い所は「画像ごと好きな演出にできること」「組み込んでる時管理する素材数を減らせること」
画面にいっぱい画像出してると、画像の表示順とかで頭パンクしちゃうよぅ!

◇素材◇

OKUMONO | 背景フリーイラスト素材のOKUMONO。VTuber・配信のサムネイルや画面に。
配信や動画の背景に使えるフリー素材サイト。 VTuberやYouTuber、配信での活動に便利な無料イラスト素材を配布中!商用利用可・登録不要でかわいい・かっこいい背景、フレームやフキダシなど様々な素材をご使用いただけます。

完成~~~!

とゆうわけで枠付き車内背景でした~~!

そもそもキレイな加工しながら素材撮っちゃっえ~~!

私は年がら年中ゲーム制作のことを考えているので、遠出や旅行ではひたすら人の居ないゲーム向け背景素材をひたすら撮っています。

ってな感じのを今回放出しながら記事にしているのですが……

もう既に青くてエモーショナルじゃないですか?

同人サイトのバナーになってそう!! むしろ私がしてそう!!!
ちなみに船上です。(海の写真が多い?? 私が海好きすぎるんだよ!)

これはB612と言うキラキラめのフィルターをかけながら撮影するアプリで撮った写真です。
ここまでくればもう色調補正すら要らないですね!

いきなり模様をつけたり枠を付けたり

模様になる素材を貼って、

枠つけて、

かんせ…………

っなんか背景の高さ変じゃない!?!?!?!?

これっていわゆるアイライン……じゃなくてあ、あいしゃどう……あい……あい……あい…………………[google検索]…………アイレベル!!!!!!!!!!
なんかその水平線的なあれが変みたいな。
もちろん知識がないんで合わせられません!!!!!!

でもとりあえず、背景の街灯がキャラより低いのは嫌だったのでなんとかしま……

した!!!!!

知識がある人の知恵待ちです。

まとめっ

以上が私がゲーム用背景でしている加工ですっ!
なにかの参考になったら良いなあと思っています。

それと、今回作った背景画像は素材としてまとめておいたので、気になる人は見たり使ったりして下さい。
別ページにまとめておきます。

また、似たような画像加工記事はちょいちょいあげてるのでもっと見たい~~と思った奇特な方は見ていってくださいな!

◆◆素材ページ◆◆

背景用画像素材ページ
1280*720利用規約クレジットは要らないです!使ったら教えてくれると嬉しい素材自体を売らないでね!R18でも有料でも使っていいよ何か問題が起きても責任は取りません規約は適時変更される可能性があります

◆◆過去記事◆◆

背景を作る-ゲ製のためのイラスト制作の知恵・1
目次なんで書いてるのかとか、コンセプトは上記の記事をご確認ください!今回は背景について。書き込むちゃんとしたものじゃなくて、ぼかしてごまかすものです。作るものは基本的にちょうぼかした遠景人物=中景ちょっとぼかした近景で構成された画像を作りま...
DLsiteの販売画像制作の詳細[王女様は呪われ騎士の性処理用花嫁]
新作発売しました!!!!! 販売しましたっっ!!騎士様と王女様がえろえろしてるだけの小説ですっ!!! サンプルはこちらなのでよろしくお願いしますっ! この記事は…… サムネイルの作り方がわからない~~~!っていう友人のために作った私のサムネ

※2つ目はR18サイトです。

さいごに:ノベル/ADV制作者によるアドベントカレンダー

冒頭でも申しましたがこちらの記事は「ノベル/ADV制作者によるアドベントカレンダー」参加記事ですっ!

前走者はmoriさん、後走者は四宮のんさんです!

私の100倍すごいゲーム作ってる人たちが参加してるので、みんな他の記事も見に行こうぜ!

送信中です

×

※コメントは最大200文字、3回まで送信できます

送信中です送信しました!
タイトルとURLをコピーしました