イラレでイラスト。

たまにAdobe Illustrator(以下、イラレ)を使ってイラストを描いてるのですけれど、最近コツが掴めてきたというか、イラストを描く手順(段取り?)がパターン化してきたので、まとめてみたいと思います;D。なので、イラストの描き方といっても、カタチの取り方とか、パースとかアイレベルの話はなくて、イラレのツールの使い方とか、機能の紹介がメインになります。

以下は目次です。クリックすると各項目へ移動します。

※記事中ではイラレのバージョンはCC 2014を使ってます。

まずは下準備。

イラレで描き始める前にまずは下準備。紙とシャープペンを用意して、ラフにスケッチです:)。

下描き

トにもカクにもまずは下絵。たくさんラフスケッチします。
描いた下絵をスキャンして(※カメラで撮って読み込んだり、スマホで撮って送信してもよいです)、まずはPhotoshopで開きます。ラフなスケッチなので線が曖昧です。線に曖昧なところがあると、イラレで清書するときに迷っちゃうので、Photoshop上でちょっと補正しておくんです。※ラフスケッチの段階でちゃんとしとけばこの工程は省けますね…。
ラフスケッチの中から描きたい絵を決めて、そいつだけ切り抜きます。
ツールパネルから切り抜きツールを選択して、描きたい絵の部分を囲って、角度を調整したらenter

切り抜きツールで切り取る

おもむろに「レイヤー」→「新規塗りつぶしレイヤー」→「べた塗り...」を選択して、「べた塗り」レイヤーを作ります。べた塗りは「塗り」を50%くらいに薄くして、下絵がうっすら見えるくらいにしたら、レイヤーをもうひとつ増やして、そこにブラシツールを使って下絵をなぞる感じで上描きしていきます。適当にシャッと描いてた首元のあたりとか、清書する時に迷わない程度に、線を整えます。

下描きの線を整える

ちゃんと描けたら、べた塗りを100%に戻してから「画像を統合」して、これをjpg形式で別名保存command+shift+Sします。

焼き立てパンちゃんをjpg形式で保存

イラレに配置

イラレを開いて、command+N新規ドキュメントを開きます。
印刷用に描こうと思うので、プロファイルのところは「プリント」とします。これで、A4サイズで、カラーモードがCMYKの新規ドキュメントが開きます。

開いてすぐさま「ファイル」→「配置...」と選択し、配置するファイル(ここでは「焼き立てパンちゃん.jpg」)を選んだら「テンプレート」にチェックを入れて「配置」をクリック。

下絵をテンプレートとして配置するとトレース用のレイヤーが作られる
レイヤーオプション

すると、新たに「テンプレート 焼き立てパンちゃん.jpg」というレイヤーが作られて、画像はウィンドウの中央に配置されます。しかも、トレースしやすいように、淡い色で表示されてレイヤーはロック済みなのです:D。といっても特別なレイヤーってわけではなくて、レイヤー名の後ろあたりをダブルクリックすると開くレイヤーオプションパネルから、画像の表示濃度とかを調節できます。「テンプレート」のチェックを外せば、いつものレイヤーにも戻せますよ!

下絵がちょっと小さめなので、テンプレートレイヤーのロックを外して、下絵を少し大きくしておきます。拡大・縮小ツールにしてからenterを押して拡大・縮小パネルを開き、「縦横比を固定」のところに拡大率を入力して「OK」。ここでは300%に拡大しました。

イラストを描くためのレイヤーを用意する

そんでもって、テンプレートレイヤーの上に、新たに4つレイヤーを用意します。
ひとつはすでにある「レイヤー 1」のレイヤー名を「bg」に変えます。あともう3つレイヤーを追加して、一番上のレイヤーに「line」、二番めは「shadow」、三番めは「color」とします。それぞれ「線画を描く用のレイヤー」、「影を付ける用のレイヤー」、「色を塗る用のレイヤー」、「背景色を塗る用のレイヤー」として使います。

レイヤーの重なる構造図

あとは、レイヤーの色も替えておきます。
この色は、レイヤーオプションパネルの「カラー」ってところで替えられます。ここで指定した色が、パスを選択した時の境界線の色になるのでけっこう大切かなと思ってます(個人的に「サーモンピンク」「ゴールド」「ピーチ」「グラスグリーン」「ベージュ」の並びがお気に入り)

レイヤーはレイヤーパネルの見た目通り、上から順に重なるようになるので、左図みたく重なるって寸法です:)。

