マルチルームの作り方② ～背景作り～ 2021.07.28 Wed 23:50 | お絵かき

全体構成

・イメージ固め
・背景制作
・ロゴ制作
・実装
・Q&A

今回はみんな気になってるであろう、背景作り編です。

■背景制作

#背景について

基本的に既存の写真をコラージュしてそれっぽく作ってます。
風景をガチで描き始めるとはちゃめちゃに時間かかるので、コラージュしちゃう方が早いです。

なんでそれっぽいファンタジー画像（無料配布の背景とか）とかを引っ張ってこないかというと、
利用者に対し、かなり固定したイメージを与えてしまうからなんですね。
あと、世界観がその製作者の世界観じゃん……という。

やっぱり想像の遊びなので、ある程度想像の余地を残した、
ぼんやりとしたイメージがいいよな～と個人的に思ってるので。
写真そのままを使っていないのも、それって「この世のどこか」に確実にあるものなので、
ちょっとなーとも思ってます。


更に言えば、そもそも著作権自体が引っかかることが多いです。

個人的には、素材サイトなんかの「個人利用の範疇であればOK」とかも、
チャットの背景に使うのは個人利用なのか…？
とか、ちょっと迷ってしまうので……もう作った方が早いね。


一番良いのは、あまりイメージを固定せず、かつファンタジー感があって！
っていう素材なんですけどね！
そう都合の良い画像はないね！
もういっそ探すより作った方が早いね！！


ってことで！わざわざ作ってます。
だって作れるんだもん！

---

#写真を集めてくる

良い世の中になったもので、加工OKな写真素材サイトはいっぱいあります。
大体こういうところで写真頑張ってさがしたり、場合によってはちょっと買ったりとかします。
帰属表示（誰が著作者かわかるように）が必要かどうかっていうのは気にしておいた方がよいかなーとは。

morguefile
pixabay

広告多めなので探し方にコツがあったり、そもそも海外サイトなので英語ベースなんですが、
そこはなけなしの英語力を使います。

色々探し回って、今回は↓コレをベースにして



珊瑚のお城っぽいのは聖ワシリィ大聖堂を使うことにしました。



かなり有名だけど、色変えたらわからない！！っていう言い訳と、
きれいな城っていうのはもう有名だからわかっちゃうんだよ…仕方ないんだよ…という妥協です。
ほんとは建物そのままとか使いたくないんだけどねーー。
でもリトルマーメイドのお城みたいにしたかったんだもん仕方ないもん。



あとは適当に使えそうな珊瑚とか泡とか拾ってきます。



この時にデザインが浮かんでいるかっていうと、うーん……
写真を見ながらアレとこれを組み合わせたら楽しいかなーと考えてるくらいです。
とりあえず気軽に使えそうと思うのはポコポコ集めておきます。

---

#写真をコラージュしてベース作成

ここからはPhotoshopを使って作業していきます。

別にPhotoshopじゃなくてもクリスタでも何でも良いんですが、私がただ使い慣れてるのでPhotoshopを使ってます。

ここでいうベースとは、だいたい8割くらいの完成度のやつです。
取ってきた写真を切り貼りして……

はい完成！


……とかだとわからないと思うのですが、本当にただ試行錯誤しているだけなので、
ここに関しては手順を書き起こすとすごいことになるんですよね。


とりあえず主にやってることとしては


・色味の調整


すごいざっくりした言い方なんですが、色を調整する方法は山程あります。
これについては各自で調べてください！！！

単純に数値だけいじったり、上からオーバーレイとかで部分的に色変えたり、影をふわっと書き足したりとかします。
もうこれは実際にいじって自分にとってのベストを探してみてください。


・ぼかす、フィルタをかける

元が写真なので、ぼかしたりフィルタをかけて情報量を削減して「それっぽく」します。
元画像コピーしたやつで作業しなよ！！
全部バカ正直にかけるんじゃなくて、部分的に消して調整かけたりとかします。



・他パーツと重なっている箇所の調整

マスクをかけて柔らかめのブラシでふわっと消して……とかいうとわかんないですよね。
要はふわっとした消しゴムで境目をふわっと消してなじませてます。
大体これで他の写真と合体できます。

