イラスト・マンガ描き方ナビ > スキルアップ講座 > 【フォトバッシュ背景講座】写真から作る風景イラスト

【フォトバッシュ背景講座】写真から作る風景イラスト

フォトバッシュ、写真で作る風景

写真を加工した美麗な風景イラストを作ろう!イラストを近景・中景・遠景に分割する発想から視線誘導の使い方まで、写真を利用するフォトバッシュ技法を例に背景の構成方法のコツをご紹介します! 2016年11月30日発売『フォトバッシュ入門 CLIP STUDIO PAINT PROと写真を使って描く風景イラスト』から特別掲載!

写真を使ったイラスト構成を学ぼう!

複数の写真(Photo)をキャンバスに貼り込んで組み合わせ(bash)、1 枚のイラストを制作するフォトバッシュという技法が有ります。(くわしくはこちらより

 

この技法はうまく利用すればフォトリアルな絵柄以外にも広く活用できる技法です。
多くのメリットのある技法ですが、もちろんデメリットも存在します。

 

例えば、フォトバッシュは写真同士の組み合わせをきちんと考えないと、ひどくチグハグな画面になりやすいという問題が存在します。
具体的には、ディテールのサイズ感、色合い、アイレベルなどの統一感をよく考える必要があります。
今回の記事では特に、写真の組み合わせ方についての注意の仕方、解決の仕方を風景写真の組み合わせを例にして解説します。

 

9306_0001

▲複数の写真を利用して一枚の風景イラストにするフォトバッシュ

 

1.画面構成の考え方

ここでは、複数の写真をキャンバスに貼り込んで組み合わせてイラストを描く、「フォトバッシュ」の為の基本的な考え方や技術を解説します。

 

第一にフォトバッシュでは、配置する写真の大きさや位置のバランスが重要になってきます。

ここではその基礎となる、構成を考えるにあたっての距離の考え方と視線誘導の重要性について解説していきます

(これらは、フォトバッシュに限らず、風景イラストを描くための普遍的な考え方でもあります)。

 

3つの距離と視線誘導

風景イラストは、個々の物の描き込みよりも、全体の調和が重要になってきます。
そのため、いきなり描き始めるようなことはせずに、まずはきちんと構図を決め、画面構成を計画する癖をつけておきましょう。
画面構成のやり方は人によってさまざまですが、私の場合、奥行きを「近景」「中景」「遠景」の3つの距離に分けて考えるようにしています。
下の風景イラストを例に見ていくと、黄色の範囲が「近景」、緑色が「中景」、青色が「遠景」となります。

9305a-1

近景

画面の手前、手を伸ばせば触れられるくらいの距離です。
最も近い部分なので、細かく描き込みます。空気遠近法を意識して、中景、遠景よりも濃い色を使用して表現するとよいでしょう。

中景

画面の中央あたりに位置する距離です。

近景よりも遠くなるため細かい部分までは描き込みませんが、大まかな質感や立体感などは表現していきます。空気遠近法を意識して、近景よりも薄い色を使用することで遠近感がでます。

遠景

画面の奥、最も遠くの距離です。

細かい部分は人間の目では判別できなくなるので、シルエットだけで描いたり、大まかな明暗だけで表現します。空気遠近法を意識して、中景よりも薄い色を使用し、大気に溶け込んだようにします。

 

このように分けることで、どの部分にどういった物を配置するのか、どこをより描き込む必要があるのか、逆に描き込まないのかを全体のバランスで考えることができます。

 

とくに、フォトバッシュの場合、使用する写真に最初からディテールが備わっているので、ただでさえ情報量の多くなりがちな風景イラストに、さらに過剰な情報が加わることになります。

 

情報量の多過ぎるイラストは、見る側の視線が迷ってどこを見ていいのかわからなくなるため、結果的にイラストのバランスを壊します。

そのため、まずは「どこに視線を集めたい(どこを目立たせたい)のか」「どういった視線の流れで見てもらいたいのか」といったことを、しっかりと考えます。

その上で、各写真を配置してディテールの残すところと残さないところを決めて全体の調和を図っていくことが、フォトバッシュでもとくに重要です。

 

手描きの風景イラスト以上に、3つの距離でのバランスを意識し、見る側の視線をうまく誘導していく必要があります。

 

2.写真枚数を絞った構図例

 

ここでは、写真の組み合わせ方を変えた6 パターンの構図例を紹介します。

 

同じ写真でも、配置する距離や位置を変えるだけで構図は大きく変わってきます。それぞれの構図の利点、意図、見せ方の工夫、そして視線誘導の考え方について言及します。

また、組み合わせ方によっては問題点も出てくるので、そこにも言及、解決策を提示します。

 

9305a-2

 

①川(近景)森(中景)建物(遠景)

②川(近景)建物(中景)森(遠景)
③建物(近景)川(中景)森(遠景)
④建物(近景)森(中景)川(遠景)

⑤森(近景)建物(中景)川(遠景)
⑥森(近景)川(中景)建物(遠景)

※作例はどれも「写真:空a」「写真:空b」「写真:森」を組み合わせたものを使用

 

 

9305-1

構図と視線の流れ

近景に川を配置した構図ですが、そのままぐるっと森を迂回して、森の後
ろ側へとつながっているような構成にしています。

 

〈イラストのメイン〉

メインは遠景の建物です。ただ、川岸に配置するだけだとあまりに目立たないため、高台を描いてその上に配置しました。

高台には、建物を強調するように背の高い針葉樹を追加しています。この針葉樹は、遠景のラインが横一直線で均一だったところにリズムをつける意味もあります。

 

〈視線誘導〉

視線の出発点は近景の水面の光の強い部分で、そのまま川に沿って奥へと進む流れを想定しています。
さらに、高台と森に挟まれた遠景部分を大きく薄くぼかして遠近感を強めた
ことにより、視線がすっと画面の奥まで流れるようにしています。

 

9305b-2

 

見る側の想像力をかきたてる

画面の左に位置する森と川は色が暗く、そのままだと画面が重くなります。
また、目を引くような情報もないため、無駄なスペースにもなりかねません。
そこで、森の奥へと続く道を作りました。これで暗さを逆に利用して情報量を増やした上、森の中に人が入っていける道があることから、「何かがあるかもしれない」という想像、妄想をかきたてる要素ともなります。
こういった妄想や想像は、イラストを実際の情報量以上に豊かに見せることにつながります。

 

 

9305-2

 

2 つの視線誘導

画面上で水面の占める割合が高いイラストになりました。このままでは、情報量が足りないと感じたので、水面に空の雲模様の反射させることで情報量の不足を補うことにしました。

 

〈イラストのメイン〉
メインは中景の建物です。建物もこれくらいの距離ならば情報量としては足りますが、念のために針葉樹を追加して強調しています。
さらに、広い空間にぽつんと存在するというロケーションが合わさり、イラストのメインとして成立しています。

 

〈視線誘導〉

この構図では、水面にきらめく光の筋を辿って、一直線に遠景まで抜けられる気持ちよさを意識しています。
しかし、これだけだと物足りなくなってしまうので、それとは別に、近景、中景、遠景それぞれに光が強く当たっている部分を作成して目を引かせ、視線をジグザグとダイナミックに動かせる気持ちよさを同居させています。

 

9305b-4

 

飽きさせない工夫

遠景に一直線に抜ける視線誘導がすっきりし過ぎると、せっかくのジグザグな視線誘導のほうに意識が向く前にイラストに飽きてしまいます。
そこで、細かい工夫として、視線の終着点である水平線の向こう側に山のシルエットを配置し、画面の抜け感をほんの少しだけ遮るようにしています。

山のシルエットにぶつかった視線は、標高の低くなる左側に向かって流れ、抜けていきます。
これで画面の抜け感を少しだけ抑え、結果的にイラストの飽きを緩和できます。

 

 

9305-3

 

アイレベルが重要な構図

近景に大きく建物を配置しているため、そのパースから外れてほかの部位を配置してしまうと不自然になってしまいます(これよりも建物が小さければ、ほかは自然物ばかりなのである程度はパースをごまかせます)。
そこで、まず建物の位置を決め、そこから逆算してアイレベルとパースを決定していきます。とくに重要なのはアイレベルです。

 

〈イラストのメイン〉
メインは近景の建物です。パースを決める上でも位置が重要になってきます。

〈視線誘導〉
近景の建物と付近の地面の明るい部分を進み、川の明るい部分に沿って遠景まで続きます。そして、川の流れに沿って右端に続き、遠景の森に行き着きます。
ここで工夫しているのが、遠景右側の森を画面奥(右から左方向へ)に向かって傾斜をつけて配置していることです。

元々空気遠近法を意識して右から左に向かって色を薄くているのですが、それに合わせて傾斜をかけることで、パースによって縮んでいるようにも錯覚させています。

これにより奥行きが強く出て、川辺の森のさらにその奥へと空間が続いていることを示唆し、視線も奥へと抜けていくことになります。

 

9305c-2

 

メインの情報量不足

メインの近景の建物ですが、少し問題があります。

構図的に左側が画面外に切れているので(切れていること自体は問題ありません)、その分の情報量が減ってしまい、壁面のディテールが少ないことも相まってメインとしては少し物足りなさを感じてしまいます。

解決策としては、窓や扉など、新しくディテールを追加すればよいでしょう。

 

9305-4

 

ロケーションの面白さ

「③建物(近景)川(中景)森(遠景)」と同じように建物が大きく写っていますが、ほとんど一部分しか写っていないため、パースを厳密に意識せずとも問題ありません。
また、左側の森、道の斜面、川の部分と大きく高低差が出るように、建物と同一平面上にほかの部分が存在していないような配置の工夫もしています。

 

〈イラストのメイン〉
このイラストはメインとなる部分が存在しませんが、「高台の街から見下ろす川(水面)」というロケーションの面白さで画面を構成しています。

 

〈視線誘導〉

近景右側から坂に沿って下りて行き、そこから川に沿って遠景の抜けている部分へと続いていきます。

坂をつなげずにところどころを隠しているのは、そのほうが距離感を感じるからです。

直接つながっていると見たままの距離にしかなりませんが、隠すことでもっと別の道筋を辿ってつながっているように感じさせることができます。
しかし、隠してもちゃんと道がつながるように配置しないと、視線が迷子になってしまい取り留めのないイラストになってしまいます。

 

9305c-3

 

見る側の想像力をかきたてる

視線の出発点あたりに幾何学的な形の影を描くことで、画面より手前にも建物が建っていることを示唆させています。

これにより画面外にまでイラストの広がりを感じさせ、画面内には少ししか建物を配置せずとも街の一部であることを意識させられます。

こういった工夫は、「② 川(近景)森(中景)建物(遠景)」で追加した森の道と同じように、見る側の想像力をかきたてるワクワク感へとつながります。

 

 

9305-5

 

明暗のリズムを意識する

メインとなる建物からの視線誘導で、暗い部分、水面の明るい部分へと続くので、明暗のリズム的な気持ちよさも味わえる構図です。
近景の森をかなり近い場所に配置することで、その次の中景の建物も前のほうへと配置できるようにしています(むしろ、森は最近景、建物が近景、
川の手前側が中景、対岸の森が遠景となるかもしれません)。

 

〈イラストのメイン〉
メインは中景の建物です。これくらい前に配置した建物なら、画面の占有
面積的にもディテール的にも、単体でイラストのメインを勤めることができます。「② 川(近景)森(中景)建物(遠景)」のように針葉樹などで情報量を補強する必要はありません。

 

〈視線誘導〉
近景左側の明るさを強くしたので、そこから視線の動きが始まります。そのまま、影の落ちている暗い部分を進み、ぽっかりと明るく抜けている水面へと出ます。水面の光の筋が伸びるように配置されているので、それに沿って遠景へと到達します。

 

9305d-2

 

視線誘導の問題点

一見問題のない構図に見えますが、視線の終着点に問題があります。

遠景に到達したところで、少しだけ見える川の続きに沿って右の薄く霞んだほうへと視線を誘導しようとはしているのですが、これは、ほぼ横方向の移動となってしまい、奥へと進んでいません。

 

近景や中景で視線が移動している途中ならば横移動も悪くないのですが、視線が到達する終着点でこうなってしまうと、「画面の抜け」を感じることができず、奥行きの物足りなさや、狭苦しさを感じさせてしまいます。

解決策としては、どこか一部分でいいので遠景の森のラインに低い部分を作れば、そこから奥へと視線が抜けることになります。

 

 

9305-6

 

反面教師的な構図

問題点がいくつかあるため、反面教師的な構図になります。

 

〈視線誘導〉
近景の地面を出発点にそのまま川を経由し、建物を辿って左奥へ流れていくようにしています。中景にも森を配置したのは、そこに障害物がないと左奥まで一直線に視線が飛んでしまうためです。それでは視線の移動が単調で物足りないイラストになってしまいます。

 

〈イラストの問題点〉
このイラストの問題点は、メインとなる見せ場がないことと、森の占有面積の過剰さです。

近景の森は、とくに見せるべきところがない割には画面の占有面積ばかり大きく、無駄な配置となっています。「② 川(近景)森(中景)建物(遠景)」と同じようにに森の中を描写していますが、近景にこれだけではとても見せ場にはなりません。
中景の川もとくに情報量が多いわけではなく、そもそも森のせいで右側が大きく隠れてしまっているため川の流れもうまくつかめません。
建物には針葉樹を追加し、少しは視線を集められるようにはなっていますが、これだけではとてもメインとなる派手さは出せません。

 

9305d-4

問題の解決策

問題点の解決策としては、森の部分に目を引く情報を加えるのが面積的にも一番です。

たとえば、新たに建物を追加するのがいいでしょう。

イラストのメインがないというだけなら、「⑤ 川(近景)森(中景)建物(遠景)」のように遠景の建物をなんとかして目立たせる手もありますが、それでは近景の森の占有率問題は解決しません。

 

フォトバッシュ(Photobash)とは

 

冒頭で述べたように、「フォトバッシュ」とは複数の写真を貼り込んで組み合わせ、1 枚のイラストを制作する技法です。

 

写真を利用するというと、昔からコラージュという技法が存在しています。

しかし、それはあくまで元からある写真をそのまま組み合わせ、そこに少々加筆する程度のものです。

 

昨今は、デジタル描画環境の普遍化により、貼る写真そのものを加工することや、写真から作り出した素材を活用することができるようになりました。
写真の利用と描画の境がより曖昧になり、その両方を組み合わせて一つの技術、技法として成立するようになったのです。

 

しかし、写真はあくまで写真としての独自の存在として成り立っているため、単にイラストの中に組み込んでも独立してしまい、異物にしかなりません。

その異物感を払拭し、しかし説得力だけはうまく利用する。そのための技術が「フォトバッシュ」です。

 

 

写真の権利について

フォトバッシュの基本かつ最も重要な点となるのが、使用する写真の用意です。
写真は被写体にも、写真そのものにも「権利」が発生しています。そこをクリアしないまま使用してしまえば、肖像権や著作権への違反となり、罰せられてしまいます。

最近では、写真の無断使用が発覚し、その責を追及されるケースも増えてきています。

 

このような背景から、仕事としてのイラスト制作依頼の場合、クライアントから事細かく写真の出どころについて追及されることも多くなってきました。

ネット上で無償で公開され、使用の許可も与えられている写真も多く存在しますが、そのような写真がほかの権利団体に買われ、そちらで新たに権利が発生した結果、使用できなくなってしまうというケースもありました。

 

当然、そのことを知らずにその写真を使用すれば問題となります。
イラストに写真を使用する場合、「自分で撮影した写真」や「友人知人が撮影した写真で正式に許可を取ったもの」に使用の幅を制限するのがよいでしょう。

 

ABF2110
▲公道から筆者自身が撮影した写真は原則許可がいりません

 

ABF2113

▲交差点の風景全体なら問題ないが、看板などでビルが特定できるような使い方の場合は注意が必要

 

※本講座記事は風景イラストを描くための画面構成の考え方、厳選されたCLIP STUDIO PAINT PROのテクニックを学び、誰しもがフォトバッシュで風景イラストを描けるようになることを目指した一冊『フォトバッシュ入門 CLIP STUDIO PAINT PROと写真を使って描く風景イラスト』より内容を特別掲載頂きました。

 

書籍内ではここで解説している構図・レイアウトの考え方を元に、実際に多くの写真を使用して自然物からSF的な背景まで様々な風景イラストを描いていきます。

『フォトバッシュ入門 CLIP STUDIO PAINT PROと写真を使って描く風景イラスト』は、ペイントツール「CLIP STUDIO PAINT PRO」を使い、フォトバッシュで風景イラストを描くための技法書です。

複数の写真を組み合わせて風景イラストを描くフォトバッシュ技法の基礎、さらに写真を元に作成したテクスチャ素材の使い方や写真をイラスト風に見せるテクニックなど「写真を使った風景イラスト制作のテクニック」を網羅。美麗な背景描写で知られるゾウノセ先生の発想・テクニックを余すところなく披露します。

9306hyoushi

『フォトバッシュ入門 CLIP STUDIO PAINT PROと写真を使って描く風景イラスト』

〈著者紹介〉

■ゾウノセ
多摩美術大学日本画科修士課程修了。ゲーム会社でのアートデザイン業務を経て、現在フリーランスで活動中。
ゲーム『神撃のバハムート』(株式会社Cygames)、『御城プロジェクト:RE ~CASTLE DEFENSE~』(株式会社DMM.com ラボ)などのソーシャル、ブラウザゲームのイラスト制作、『パックワールド』(http://pacworld.channel.or.jp/)、『コング/猿の王者』(http://netflix.jp/kong) の背景デザインに参加。『東方景技帖 -東方Projectで学ぶ背景イラストテクニック-』(玄光社)のメイキングイラストなどを手掛ける。
著書に『ファンタジー風景の描き方 CLIP STUDIO PAINT PROで空気感を表現するテクニック』のほか、『動きのあるポーズの描き方東方Project編 東方描技帖』(玄光社)がある。

 

■角丸つぶら
物心ついてからずっとスケッチやデッサンに親しみ、中学と高校では美術部部長を務める。実質はマンガ研究会兼ガンダム懇談会と化していた美術部と部員を守護し、現在活躍中のゲームやアニメ関係のクリエーターを育成。自身は東京芸術大学美術学部で映像表現や現代美術全盛の中、油絵を学ぶ。
『カード絵師の仕事』『ロボットを描く基本』『人物を描く基本』『人物クロッキーの基本』の編集や、『萌えキャラクターの描き方』『マンガの基礎デッサン』シリーズの監修など、国内外100 冊以上の技法書制作に関わっている。
CRIP STUDIO PAINT EX

このカテゴリの今日の人気記事

おすすめ記事

CRIP STUDIO PAINT PRO
CRIP STUDIO PAINT EX
初心者のためのマンガ制作講座

必要な道具、制作の流れなど、デジタルで漫画を描くのがはじめての人向けの基本的な情報をお届けします。

マンガ上達講座

漫画制作のクオリティやスピードをさらに上げる、上達のためのさまざまなテクニックをご紹介します。

プロ漫画家のお仕事

現場で活躍されているテクニックや漫画家さんの素顔に迫る記事など、プロの仕事に関する情報をお届けします。

便利情報

ジャンルにとらわれない、作品制作に役立つさまざまな情報などをご紹介します。