目次に戻る

イラレで清書。

イラレに下絵を配置するまではいつも同じ手順なのですが、イラレで書き起こす際に、タッチ(?)の違いで3パターンくらい手順が分かれるので、ここからはタッチごとにひとつずつ紹介してゆきます;)。

記事内で出てくるイラレのパネルの位置とかは、「ウィンドウ」→「ワークスペース」の中の「プリントと校正」というのに設定してます:)。
ワークスペースについて詳しくはこちらを参照のこと。

線で描くイラスト

ひとつめは、パスを使ったイラスト。主にペンツールを使います。
ペンツールは、点と点をつないで線を描くツール。

イラレで描く線の仕組み

点のことをアンカーポイント、つないで出来た線画のことをパスと言って、アンカーポイントからアンカーポイントまでの一部分の線のことは特にセグメントと呼びます。つまり、「アンカーポイント(点)をつなげて作ったセグメント(線)をつなげてパス(線画)を描く」ってことになるのかな。
アンカーポイントからは方向線(ハンドル)が2本出ていて、それぞれ「次のアンカーポイントに進む方向」と「後ろのアンカーポイントから進んできた方向」を表してます。この方向線の長さと傾きによって、セグメントのカーブ具合が決められます。
あと、パスの先端と末端をつないで出来た、特に塗りの設定がある図形のことは、オブジェクト(とかシェイプとか)って言います。

その他、ペンツールの基本的な使い方については下記ページを参照のこと。

Adobe Illustrator * パスの編集

輪郭を描く

さてまずは輪郭から描いていきます。どこから描き始めてもいいのですけれど、だいたい顔の輪郭から描き始めることが多いです:)。
パンちゃんの右のこめかみ辺りにカーソルを合わせて、マウスを押したまま、下絵の線が進む方向へドラッグします。方向線をある程度伸ばしたらマウスを離して、今度はパンちゃんの口元らへんにカーソルを合わせて、同じようにドラッグ。するとセグメントが描画されるので、下絵の輪郭と重なるように方向線を調整します(この時点でカタチが合わなくても、あとから調整できるので構わず次に進みます!)。続けて左のこめかみ辺りからドラッグして、下絵の輪郭とセグメントのカタチを合わせます。

アンカーポイントを置く位置をどこにしたらいいかは、“なんとなく”です!けどなるべくアンカーポイントの数は少なめがよいので、ここでは3つの地点を結んで顔の輪郭を描きました(下図)

ダイレクト選択ツールで、アンカーポイントを調整して、パスのカタチを整えたら一丁あがり。

顔の輪郭を描く
下絵に合わせて微調整

同じ要領で、じゃんじゃか下絵をなぞってパスを描いていきます。まつげのところはツンツンにするために線でなくて塗りで描いたり、アンカーポイントからはなるべく常に方向線を伸ばすようにしてパスをつないでいきます。あと、閉じないパスの端っこからは方向線を伸ばしっぱなしにしないようにします。
カチカチカチカチなぞっていきます。

じゃんじゃか下絵をなぞってく

全部なぞり終わったら、テンプレートレイヤーを非表示にして、パスで描いた線のバランスを整えます(ここでは目の位置をちょっと下げるだけでした)。バランスがこれでよしとなったら、線パネルの線端を「丸型線端」に、角の形状を「ラウンド結合」にして、カク張った線の先端を丸くします。あと、余分なところを消したりなんだりで、線画のできあがりです。

線のバランスを整える
輪郭できあがり

目次に戻る

色塗り

線画を利用して塗り面を用意します。
lineレイヤーから、塗り面に必要な線だけ選択して、レイヤーパネルの右端にある赤い四角optionを押しながらcolorレイヤーのところまでドラッグ。これで線画がcolorレイヤーに複製されました。塗り面に必要な線だけというのは、塗り面とは関係なさそうな、コック帽のシワとか、パンの模様以外の線のことで、ここでは下図のような具合に複製しました。
lineレイヤーはロックして非表示にしておき、colorレイヤーに移動した線画の線端を「パット線端」に変更して、すこしだけ線幅を細くしておきます(ここでは0.353mm→0.2mmにしました)

塗り用シェイプの準備

