P-0000 Piro 的 CG 講座 Part3 ：背景〜仕上げ

Step10 背景の制作

人物のレイヤは、バックアップを取ったあとレイヤを統合して、データを軽くして片づけておきます。完全に編集の終わったレイヤはどんどん結合していって、データを軽くしておきましょう。レイヤが少なければ、その分動作が軽快になります。

[sample] 今回はタブレットを買った記念（？）と、練習も兼ねて、背景はタブのみで作ることにしました。

テーマが春なので、桜を背景にします。人物のアングルがやや下から見た感じになっている（アオリ視点）ので、背景もそれに合わせて角度とパースを考えてラフを作ります。

今回は背景はそんなに細かく描き込むつもりはないので、ブラシツールで適当にがしがし塗っていきます。桜（ソメイヨシノ）はピンクよりも白の方が強いので、ブラシやエアブラシで白を上からかなり重ねます。

[sample] 途中の工程は省略して、背景が完成したところです。

手前の樹と後ろの樹は別レイヤで、後ろの方はぼかしを強くかけて遠近感を表現したつもりです。人物は、イメージホースのものを拡大して角度を付け、ぼかしただけです。

手前の方に桜の花びらを散らしてありますが、これは自作イメージホースです。ブラシで適当に作ったものを拡大縮小・回転・変形して数パターン作り、イメージホース用データにしました。で、2枚のレイヤを用意し、遠くほど小さく・ぼかしを強くかけて、遠近感っぽくしてあります。

全体にかなりいいかげんですが、人物を合成すればどうせほとんど隠れてしまうので、気にしないことにしました。笑。

Step11 背景との合成

[sample] 背景に人物を重ねます。重ね合わせの境界をなじませる処理などは特に行っていませんが、この段階で別項のぼかしを使った仕上げの技法を使っています。背景ともこれで若干はなじんだかな……？

Step06 で線画レイヤを作ったのは、ここでの背景との合成を簡単に行うためです。もし1枚のレイヤに全てを描いていると、背景と人物を合成するのにえらい手間がかかってしまいます。背景との合成を前提にするなら、レイヤ機能は必ず使えるようになっておきましょう。

背景からの影

この背景は一応桜並木のつもりなので、その影が人物に落ちることもあるんじゃないだろうか……そう考えて、影（シャドウ）を入れてみることにしました。

[sample] まず、影用の色だけのレイヤを作ります。人物レイヤを全選択して「選択範囲をフロートにする」→「フロート解除」で人物の部分だけを選択できます。その後、新規レイヤを作ってバケツツールで影に使いたい色を流し込みます。（このテクニックはいろんな局面で使えますので、一連の操作をアクションレコーダーに登録しておくと便利でしょう）。ちなみに、こうして作成した影をずらして人物の下に配置すれば、人物の影を作ることもできます。

人物の形をした一色だけのレイヤができたら、表示マスクを使ってがしがし削っていきます。

[sample] なるべく花びらの影っぽくするために、背景で使用したイメージホースも使ってみたりしてます。

影（シャドウ）と書きましたが、半分は人物の陰も兼ねています。そういう関係で、照り返しなども少し考慮に入れましょう。ここでは頬や腕・脚で、照り返しの部分をエアブラシで削りました。

「それらしく」削れたら、複製して線描フィルタをかけ元のレイヤと結合して、影の完成です。これを先ほどの人物レイヤの上から乗算（濃度40％）で重ねます。

[sample] ここでは、メインの人物レイヤとぼかしレイヤの間に配置しています。

Step12 前景

人物の後ろだけでなく手前にも物を配置する（これを前景と言います）と、画面に奥行き感が増します。そういうわけで、今度は手前にも花びらを散らしてみます。先ほどのイメージホースを再利用しました。

[sample] とにかく「遠近感」を強調します。人物の上に2〜 3 枚のレイヤを用意して、手前に来るほど拡大倍率を大きくし、ぼかしを強くかけます（遠近感とピンぼけのつもり）。少し人物にかかるように配置すると、画面に派手さが増します。

光

明るさの演出として、光が射し込む様子を作ってみましょう。一番上に透明レイヤを作って、直線ツールで適当に白い線を引きます。いくつか太さを変えて、広がりを持たせて配置します。ある程度できたら、光の中心にあたる部分を白のエアブラシでぼかすように潰します。

[sample] 人物にかかる部分などを表示マスクとエアブラシで少し削って、光にイレギュラー性を持たせます。そこで合成方法を「覆い焼き」にして重ねると、このようになります。「覆い焼き」はこういう光の演出などで面白い効果が得られますので、人物のハイライトなどで試してみるといいでしょう。

