枝豆キャラクターイラスト

イラストと写真の合成でクリエイティブな絵を描こう! メディバンで作る、おもしろデジ絵メイキング

投稿日:2018年11月29日 更新日:

セム
こんにちは、セム(@ssem1622)です。

さて、前回の記事でご紹介した豆カレ2019、写真とイラストのコラボというテーマで展開しているのですが、

2019_豆カレ サンプル画像

こういうの、どうやって作るの?

と気になる方も多いはず。ということで今回の記事では豆カレ2019の舞台裏をお見せする形で、どのようにしてカレンダーイラストができたのかをご紹介していきたいと思います。ちなみに使用アプリは毎度おなじみメディバン(Android版)で、PCでの作業はゼロ、スマホ(Huaiwei P10)のみを使って描きました。

PCを使わずにスマホだけでイラスト描く方法を学ぶには

ざっくりとした流れとしては、写真を選んで、そこにイラストを描き、最後に一部を見えなくしたり、影を入れたりしてなじませます。

今回の記事ではカレンダーイラストのメイキング、という形で作業の内容を順を追ってご説明していきます。なお、本記事ではデジタルイラストについて基礎知識をお持ちの方向けに作成しています。(対象レベル: セムのデジタルイラスト講座を受講した方)

デジタルイラストに必要な最低限の知識とお絵描きアプリの操作方法を学びたい方はこちらをチェック

それではスタートです!

背景写真の準備

どんな写真にイラストを合成するか、考えるのはとても楽しい作業です。わたしの場合、ここに豆が出てきたら楽しいかも、ということでそのための写真をわざわざ撮影したりもします。写真を手に入れる方法は大きくわけて2つあり、オンラインでダウンロードする方法と自分で撮影する方法があります。

オンラインでダウンロード

ダウンロードする場合はストックフォトサービスやフリー素材サイトを活用すると便利です。プロやセミプロが撮影し、補正までされたきれいな写真が手軽に手に入ります。ただし、作成した最終画像を販売したり、オンラインへの公開(ブログ掲載など)を予定している場合は、商用利用ができるかどうか、また写真の加工が許可されているかどうかを必ずチェックしましょう

商用利用OKで無料どころだとぱくたそがおすすめですが、みんなが使ってるというのがネック。ちなみにわたくしセムの場合、これは商用OK?などといちいち考えるのが面倒なので、有料のストックフォトサービスを使っています。

自分で撮影した写真を使う

スマホでパシャ! これなら著作権周りのことを気にしないですみます。Instagramにアップした写真を再利用するのもおすすめです。ただし、他人の顔が写ってる場合はモザイク加工するなり許可をとるなりしたほうがいいでしょう。

ちなみに今回使用している写真は自分で撮影したものです。セムダー著作の本、『人生の夏休み』の表紙画像にも登場した南の島の海の写真を使用しています。

セムダーの書いた本の内容が気になる方はこちらをチェック

写真を補正する

使う写真が決まったら、写真を補正しましょう。ここで行う作業はサイズ調整とフィルタ加工です。

リサイズ(サイズの変更)

ちなみに画像サイズが大きすぎると作業中にメディバンアプリが固まってしまうことがあります。それを防ぐためにも、できる場合は事前にファイルサイズを調整しておきましょう。

最終の書き出しサイズにあわせて画像をクロップしておくとあとから作業がラクになります。最近の写真加工アプリは目的に合わせて写真をクロップ(切り抜き)する機能がついています。

セム
ちなみにわたしはAdobeのPhotoshopアプリを使っていますが、他のアプリにもそのような機能があるのでお気に入りのアプリを探してみてくださいね。

フィルタ加工

Instagramなどの写真加工アプリを使ってフィルタをかけるとおもしろい効果が生まれます。また、Googleフォトが時々がっつり補正をかけてくれる写真を提案してくれるので、それを使ったりもします。フィルターをかけたら、あとはそこに描いていくだけです。

イラストを描く

準備が整ったら、ここからはメディバンでの作業です。

画像を取り込む

写真の調整が終わったら、メディバンのキャンバスに画像を取り込みます。取り込み後、すぐにこのレイヤーにロックをかけておきましょう(ロックにチェックを入れる)。そうすることで、作業中に誤って動かしてしまったり、線を描いてしまうのを防ぐことができます。

背景写真を取り込み、ロックをかける

ラフスケッチ(下書き)を描く

先程の背景画像レイヤーのすぐ上にレイヤーを新規作成し、下書きレイヤーにチェックを入れてそこにラフスケッチを描いていきます。

ラフを描くときに光の方向をチェック

下書きレイヤーとは?

下書きレイヤーにチェックを入れておくと、2つのメリットがあります。

  • 出力の際に無視される
  • バケツ塗りなどの際に、その部分をキャンバスとして参照しない
セム
ここですぐに描き始めたい気持ちはよーくわかりますが、ひとつやっておく作業があります。

ラフを描き始める前に、まずは背景画像をしっかり観察します。一番大事なポイントは光の方向です。この写真の場合、一番メインの光は太陽光です。ここでは画面の奥側、左上の方向から光が降り注いでいるので、参考のために矢印を描き入れました。