輪郭が途切れているところがないかチェックして、大丈夫だったら「オブジェクト」→「パス」→「パスのアウトライン」を選択し、続けざまにパスファインダーパネルの「合体」をクリック。これで、線の部分が塗りになって、線に見えるけどオブジェクトという状態になります。
ダイレクト選択ツールで、線に見えるオブジェクトの外周だけ(下図参照)を選択してdeleteすれば、塗り面が完成です!いったん適当な色に変えたら、lineレイヤーを表示します。

パスのアウトライン
輪郭から塗り面をつくる

このままだと、余分なアンカーポイントが作られちゃっててごちゃごちゃしてるので、アンカーポイントを削減します。
例えば服の塗り面は、脇のところまでパスが伸びて遠回りしちゃってます。パス消しゴムツールで遠回りしてる部分を分断するようにスッとなぞると、パスが途切れます。連結ツールを使って、途切れたパスを繋ぐようになぞると、綺麗につながりましたー(下図)
あと、くび毛や四角巾に沿って描かれた部分も余分なので、服以外の塗り面をロックcommand+2してから、なげなわツールで余分なアンカーポイントを選択してdeleteペンツールでパスの端と端を繋いだら一丁あがり。さっきのロックは解除command+option+2しておきます。

遠回りしてるパスをハショる
余分なパスをスッキリさす

コック帽とか、四角巾とか、パンツのとことかも同じように、アンカーポイントを削減したら、塗り面できあがりです!

他のところのアンカーポイントも削減

あとは色決めです。
コック帽はとりあえず「C:5 M:10 Y:10 K:0」でオフホワイトっぽくしてみました。色を変えると、オブジェクトが重なってしまうところがあるので、そこも直しながら塗り進めます(オブジェクトの重ね順については後述
(毛?)の色とかはCMYK スペクトルから適当なところをクリックして、良さげな色が見つかったら、そこから数値をいじって微調整したりして決めていきます。 色決めのときにはcommand+Hして、選択中に表示されるレイヤー色の境界線を非表示にしておくと、見やすくてよいです:)。

色を塗っていく
どんどん色を塗っていく

あと、線画のときに描き忘れてたほっぺは、色を線画よりも上に乗せたいので、lineレイヤーに描いて色を付けます。
で、色塗り完了!

ほっぺも塗ってできあがり

目次に戻る

影付け

影用オブジェクトの用意

イラストに奥行きを出すために、影をつけます。影用のオブジェクトは、塗り面を利用して作ります。
塗り面を全選択command+Aしたら、optionを押しながらshadowレイヤーに移動。複製できたら、colorレイヤーはロックしておきます。
shadowレイヤーに移動したオブジェクトの色を「C:10 M:10 Y:10 K:10」にして、透明パネルの描画モードを「乗算」にしておきます。ここから、影になる部分を切り出していくことになります。

影色を適用する

影の切り出しにはナイフというツールを使います。
コック帽の塗り色を選択した状態で、どんな風な影になるか想像しながら、一筆描きでカットします。コック帽ではとりあえず3箇所、影を作りました。同じ要領で、他の部分の影もきりきり切り出していきます。

くび毛の影と服の影が重なってるところがあるので、ここはくび毛の塗りオブジェクトを利用して、パスファインダーパネルの「前面オブジェクトで型抜き」というのをクリック。重なってた部分がなくなりました(下図)

コック帽の影を切り出す
重なったところを削る

ひととおり切り出したら、気になるところはカタチを調整したり、物足りないところには影を描き足したりします。
重なるように追加した影は、重なった部分だけ影が濃くなってしまいますけれど、そんなときには、いったん描画モードを通常に戻して、重なった影をグループcommand+Gしてから乗算にすれば、重なった部分も含めて一つの影になります。

切り出せない影は描き足す
グループ化してから乗算

さらに、地色に合わせて、影の色も微調整します。
地色が黄色っぽい顔の部分はYを多めに「C:10 M:10 Y:15 K:10」、赤みがあるお毛けの部分はさらにMを足して「C:10 M:15 Y:15 K:10」、緑色の部分には緑みを足して「C:15 M:10 Y:15 K:10」という具合に、影色を調整してます。全部「C:10 M:10 Y:10 K:10」の影よりも、地色ごとに調整した影の方がなんだかちょっと温かみがでてる気が、しないでもないですよね…X)!

影色の違い見比べ

あと、影と同じ方法で、ハイライトも作ったりします。ハイライトは「C:0 M:0 Y:0 K:0」の真っ白で、描画モードを「ソフトライト」にしてます。
こんな感じになりました。

影とハイライト