もうこの辺りの作り方については、
「Photoshop　写真　チュートリアル」とかでググると、
こういう使い方ができるんだよ～ってすごく丁寧に説明してくれてるサイトが山程でてくるので！
その辺りを参考にしながら、色々いじってみてください。



以下、とりあえず今回のやつを参考までにパーツごとに比較画像のせときました。






これはベースにしたやつですね！
色を青っぽくなるようにぐりっといじっただけです。
あと、真ん中の柱が邪魔だったので消しました。

こういう簡単に写真から人やら柱を消せるのがPhotoshopのいいところ！！







これはワシリィと珊瑚を組み合わせたやつです。
周りの背景を切り抜いて消して、珊瑚も使えそうなところ引っ張ってきて合成して、そんで色味のせました！！

---

#シームレスパターン化

あーこれ説明面倒なやつですね。


ってことで、これ読んでください↓
つなぎ目のないパターン素材の作り方



すごくざっくりしたことを言うと、

端っこをずらして真ん中にもってくる→真ん中に継ぎ目がうまれる→生まれた継ぎ目をごまかす

ってことをすることによって、元々つながってた画像を分割してるだけなので、うまいこと繋がりますよってことです。



・つなぎ目の消し方について

Photoshopなのでスポット修復ブラシツールを使ってます！
すみません！楽だから！


……だと参考にならないので……。

簡単にできる手としては、

・境界線をぼかす
・グラデーションをいれる

なのかなぁと思います。

これはサンプルイメージですけど、

こんな感じに…。

ちなみにこれはあくまでもサンプルなので、
大げさに画像をズラしたり（実際はもっと控えめです）色を大味にぬってます！




・何故シームレスパターン化するか

好みですね！

……というのも、PCなのでみんな閲覧している環境が違うんですよ。
ということは、見える画像が違うんですよ…。
で、実装の構造的に背景画像に指定したやつは敷き詰められるわけで……
ものによっては、なんか画像と画像のつなぎ目がブツっとあって気になるっていう……。

すげーでかい一枚絵用意すれば敷き詰められてもわからないよ！！って思うかもしれませんが、
それはそれでチャット画面が重たくなっちゃうんですね。
（基本的に軽いのが使いやすいはずなので）

なので、シームレスパターンになることを前提にしておくと、
大体みんな見え方が一緒の、安定したデザインになるなって感じです。

#仕上げ加工

手書きで光を飛ばしたりなんやかんやします。
今回はシャボン玉とクラゲを足しました。

こういう作業はクリップスタジオの方が向いているので
（クラゲとか配布素材ブラシですぐ見つかるし）
クリップスタジオに持っていって作業します。

この時に注意しなきゃいけないのが、「絶対に端に触らない」ですね！！

シームレスパターンが崩れちゃうんで！基本的に真ん中付近をさわりましょう！
まぁ完全シームレスになってないけどね！今回も！

---

#gifで保存

がぁらないとシネマはpngに対応しておらんのじゃ。
そして敷き詰める（複数画像が表示される）以上は、挙動は軽いに限るのじゃ。
ってことでjpgじゃなくてgifにしてます。（できないならjpgでオッケー）

そして、保存の時にすごーーーく画像を劣化させてます。
そうすることで、

・軽くなる
・なんかイラストっぽく仕上がるのと、
・サイトの雰囲気に合うぼかし方になる
・情報がある程度とっぱらわれて「それ」っぽくなる

ので！！

まぁ好みですね！

とりあえず背景画像はこれでできました～。

---

#気をつけてること

はい、余談のコーナー。



・写真そのままにしない

単純にサイトの世界観にあわないのと、
写真になってるってことはこの世のどこかに実在してるってことでしょ！？となるので…
写真をもとにするときは、もうガンガンにぼかすとかするだけでも違うとおもいまーす。


・人間いれない

おまえだれだよ服装が現代じゃん！？
となるから…
（私は城塞の闘技場の観客すら気になっているぞ）



・明らかにどこの何か特定できるものは避ける

城は仕方ないんですよ城は！
だってきれいな城ってみんな有名所しかないから…。

と、それとは別にして、明らかにコレって○○だな～ってわかるようなものは避けてます。
アンコールワットそのまんまとか置いたらまずいでしょ！？みたいな…。

---

以上！
次回はロゴ編だー。ながいなー。
もうやめていいですかね……。