Step13 仕上げ

さっきまでの工程で大方の作業は終わっていますが、イラストとしての体裁を整える意味で、枠（フレーム）を作ることもあります。

一番単純なのは、一番上に一色だけのレイヤを作り中央を切り抜いたものです。ちょうど、額縁に絵を入れるとの同じ要領です。なお、重ね合わせの濃度を調整すると、少し面白い効果が得られます。

これは、上の応用例。 PC-0033 などで使っています。

「写真を浮かせている」ような効果を得ることもできます。まず、白一色の中央に新規レイヤで黒の矩形を描き、ガウスぼかしをかけます。

その後、ぼかした黒を少しずらして、元の矩形があった位置を切り抜くと、こうなります。

今回のサンプルではこれを応用して、角度を付けて枠を二つ重ね、濃度を調整してみました。

[sample] フレームの外は、色調補正で青のモノトーンにしています（目立たないですけど）。あとは、写真の日付をイメージした署名（オレンジで文字を作って、覆い焼きで合成）を入れて、これで完成。ここまでで作業時間はだいたい20時間超くらいです。これは、マウスのみの作業で人物の塗りの効率が悪かったためで、タブレット等を使って手早く作業を進めれば、もっと早く終わったと思います。

Step14 公開

おまけということで、ネット上での作品の公開の仕方です。

トップページに巨大な画像をいきなり貼り付ける人もいますが、ページの読み込みが遅くなるので、あまりお勧めできません。絵は絵だけでまとめて置いておくのが、見る側としては便利です。そういうわけで、「ギャラリー」のようなコンテンツを作るのが一般的でしょう。

ギャラリーの形式

ギャラリーページには、サムネイル（「親指の爪」の意。サンプルの縮小画像のこと）を貼っておくパターンが多いです。

サムネイルは画像本体を表示する前にその画像の中身を確認するためのもので、この Tips でも採用しています。閲覧の効率に大きく関係しますので、できれば用意しておいた方がいいでしょう。

サムネイルの作り方自体は、難しいものではありません。画像を適当に縮小して、ページ内に張り付け、本体の画像にリンクすれば OK です。

サムネイルは、できる限りファイルサイズを小さくしましょう。目安は1〜 5KB 、とにかく軽ければ軽いほどいいです。ファイルサイズが小さければ、その分、表示にかかる時間も短くなります。

展示する画像のサイズ

解像度

「画像の大きさ」にはファイルサイズ（データの大きさ）と解像度（縦横のピクセル数）の2種類がありますが、どちらも小さい方がいいです。

パソコンのディスプレイは最近では大きくなってきましたが、 800×600 以下の環境はまだ多いです。一画面内に画像を収めようと思ったら、必然的に、これより小さいサイズ（解像度）で公開する必要があります。ちなみに自分の場合、この値を規準に、画像の縦サイズを 600pixel に合わせて縮小しています。

解像度が高くても、実際は、よっぽどの描き込みでない限り見てくれる人は少ないです（悲しいですがこれが現実）。どうせ見てもらえないのなら、それよりも、画像を軽くしてでもより多くの人の目に触れられるようにした方が得策でしょう。

ファイルサイズ

Web でフルカラーイラストを公開する場合、ファイル形式は JPEG がほとんどでしょう。しかし、 Photoshop などのツールから直接出力する JPEG は品質の細かい調整などができないため、あまりお薦めできません。こういう場合はやはり、 bmp → jpeg の変換専用プログラム（例： BTJ32 ）を使うべきでしょう。こういう専用ツールを使えば、観賞に堪えるギリギリまで圧縮率を高めることができます。

ファイルサイズは、 50KB 前後……どんなに大きくても 100KB 以下というのが目安でしょうか。ファイル形式にはプログレッシブ JPEG を使った方が、観る側としては有り難いです。

その他

各画像ファイルの縦横解像度とファイルサイズは、記述があった方がいいでしょう。事前にファイルサイズを知ることができれば、閲覧時に余計な待ち時間をとられずに済みます。

また、一つのページに全てのサムネイルが収まりきらないほど大量にある場合、画像の並び順は、昇順（新しいものが上に来る）にした方がいいと思います。リピーターの場合、古い画像は大体既に目を通しているので、新しいものだけ早く観たいという場合が多いです。

制作行程目次

というわけで、僕のイラスト制作手順紹介は、簡単ながらこれで終わりです。こんなものでも何かの参考になれば幸いです。

Back