目次に戻る

線幅調整

仕上げに、パスの線幅にニュアンスをつけて、イラストに深みを与えます。
線幅ツールを使えば、パスの任意の地点の線幅を、太くしたり細くしたりできます。
線幅ツールに切り替えて、パスにカーソルを乗せると、パス上に白丸が表示されます。白丸が表示された状態でそのままドラッグすれば、その部分の線幅が自然なカタチで調整されます:D。また、白丸が表示された状態でダブルクリックすれば、線幅ポイントを編集パネルが開いて、数値でもって線幅を指定することもできます。
ここでは、数値で線幅を指定していきます。

線幅ツール
線幅を調整して線画にニュアンスを出す

実際に筆でイラストを描くときの力の入れ具合を想像しながら、太さを調節してゆきます。スー、グッ、スー。スッ、スー、グイッスー。みたいなカンジを意識して、スのところは細め、グのところは太めです。
一番太いところは「全体の幅」を1mmに。若干太いところは0.6mm、細いところは今のままの0.353mmで、特に細くしたいところは0.3mmと決めて、線の強弱を調整します。
線幅を太くしたことで、線がはみ出しちゃったところがあるので、ちょっとズラしたり、線端をパット線端にしたりして、ハミ出さないよう修正したらできあがり。

線幅調整完了!
はみだしてるのを直したらできあがり!

線が強調されたためか、ちょっと黒が強く感じるようになっちゃったので、若干色味を淡く、焦げ茶色に変えます。
この焦げ茶色は一番濃い影の色と同じにしています。一番濃い影の色っていうのは、パンのクープのところの色。このままだと、スポイトで色を取っても「C:15 M:20 Y:20 K:15」のグレーしか取れないので、影色と地色を混ぜた色を用意する必要があります。

地色と影色を混ぜる

適当なオブジェクト(ここでは正方形)を用意して、クープの色と影の色を重ねて置いたら、2つのオブジェクトを選択して、「オブジェクト」→「透明部分を分割・統合...」を選択して、透明部分を分割・統合パネルで「OK」をクリック。すると、オブジェクトがパスを境に3つに分かれて、真ん中のオブジェクトは、地色に影色が乗算された色になりました:D!

すかさず線画を選択して、shiftを押しながらスポイト。あと、まつ毛はなにも押さずにスポイトします。
最後にパンのカタチをちょっと微調整して、地面に影をつけたら、…できあがりー!

線画を焦げ茶色に
微調整してできあがり!

パレットを作る

ここで使った色たちを、パレットにして片隅に置いておくと次から便利です。
まずcolorレイヤーに、四角いオブジェクトをたくさん用意しておきます。
で、上から順にひとつずつ選択してはスポイトツールで色を拾って、選択してはスポイトしてを繰り返して、パンちゃんカラーが出揃いました。

パンちゃんカラーを抽出

そしたらそれを全選択して、optionを押しながらshadowレイヤーへ複製。横幅を半分くらいに変形して、影色もスポイトします。描画モードもちゃんとスポイトされるので、下の色と乗算されるんですね:D。
そんなこんなでパレットができました!

影用レイヤーにも
パンちゃんパレットできあがり

今後、パンちゃんの色を付ける時には、このパレットからおもむろにスポイトすればいいのです;)。

目次に戻る

面で描くイラスト

ふたつめは、輪郭線がないイラスト。主に鉛筆ツールを使います。
鉛筆ツールはドラッグ操作で線を引いて、その軌跡に応じて自動でアンカーポイントとハンドルの角度とかを決めてくれるツールです。ので、ペンツールで描くよりもより直感的に線が描けると思います:)。

マウスだけでも描けないこともないですけれど、ペンタブレットがあるとはかどります(ので、ここからはペンタブレットを使っています)。

鉛筆ツールオプション

まずは鉛筆ツールのセットアップから。
ツールパネルの鉛筆ツールアイコンをダブルクリックして鉛筆ツールオプションパネルを表示させて、その中の「選択を解除しない」と「Option キーでスムーズツールを使用」ってのと「選択したパスを編集」の3つにチェックを入れます。

