オリジナルのイラストが描けると色々な場所で自由に使えるようになります。
たとえばブログで使用したり、SNSのアイコンにも著作権を気にせず使えます。
前回の記事で手作りカレンダーの作り方を紹介しましたが、カレンダーに自作のイラストをプラスするとオリジナリティがあってさらにいい感じになります。
関連:カレンダーを自作してロック画面に表示したい！アイビスペイントで作る方法
イラストなんて描けないという方でも、簡単なのにちょっと本格的に見えるイラストが描ける方法があります。
しかもスマホで描けます。
私もイラストはほぼ描けませんが、こんな感じで簡単なイラストを作成できました。
これは無料で使えるお絵描きアプリのアイビスペイントを使ってiPhoneで描きました。
アイビスペイントでなくても、基本的なイラストが描けるアプリなら、デジタルならではの面白い方法で同じように描けます。
というわけで、今回は絵が描けなくても描ける、こんな感じのベタ塗りのイラストをスマホで簡単に描く方法を紹介します。
描きたいイラストのモデルの写真を読み込む
今回はアイビスペイントでイラストを描く方法を紹介します。
アイビスペイントがスマホに入っていない場合はインストールしましょう。
まず、イラストにしたいものの写真を用意します。
今回は、以前に絵手紙を書くときにも利用したこのフリー素材のりんごの写真を使います。
写真はフリー素材のサイトの写真や、自分で撮影したものなど何でもＯＫです。
キャンバスを選ぶ
写真が用意できたらアイビスペイントに写真を読み込みます。
アイビスペイントを開き、「マイギャラリー」→左下の「＋」マークをタップします。
次にキャンバスサイズを選択します。
一番上に現在選択されているキャンバスサイズが表示されます。
変更したいときは下に表示されている使いたいキャンバスの形を選択してください。
キャンバスの形は作成したいイラストに合わせたり、利用する用途に合わせて選択してください。
キャンバスの形の横のピクセル数が大きいほど画質は良くなりますが、画像のサイズも大きくなります。
イラストを大きく使用したいなら大きい数字に設定し、アイコン用など画像のサイズが小さくてもいいなら、ピクセル数が少ない「SD」サイズでも問題ないと思います。
写真をキャンバスに読み込む
キャンバスサイズを選択するとキャンバスが開きます。
ここに写真を読み込むには、下のツールの中の右から２番目の紙が重なったところに数字が書かれたレイヤーアイコンをタップします。
レイヤー画面の左にあるカメラのアイコンをタップするとスマホのアルバムから写真を選択できるので、イラストにしたい写真を選択します。
「画像読み込み」ウインドウが出たら「キャンセル」をタップします。
するとキャンバスに写真が表示されます。
この写真をなぞってイラストを描くので、イラストにしたい部分がキャンバスに収まるように画像を拡大・縮小・移動します。
画像の周りの枠の角を引っ張ると拡大・縮小でき、一本指で画像をドラッグすると移動できます。
キャンバスに画像を配置できたら「移動変形」のウインドウの緑のチェックマークをタップすると画像が固定されます。
もう一度移動したいときは、下のツールバーの左から2つ目のブラシのアイコンをタップし、「移動変形」をタップするとまた同じように移動できます。
これで写真を配置できました。
次にこの写真をもとにイラストを描いていきます。
イラストを描く
色を抽出する
はじめに、イラストに使用する色を用意します。
イラストを描くときは写真の透明度を下げて薄くして上からトレースするので、その前に写真から色を抽出します。
まず、写真のレイヤーに直接描かないようにレイヤーを追加します。
下のツールのレイヤーアイコンをタップして「レイヤー」を開き、「＋」をタップします。
すると現在選択しているレイヤー（写真のレイヤー）の上に新規レイヤーが追加されます。
現在選択中のレイヤーは薄い青になっています。
新規レイヤーを追加すると新規レイヤーが選択されるので、そのままレイヤー画面を閉じてキャンバスに戻ります。
このレイヤーに、抽出した色を置いておきます。
では写真からイラストに使いたい色を抽出していきます。
下のツールの左から2つ目のブラシアイコンをタップし、出てきたメニューから「スポイト」を選択します。
するとブラシアイコンがスポイトのアイコンに変わります。
このように、ブラシアイコンの部分には現在選択中のツールが表示されます。
写真からでも抽出できて便利です。
写真の中の使いたい色の部分をタップします。
するとタップしたところの色が吹き出しで表示され、下のツールバーのブラシの色が変わります。
このとき、指を離さないでスライドさせると色がどんどん変わります。
好きな色のところで指を離すとペンの色が決定します。
同じものでも光の当たり具合などで全然違う色になっていますね。
色を抽出すると、自動でスポイトがブラシに変わります。
スポイトは1回色を抽出するたびにその前のツールに戻るので、もう一度色を抽出したいときは再度スポイトを選択してください。
使う色を準備する
ブラシの色は直前にスポイトで抽出した色になっているので、このままキャンバスの空いているところに簡単に色を付けておきます。
この色を後でスポイトで抽出してイラストを描くので、絵を描かない端の方に色を塗ってください。
今はただ色を置くだけなので、ブラシは何でも大丈夫です。
ブラシが細いと色がよく見えないので、ブラシのサイズを大きめにするといいです。
同じように、他に使いたい色もスポイトで抽出してこんな感じで同じレイヤーにまとめて塗っておきます。
イラストを描きやすくする準備
イラストを描くためのレイヤーを追加します。
イラストを描くレイヤーを追加する
「レイヤー」を開き、「＋」をタップして新規レイヤーを追加します。
写真の上から描くので、写真のレイヤーより上になるようにしてください。
もし新規レイヤーが下になっている場合は、新規レイヤーの右側の薄い「三」のマークを長押ししながら写真より上に移動させます。
写真を薄くする
次に、写真の入ったレイヤーをタップして選択し、下の不透明度のスライダーを半分以下くらいまで下げます。
すると写真が薄くなり、上からなぞって描きやすくなります。
そしてさっき追加したイラストを描くレイヤー3をタップして選択し、レイヤー画面を閉じます。
今回のような簡単なイラストならあまり気にしなくても大丈夫ですが、別のレイヤーに描いているつもりで同じレイヤーに描くと、後で修正したり変更したりするのが難しくなってしまうからです。
選択中のレイヤーの番号は、レイヤー画面を閉じているときは下のレイヤーアイコンに表示されています。
アイビスペイントはレイヤーを何枚でも使えるので、できるだけパーツごとにレイヤーを分けると使いやすいです。
イラストのベースの輪郭を描く
スマホの画面に指で描くのは難しく感じるかもしれませんが、後から修正もできるのでそんなに正確に描かなくても大丈夫です。
また、綺麗な円を描くツールもありますが、今回は手書き風にしたいのであえていびつな円のままにします。
線のブレを小さくする設定
線のブレを少なくする方法はあります。
画面の上部の手のアイコンをタップし、「手ぶれ補正」のスライダーを大き目にしておくとブレが少なくなります。
ブラシを選択する
ではまず、りんごの輪郭を写真に沿って描いていきます。
色は抽出したりんごの色を使うので、下のブラシアイコンをタップして「スポイト」を選択し、さっき塗っておいたりんごの色をタップするとブラシの色になります。
ブラシは下のツールの左から3番目の丸いアイコンをタップすると選択できます。
鍵マークのペンは、広告を見ると4時間無料で使えますが、今回は無料でそのまま使えるブラシで大丈夫です。
使うブラシの種類は、今回は輪郭をなぞるだけなので線が書ければどれでも大丈夫です。
ただ、エアブラシなどは線がぼやけてしまうので、「ペン（ソフト）」のようにくっきりと描けるものにしてください。
ブラシの太さは下のスライダーで調整できます。
ブラシを選択したらもう一度ブラシアイコンをタップしてキャンバスに戻ります。
では描いていきましょう。
輪郭を描く
線が指で隠れてしまって正確になぞれなくても大丈夫です。
塗りつぶすために隙間が空かないようにりんごの輪郭を1周描いてください。
もう少し細い方が描きやすいかもしれないです。
でも、結局中を塗りつぶすので線の太さ自体はあまり関係ないです。
描き直したいときは、画面の上部の戻るボタンを押すか、2本の指で画面をタップすると一つ前の作業に戻れます。
写真を非表示にする
次に、今描いた輪郭を塗りつぶします。
塗りつぶしするとき、下に写真があるとこんな風に写真に合わせて塗りつぶしされてしまって綺麗に塗りつぶせません。
なので写真を非表示にします。
レイヤーを開き、写真のレイヤーの目のマークをタップし、写真のレイヤーが非表示になったらレイヤー画面を閉じます。
塗りつぶしをする
塗りつぶしはバケツツールでできます。
左から2つ目のブラシアイコンをタップし、バケツのアイコンをタップします。
するとブラシアイコンがバケツアイコンに変わり、この状態で塗りつぶしたい部分をタップすると、タップした範囲が塗りつぶされます。
このとき、塗りつぶす輪郭の線に隙間があると外側も全部塗りつぶされてしまうので、輪郭を描くときに隙間が空かないように書いてください。
もし全部塗りつぶされてしまっても、戻るボタンで戻ればやり直せるので大丈夫です。
描いた形を修正する
ここで輪郭を修正したいときは修正します。
描いたものの形を修正するには、左から2番目のアイコンをタップし、「移動変形」をタップします。
メッシュ変形をタップすると網のように変形できるポイントが表示されます。
角の点を動かすとイラストの形を変形させることができます。
このメッシュの数を下のスライダーで増やすと細かく形を修正できます。
メッシュの角にある点を動かすと、描いた絵を変形させることができます。
なので、ここである程度きれいな形に修正してみてください。
できたら下のウインドウの緑のチェックマークをタップして終了します。
他のパーツも描く
次に、りんごのヘタ？の部分を描きます。
りんごの輪郭のレイヤーの上に新規レイヤーを追加します。
そしてりんごの輪郭を描いたレイヤーの目のマークをタップして非表示にして、写真のレイヤーの目のマークをタップして写真を表示させてください。
新規レイヤーが選択された状態でレイヤー画面を閉じます。
このレイヤーにはりんごのヘタの周りの黄色い部分を描きます。
バケツアイコンをタップして「ブラシ」（①）を選択しブラシに戻したあと、もう一度「スポイト」（②）を選択します。
スポイトになった状態で、りんごのヘタの黄色い色から抽出した色をタップします。
するとスポイトがブラシアイコンに変わるので、りんごの黄色いヘタの輪郭をブラシで描きます。
小さい部分を描くときは、ブラシを細くして画面を拡大すると描きやすいです。
これも塗りつぶせるように隙間を空けないで描きます。
描けたら、レイヤーを開いて写真を非表示にして戻り、ブラシアイコンをタップして塗りつぶしのバケツをタップし、ヘタの中を塗りつぶします。
ちなみに記事の始めに紹介した絵を描いたときは、りんごの輪郭を描くときにヘタの部分も赤で描いて一緒に塗りつぶしていました。
この方がりんごっぽくなりますね。
こっちの方が手間が少なくておすすめです。
次にレイヤーを開き、ヘタの上に新規レイヤーを追加します。
そしてヘタのレイヤーを非表示にし、写真のレイヤーを表示します。
バケツアイコンをタップしてブラシを選択します。
もう一度ブラシをタップしてスポイトを選択し、細い枝の色をタップして抽出したら枝を描きます。
細いのでブラシのサイズを細くすると描きやすいです。
描けたらレイヤーを開いて写真を非表示にし、ブラシアイコンからバケツを選択して枝の中を塗りつぶします。
塗る範囲が狭いとブラシのまま塗りつぶしてもいいですが、はみ出しやすいのと、塗り残しができやすいのでバケツで塗りつぶすと簡単です。
同じようにして、枝の下に新規レイヤーを追加してヘタのへこんだ部分の影も描いて塗ります。
影と光を付ける
「影と光」ってなんかかっこいいですね。
りんごの下側の暗くなった部分を暗い赤で塗ります。
こうするとベタ塗りなのに立体的になります。
クリッピングをする
レイヤーを開いて新規レイヤーを追加し（①）、りんごのベースのレイヤーのすぐ上に移動します（②）。
そして下の方にある下に曲がった矢印をタップ（③）します。
すると、新規レイヤーが少し右にずれて下のレイヤーに矢印が向きます。
これはクリッピングマスクといって、矢印が向いているレイヤーに描かれた部分以外には描けなくなり、色を塗るときなどにはみ出さずに塗ることができます。
ただし、同じレイヤーで色を変更するので後で修正がしにくくなります。
クリッピングしたら、
- 非表示になっているりんごのベースのレイヤーをタップして選択し、
- 目のマークをタップして表示させ、
- 下の方にある不透明度のスライダーを左に移動して色が透けるようにします。
これは影を描くときに下の写真が透けて影を描きやすくするためです。
薄くするんじゃなくて非表示にしてもいいんですが、イラストが写真と全く同じ形ではないので、イラストのりんごに合わせて影が描けるように薄く表示します。
輪郭のレイヤーにクリッピングした新規レイヤーをタップして選択し、レイヤー画面を閉じます。
この状態でりんごの下側の暗い部分を塗ります。
左から2つ目のツールのアイコンがブラシになっているのを確認して、ブラシをタップしてスポイトを選択し、りんごの暗い色をタップして抽出します。
ブラシの太さを太くし、りんごの下側の暗い部分を塗ります。
影を付ける
次にりんごの影を描きます。
レイヤーを開いてりんごの輪郭のレイヤーを選択し、不透明度のスライダーを一番右に戻します。
そして新規レイヤーを追加し、輪郭のレイヤーのすぐ下に移動します。
こうすると、影を描くときに影がりんごに隠れます。
ブラシをタップしてスポイトを選択して影の色をタップします。
ブラシの太さを太くし、りんごの下に影を描きます。
りんごに重ねて塗っても、レイヤーが下なので重ならなくなっています。
光を入れる
最後に、りんごの光っている部分を描きます。
新規レイヤーを追加し、輪郭にクリッピングしたレイヤーの上に移動します。
写真が見えるように輪郭のレイヤーを非表示にし、レイヤーを閉じます。
ブラシをタップしてスポイトを選択し、りんごの光の色を抽出します。
そしてりんごの光っている部分の輪郭を描いて写真のレイヤーを非表示にして、中を塗りつぶします。
これで全部描き終わりました。
全てのパーツを表示させる
最後に、写真とサンプルの色のレイヤーを非表示にし、りんごを描いた全てのパーツを表示させます。
こんな感じになりました。
意外と本格的なりんごのイラストですよね。
イラストを保存する
最後に、完成したイラストを保存します。
キャンバスの下の一番右の左向き矢印「←」をタップし、「画像を保存」をタップします。
- ファイル形式は「PNG」で
- 背景を付けたいときは透過をオフ
- 背景なしで保存したいときは透過をオン
にして「OK」をタップするとスマホのアルバムに保存されます。
まとめ
工程が多く感じるかもしれませんが、実際に描いてみると意外と簡単だと思います。
コツは、できるだけパーツを少なく単純に描くことです。
このやり方を覚えておくと、イラストを描くのが楽しくなります。
写真をトレースではなく、見ながら描いてもいいですね。
ベタ塗りのイラストは技術やセンスも大事な要素ですが、イラスト初心者の方でもとりあえず一つの絵を簡単に完成させることができるので、まずは身近なものを描いてチャレンジしてみてはどうでしょうか。
コメント