光の方向を確認したら、続いてざっくり、この位置にこのくらいのサイズでこの絵を描こうみたいなアイデアを描き入れていきます。空を飛んだり、絵を描かせてみたり…写真だとできないような非現実なポーズをとらせてみるのも面白いです。

セム
ちなみにラフを描く際に背景色の補色や日頃イラストで使わない色を使って描くと作業しやすいです。

線画・色塗り・影入れ

先程のラフレイヤーの不透明度を下げて、その上にレイヤーを新規作成し、線画を描いていきます。ここからは本番の線になります。線画が描き終わったらその下にカラーレイヤーを追加し、色塗りをしていきます。

色塗りの際はカラーマットを活用しよう

色塗りをする際に、カラーマットを敷いておくのがポイントです。このカラーマットも出力しない参照用のレイヤーなので、下書きレイヤーにチェックを入れておきます。

カラーマットの作り方は簡単で、キャンバス全体をバケツ塗り(レイヤー参照)で塗るだけです。これを1枚敷いておくだけで、塗り残しなどが簡単にチェックでます。

セム
イラストで使わない色を選ぶのがポイント。セムは紫をよく使います。

色塗りまで終わったら、立体感を出すために影を入れましょう。

光の方向と位置の関係

人間の目は影の位置や濃さで立体感や遠近感を感じることができます。最初にチェックした影の方向に合わせて画像に影を入れると立体感が出ます。

わたしのイラストでは影はグレーで入れ、ブレンドを乗算にして仕上げています。影入れの際にはカラーレイヤーに対してクリップをかけると色が塗られているところにだけ影が入るので便利です。

セム
ここらへんは適当にサクッとやっています。方向さえ間違えなければそこまで目立たないので、ざっくりと影を入れましょう。

写真とイラストをなじませる(合成)

イラストが描き終わったら、今度はイラストと背景をなじませる工程です。

絵が描き上がったら、写真上にあるものとイラストの位置関係をチェックします。ちなみにかぶった部分があったほうが画面に遠近感を出せます。

ここでは海>イラスト(豆)>ロープという重なり方を演出したいと思います。ということはロープはイラストよりも手前に来るので、ロープ部分にかぶったところのイラストを見えなくしなければなりません。

マスクレイヤーを使ってかぶった部分を消す

ここで登場するのがマスクレイヤーです。マスクレイヤーとは黒で塗った部分を隠す(透明にする)機能です。画像に直接消しゴムをかけるのと異なり、隠すだけというのがポイントです。元のファイルには修正を加えないので、いつでもやりなおしがきくのがポイント。今回はこのマスクレイヤーを使っていきます。

マスクレイヤーを追加する

この便利なマスクレイヤーなのですが、ひとつだけ難点が…というのも、マスクがかけられるのは1枚のレイヤーに対してのみ。複数レイヤーで構成されているフォルダに対してマスクをかけることはできません。となるとフォルダ内の内容をすべて結合する必要があるのですが、そうしてしまうと後から細かい修正を行うのが難しくなります。

セム
大丈夫、解決方法はあります。

こうすればOK!

フォルダを複製>元フォルダを非表示にする>複製したフォルダのみ「フォルダ内を結合」する

こうすることで線画と色と影が1つのレイヤーにまとまるので、それにマスクレイヤーをかけて背景とかぶった部分を消して(隠して)いきます。

ここまで準備ができたら、あとは黒ペンを使ってイラストの一部を透明にしていきます。ここではロープの上をなぞるように黒ペンで線を入れることで、イラストの下にあるロープが見えるようになります。

マスクレイヤー上では黒で塗った部分が透明になる

背景に落ちる影を描く

最後に、背景に落ちる影を入れていきます。

背景画像のすぐ上に新規レイヤーを作成し、ブレンドを乗算に変更後、グレーで影を入れていきます。

写真の中の光とイラストの光の方向があっていないと見る人に違和感を与えてしまうので、写真の光の方向と合わせるのがポイントです。最初の下書きの際にチェックしておいた方向を意識して影を入れていきましょう。

出力して完成!

最後に一番最初にかけた背景画像レイヤーの下書きチェックを外して、ファイルを出力すると完成です。

こうしてできあがったのがこちら!

まとめ

長くなりましたが、このような流れを12回繰り返して12ヶ月分のカレンダーイラストを完成させました。現実の中にバーチャルなイラストが入ることにより、おもしろい効果が生まれますのでぜひ試してみてくださいね。

繰り返しになりますが、このイラストはPCを一切使わず、スマホのみで作成しています。このようにスマホのみで完結するデジタルイラストの描き方をわかりやすい動画を用いて教えていますので、デジタルイラストに興味のある方はこちらもぜひチェックしてみてください。

スマホのみで完結するデジ絵の描き方を学ぶには

豆カレ2019販売ページに移動する!

X-lift_test_180229

  • この記事を書いた人

セム(@ssem1622)

韓国ソウルの某企業で日本マーケティング統括として働く豆(育休中)。Udemyでイラストを教えたりなど、コンテンツを作って収益化するのが趣味であり仕事。 プロフィール詳細ページはこちら

-枝豆キャラクターイラスト
-, , , ,

Copyright© 枝豆ブログ、略して豆ブロ , 2018 All Rights Reserved.