鉛筆の線に塗りを適用
チェックしておけば、描いた線がツールパネルの塗りに設定してある通りに、塗りと線が適用されますが、チェックを外しておくと、例え塗りの設定があったとしても、鉛筆ツールで描いたあとは自動で塗り設定が透明になります。トレースするのに塗りがあると描きづらいので外しときます。
選択を解除しない
鉛筆ツールで線を描いたあと、描き終えた直後のパスが選択されたままになります。
チェックしてないと、描き終えてすぐに選択解除されます。
Option キーでスムーズツールを使用
option押してる間だけスムーズツールに切り替わるようになります。
チェックしてないと、optionを押してる間だけ直線ツールに切り替わります。
選択したパスを編集
選択されたパスを鉛筆ツールで編集できるようになります。下の「範囲」ってのが、編集できるようになるまでの距離です。
チェックしてないと、描き終えたパスを鉛筆ツールでは編集できなくなります。

パーツを作る

線画がないので、直接塗り面から作っていくカンジで描いていきます。まずは顔から、鉛筆ツールで下絵をなぞります。
線で描くイラストの時みたく下絵の通りになぞるだけだと、塗り色を指定した時に始端から終端までが直線で塗られることになってしまうので、ちゃんとおでこも塗られるように、コック帽に重なるようにパスを伸ばしておきます。切り絵みたいな感覚で、紙を重ねて張り合わせるためののりしろ部分を作っておくカンジですねー。
パスの線端に鉛筆ツールを近づけると、鉛筆ツールの右下の「*」マークが、「/」マークに変わるので、そこからドラッグを始めます。グーッと線を引いて、もう一方の線端に近づくと今度は「○」マークに変わるので、そこでドラッグを止めれば、線がつながります。

※CC 2015だと、鉛筆ツールオプションパネルで「両端が次の範囲内のときにパスを閉じる」という項目にチェックしておかないと「○」マークが出ないので注意です:(。

塗り面を伸ばす

あと、ちょっと線が歪んでしまったところとかを修正するには、鉛筆ツールでもう一度描き直せば、元の線を更新することができます。選択された状態のパスに鉛筆ツールを近づけると「*」マークが消えるので、そこから新たに線を描きます(下図左)

カタチが整ったら、仕上げにアンカーポイントを削減します。鉛筆ツールで描いた線はどことなく無駄なアンカーポイントが作られがちなので、その無駄なアンカーポイントを削減するのです。
アンカーポイント削減にはスムーズツールを使います。
鉛筆ツールを使ってる時にoptionを押しながら、選択された状態のパスの、アンカーポイントが多めなところのちょっと外側ら辺をスッとなぞります。するとパスのカタチは割とそのままに、アンカーポントだけが削減されましたね!(下図真ん中)

線を整える

この調子でじゃんじゃかパーツを作ってゆきます。
コック帽のスジのところや、四角巾のシワやパンの模様も、ここでは「線」じゃなくて「面」で作らなきゃならないです。線で描くイラストの時の影を作るカンジで描いていきます。

パーツの用意完了

最後に下絵を非表示にして、パーツのバランスを整えたら、できあがり。

目次に戻る

色塗り

続いてパーツに色を割り当ててゆきます。
パンちゃんの色は、前に作ったパレットから、スポイトしていけば楽チンですねー:D。
まずは顔と腕と足の色をスポイトします。するとなんだか、胴体のパスが顔の上に乗っちゃってるし、よく見ると腕も服の上に乗ってて、足もパンツの上です。前述したオブジェクトの重ね順の所為ですね…X(。色を割り当てながら、オブジェクトの前後関係もきちんとしておきます。
コック帽を含めた頭の部分を全部選択して最前面へ移動shift+command+[。腕と足は最背面へ移動shift+command+]すれば一件落着です。

次にコック帽と服の色をスポイト。今度は前髪がコック帽の上に乗ったり、くび毛が服の下になってたり、パンツが服の上に乗ってるのがわかります(下図)。コック帽だけ選択して最前面へ移動。続いて頭とくび毛を選択して最前面へ。最後にパンツを選択して最背面へ移動すれば、もう一件落着。

顔スポイトして、重ね順整理
コック帽スポイトして、重ね順整理

色をじゃんじゃかスポイトしていくと、四角巾の色をつけたら、右側の結び目のシワが隠れちゃいました。けどこのままじゃシワのパスが選択できないですね…。そんな時にはレイヤーパネルから「表示の切り換え」を活用します。
レイヤーパネルの目のアイコンのところを、commandを押しながらクリックすると、アイコンが白目をむきます。すると、ガタガタパスだけの表示になって、さっき隠れてしまったシワのパーツも丸見えになりましたー。チョイと選択して、最前面へ移動したら、表示を元に戻します。結び目のこぶの部分を最前面にしておきます。

毛とか目とか口もスポイト
四角巾の重ね順整理

コック帽のスジのところと、パンのクープのところのオブジェクトが、下のパーツからはみ出してますね…。はみ出さないようにするには、下のパーツを利用して、パスファインダーの「交差」というのを適用します。これは、重なったオブジェクトの重なってる部分だけを残す、という事をします。
まず下のパーツをその場にコピペcommand+Ccommand+Fして、shiftを押しながら、はみ出してるパーツも選択。そこでパスファインダーパネルの「交差」アイコンをクリックすると、重なってる部分だけ残って、はみ出してたところがなくなりました(下図)

ハミ出しをなくす

コック帽のスジのところとか、四角巾のシワ、パンの模様のところの色には、影色を使います。コック帽のスジのところは、オブジェクトが重なってるところがあるので、グループ化してからスポイトします。
それぞれスポイトすれば、色塗りおしまい!

影色部分塗ったら色塗り完了

目次に戻る

影付け

影を付ける前に、パンちゃんをパーツごとにレイヤー分けします。
頭の部分はlineレイヤーに移動。くび毛はshadowレイヤーに移動。胴体の部分はbgレイヤーに移動しておきます。レイヤー名と関係なくなっちゃいましたが、面で描くイラストの場合こういうレイヤー分けの方が影を付けやすいんです:)。

パーツをレイヤーに分ける
パーツとレイヤーの構造

影の作り方は、線で描くイラストの時と同じように塗り面を利用します。けど、いっぺんにはできなくて、ひとつずつ影を作っていくことになります。

コック帽の影

まずはコック帽から。
コック帽のふたつのオブジェクトをその場にコピペしたら、パスファインダーパネルの「合体」をクリックしてひとつのオブジェクトにします。影色をスポイトしたらおもむろにナイフできりきり。影部分が切り出せたら、影じゃない方のオブジェクトをdeleteすれば一丁あがり。
同じ要領でほかの影もじゃんじゃか作ってゆきます。

切り出した影のカタチを微調整したり、コック帽のところの影がちょっと違和感があったので修正したり、あと、四角巾の下とかくび毛の下にも影を描き足します。

ナイフで切り出し
影の調整

パントレイのところの影をもうちょっと描き込んだり、パンの位置を調整したりなんだりしたら、影おしまい!

パントレイをもうちょっと描き込む

線で描くイラストの時と同じく、影と同じ要領でハイライトも切り出します。ハイライト色は真っ白で、描画モードはソフトライトです。
最後に地面に影を落としたら、できあがり!

ハイライトつけて、地面の影をつけたらできあがりー!

目次に戻る

面な線で描くイラスト

みっつめは、輪郭線を塗りで描くイラスト。主に塗りブラシツールを使います。
塗りブラシツールで描かれた線は、そのままオブジェクトになるため、まるでマジックで描いたみたいな描き心地で、鉛筆ツールで描くよりもいっそう直感的に線が描けると思います:D。

塗りブラシツールオプション

まずは塗りブラシツールのセットアップから。
塗りブラシツールアイコンをダブルクリックして塗りブラシツールオプションパネルを表示します。ここで、塗りの幅とか、筆圧での塗り幅の変位を設定します。サイズを5ptにして「筆圧」を選んで、変位も5ptで、つまり、描いた線が筆圧によって0pt〜5ptに変化するようになります。筆圧が要なので、ペンタブレット必須です…。
あと、「選択を解除しない」と「選択範囲のみ結合」のチェックを外しておきます。

選択を解除しない
鉛筆ツールと同じく、チェックしておくと描いたあと、パスが選択された状態になるんですが、塗りブラシツールで描く場合は、選択されたままだと、描いた線のカタチが見づらくなるかなと思うので、ここではチェックは外してます。
選択範囲のみ結合
チェックしておくと、選択されたパスに接するように描いた時だけ、パスが合体されます。チェックを外しておくと、同じレイヤー上の同じ塗り色で描かれたパスが接していれば、選択されてなくても合体されます。
※ここでいう合体は、パスファインダーの合体と同じく、パス同士の重なった部分が引っ付いてひとつのオブジェクトになる、という状態を指します。
アートボードの大きさをA3サイズに変更

塗りブラシの最小幅がちょっと太めなので、相対的に線が細くなるように、アートボードの方を大きめにしときます。アートボードツールアイコンをダブルクリックするとアートボードオプションパネルが開いて、アートボードの大きさを変更することができます。今は「A4縦」の大きさになってますね(右図)。とりあえず、倍の「A3縦」にしておきます。まず、アートボードのどこを基準としてサイズ変更するかを決めて、プリセットから「A3」を選択。下絵のサイズもそれに合わせて大きくします。
下絵の大きさは、塗りブラシツールで線を描いてみたときに、線で描くイラストの時くらいの見え方になるように調整します(下図右)

拡大・縮小パネルを開く
ブラシの太さに合わせて下絵の大きさを調整

輪郭線を描く

「選択範囲のみ結合」のチェックを外しているため、同じ塗り色で描いた線は、重なった部分はどんどん合体されて、ひとつのオブジェクトになります。結合されないようにするには、そのときだけ塗りの色を変えれば問題ないです。まつげの部分とかは、あとからバランスを調整したいので、シェイプが結合されないように塗り色を変えて描いてゆきます。
たとえハミ出しても、線がヘロヘロでも、あとから修正するので、今は気にせずなぞってゆきます。

筆を払う時よりも、筆下ろしの時の方が線が細くなるので(※僕のペンタブレットだけかもです)「線の先から描き始めて、根っこで止める」という描き方をしてます。

はみ出してても気にしない、線がヘロヘロでも気にしない

すべてなぞり終えたら、ハミ出したところや、線がヘロヘロなところを、鉛筆ツールでパスを上描きしたり、スムーズツールを使ってアンカーポイントを減らしたりで、きれいにしていきます。
きれいにするとはいえ、ただスムーズにするだけじゃなくて、払うところと止めるところを意識して、墨だまりを作ったり、塗りブラシツールで描いた線をあえて残したりして、線端や線幅にちょっと質感を感じるようにしていきます。

アンカーポイントを削減する

目次に戻る

色塗り

塗り面の用意

色塗り面は、線で描くイラストの時と同じく、線画を利用して作ります。
できあがった線画の内側だけ選択した状態で、optionを押しながら、lineレイヤーからcolorレイヤーへ複製して、いらないパスを削除すれば塗り面のできあがり;)。lineレイヤーはロックしておきます。

色はパレットから、それぞれスポイトして塗ってゆきます。顔と腕と足、毛とパン、四角巾とパンツはそのままスポイト。パンの模様は、lineレイヤーからshadowレイヤーに移動して、影色で塗ります。
あと、線画とほっぺにも色をつけたら、色塗り完了!

それぞれパレットから色を拾う
パンの模様は影色を使う
線画の色とほっぺの色も

塗り色が線画ギリギリまでしかなくて不安なので、塗りのオブジェクトをちょっとだけ膨張させるべく、メニューバーから「効果」→「パス」→「パスのオフセット...」を選択します。
パスのオフセットは、オブジェクトの外側/内側に向かってアンカーポイントを移動させることで、オブジェクトを太らせたり痩せさせたりしてくれる機能で、ここではオフセットの値を「0.6mm」にして適用しました(あとの2つは初期値のままです)
けどよく見ると実際のパスは塗りの内側を通ってますね…。というのも、イラレの「効果」で適用した効果は、いったんアピアランス属性というのに登録されてて、まだ実際にパスには適用されていない状態なんです。これを実際のパスに適用するためには、パスを選択した状態で、「オブジェクト」→「アピアランスを分割」を選択します。

パスのオフセットを適用
アピアランスを分割する

パスのオフセットを適用したら、塗り面のオブジェクトのアンカーポイントを削減します。線で描くイラストで色塗り面を作った時と同じくやっぱり、アンカーポイントが余分にごちゃごちゃしちゃってるので、その無駄を省くのです。
遠回りしてるパスをパス消しゴムツーツ連結ツールを使って短くしたり、鉛筆ツールでハショったり、スムーズツールを使ってアンカーポイントを少なくしたり。

パス消しゴムツーツや連結ツールで
鉛筆ツールやペンツールで

服の四角巾に沿って遠回りしてるパスはショートカットしてシンプルに、四角巾の別れてるパスもひとつにつなげてシンプルにします。

服も削減
四角巾も削減
重ね順をちゃんとしながら

目次に戻る

影付け

影付けも線で描くイラストの時と同じく、影用のオブジェクトを、塗り面を利用して作ります。
塗り面をshadowレイヤーに複製したら、パレットからそれぞれの影色をスポイトしてから、ナイフで、影のカタチを切り出していきます。

影面用意
影の切り出し

切り出してじゃ作れない影は別途描き足して、ハイライトも付けて、地面に影を置いたら、はいできあがり!

影を追加して、ハイライトをつけて、地面に影を置いたらできあがり

目次に戻る

あとがき。

時短テクニックとか、神ワザ的なのはあまりできない分、コツコツ描いてくイラレテクになりました。
記事を書いてみて、きっともっとカンタンなやり方があるんじゃないかなーと思うところが多々あったので、今後もっと新しい機能とかもじゃんじゃか取り入れていかなきゃな、と思った次第でした…X)。「ここはこの機能を使えばあっという間だよ」とか「このサイトで優しく解説されてるよ」とかありましたらぜひ教えていただけるとうれしいです!

ときに、この記事ではAdobe Illustrator CC 2014を使っていますが、先日CC 2015がリリースされまして、早速ダウンロードしてみました!ちょっとみたところ、この記事の内容で2014と2015とで大きく違うところはなさそうだったので、CC 2015でも応用できると思います…X)。あ、鉛筆ツールオプションがひとつ増えてる…。

以上、イラレでイラストを描く時のコツとかでした!最後まで読んでいただきありがとうございましたーXD!

Adobe Illustrator CC 2015について詳しくは下記サイトを参照のこと。

Comment & Pingback

14 Comments! for イラレでイラスト。

  1. パニーニ

    本は出されていないのですか?
    本になったら是非買います、、、

    Reply

    • _watercolor

      > パニーニさん

      コメントありがとうございます。
      うれしいお言葉、恐縮ですX)!

      ほん、…出すつもりで書いてたんですけれど、頓挫しちゃいました。ごめんなさい
      本書きは向いてないみたいです…X(。
      なので、できれば今後とも、Webな、Lopan.jpをよろしくです!

      Reply

  2. iam_sucki

    webの勉強を始め、初のサイト制作に取り組み始めて困っていたところでした。。とても分かり易くて参考になります!
    こんなサイトを作ってくださる方がいるなんて。。_watercolorさんありがとうございます!

    Reply

    • _watercolor

      > iam_suckiさん
      どういたしましてーX)!
      コメントどうもありがとうございます!
      来年の春先に、本も出すかもなので、よかったらそちらもよろしくお願いします;)!

      Reply

  3. togusa

    もの凄く丁寧な解説で感動しました!
    分かりやすくて、あ~こうすればいいんだ~
    っていうのが幾つもあり、勉強になりました。

    この記事を製作するにも
    相当な時間をかけていらっしゃると思います。
    ありがとうございます!

    Reply

    • _watercolor

      > togusaさん
      こちらこそ、ありがとうございますー!
      お役に立ててうれしいですX)!

      Reply

  4. 並木通り

    久しぶりに更新されていて嬉しかったです。
    勉強になります。

    Reply

    • _watercolor

      > 並木通りさん
      コメントありがとうございます!
      そう思っていただけてるって思うだけで、なんだかうるっとしちゃいました。
      今後ともLopan.jpをよろしくですX)!

      Reply

  5. sigma

    ありがとうございます!!とても素敵なサイトに巡り会えました。
    Photoshopによる下処理の方法からキャラクターの仕上げ方まで、たくさんのエッセンスが詰まっていて、知りたかったことが満載です。
    全体が把握しやすく、また詳細もわかりやすかったです。
    本当に感謝感謝です。

    Reply

    • _watercolor

      > sigmaさん
      コメントいただきありがとうございます!
      そう言っていただけてよかった。うれしいです!
      励みになりましたX)。

      Reply

  6. miyake

    通りすがりにクリックしたら、素晴らしいサイトデザインで久しぶりにワクワクしながら見ていました。
    また、1記事の内容が多くて濃密で読み入ってしまいます。
    このサイトを見て、さらに勉強しようと思いました。
    ありがとうございます。

    Reply

    • _watercolor

      > miyakeさん
      ありがとうございますー!
      ワクワクできるってしあわせですよねX)。
      今後ともLopan.jpをよろしくです!

      Reply

  7. 774

    実用的な内容で良いですね。
    有難うございます。

    Reply

    • _watercolor

      > 774さん
      コメントありがとうございます。
      いえいえこちらこそ、
      読んでいただけてうれしいです!

      Reply

コメントを残す