クリエイティブ基礎力アップ！Adobe Illustrator Drawで描くデジタルアート（基礎編）
Adobe Illustrator Drawを使ったイラストの描き方を紹介致します。
▽Adobe Photoshop Sketchで描くイラストの作画方法はこちら。
【基礎編】/【応用編】
※今回紹介するIllustrator Drawの基本的な機能はこちらのページで紹介されています。
作画手順
・新規プロジェクトを立ち上げる
https://blog.adobe.com/media_63ea93ae5d6c433a2ec7ce6da1b2fdb342e09e20.gif
Illustrator Drawを起動後、画面右下に表示されている「+」をタップ。任意の形式を選択しましょう。※今回の作例は〈iPad Pro（横）〉という形式を選択しています。
・作画元になる写真を配置
https://blog.adobe.com/media_3da2884aba58fea0545295bfb00efb2b4e679042.gif
https://blog.adobe.com/media_11618d2f38bae2d3670819444235b34ce486c870.gif
新しいプロジェクトの画面が開いたら、画面右側にあるレイヤーの「+」をタップし、「画像レイヤー」から作画元になる写真を配置しましょう。
・下書き
https://blog.adobe.com/media_f463c396500a97f7ea523687c3893599a51b70e6.gif
画面左側にあるブラシツール最上段の「ラウンドブラシ」を使って下書きを描いていきましょう。※写真レイヤーにそのまま描き始めるだけで自動的に描画レイヤーが生成されます。
ブラシのサイズや色の濃さは使用するブラシを選択後、もう一度同じブラシをタップすると出てくる、ブラシオプションにて自由に変更可能です。描きやすい設定に調整してみましょう
《ワンポイントアドバイス》
下書きはブラシサイズが小さめ（2.5程度）の方が手書き時の鉛筆と近い感覚で描きやすいかもしれません。下書きは、あとでレイヤーの不透明度を下げることで、本番の線とごちゃごちゃにならないようにできます。画面が線だらけになってしまっても構いませんので、納得いくまで下書きを描き込んでみましょう。
・ペン入れ前の準備
https://blog.adobe.com/media_8f4250e79ff95bd6f9d816388663c3da8b154caa.gif
手書きのイラスト制作時に「ペン入れ」と呼ばれているイラストの主線を描く工程に入ります。まずは下書きレイヤーをタップして出てくるオプションウィンドウから「不透明度」を30％程度まで下げましょう。
https://blog.adobe.com/media_f98be7c35b8e6dde74c99263968f36df0398c85f.gif
画面右側にあるレイヤーの「+」をタップし、下書きレイヤーの上に新しい「描画レイヤー」を作りましょう。
https://blog.adobe.com/media_70e3aaa23af94d3098d6c3dcd8becfd97e81d128.gif
画面左側のブラシツールの上から二段目にある「テーパーブラシ」（筆ペンのような形のブラシ）をダブルタップし、カラーをブラックに変更します。
《ワンポイントアドバイス》
ブラシパネル下部の設定スライダーのようなマークをタップするとブラシの感度などに関する詳細設定ができます。
https://blog.adobe.com/media_c73371cbd35f8d498fc74957a454d344ae95fde5.gif
ここでは真円率、角度、テーパー、筆圧変化、速度変化を調整できます。初期設定が使いやすければこれらのオプションは変更する必要はありませんが、思った通りの太さの線がなかなか描けないと感じた場合は、筆圧変化や速度変化の感度がご自身の作画に合ってないことが考えられますので、初心者の方でも安定した線を引きやすい、以下の設定への変更をオススメ致します。
▶テーパー 30%
描き始めの部分の線の太さ。0に近づくほど太くなります。100に近い設定だと線の入りが細すぎて安定した線を描くのは至難です。
▶筆圧変化 10%
筆圧感知が敏感すぎると線の太さが安定しにくいのでこのくらいがオススメです。
▶速度変化 10%
筆運びのスピードによって線の太さが変わる、という設定です。こちらも感度が高いと、長い線を描く時の難易度が上がります。
・ペン入れ
https://blog.adobe.com/media_37d53059f9430c2f8ef7b92fb9f319928879c709.gif
描きながらブラシサイズを調整し、しっくりくる太さの線を描きましょう。
https://blog.adobe.com/media_e6b5d55e7d17bbadb8c371023e4c4ca818fa4985.gif
画面を二本指でピンチイン、ピンチアウトするとアートボードをズームにすることができます。細かい部分は描きやすいようにズームにしてみましょう。
https://blog.adobe.com/media_c35f35bba24ea91b615500268b2ca20fad5e29b6.gif
https://blog.adobe.com/media_0e105bcbc8fabe9a24bbae7d68ea8be1d1add791.gif
ひととおりペン入れが完了したら、下書きレイヤーをダブルタップして非表示にします。これでペン入れの工程は終了です。
《ワンポイントアドバイス》
イラストを簡単にうまそうに見せるテクニックをひとつ紹介します。ペン入れの線の太さについて、モチーフの中のパーツは比較的細めの線で描き、輪郭や髪型などのアウトラインを太めの線で描くとイラストが締まって見えます。
線の太さのコントロールについてご興味がある方はこちらの記事をご参照ください。
・色ぬり前の準備
https://blog.adobe.com/media_c19ed16be518eeaa2bba5c2984037fc21a77a097.gif
https://blog.adobe.com/media_33fbf24f70a379475d258c53c7fe5187b18c359d.gif
ペン入れをしたレイヤーを一度タップし、レイヤーオプションから「複製」を選択します。この操作を繰り返し、ペン入れレイヤーを3枚ほどコピーします。
・色ぬり（肌）
https://blog.adobe.com/media_6420ab6cf3e4b21d16570e3b1e2290c4a91dec81.gif
色を塗っていきます。下書きに使った「ラウンドブラシ」をダブルタップし、「カラー」をタップ、「テーマ」から肌色を選択します（「ピッカー」からお好みの色を作るのもGOOD）。
https://blog.adobe.com/media_d068c3b084eecd1be5b1afbb33ae30e9b7adfb51.gif
ペンで囲われた範囲を長押しすることで「塗りつぶし」が可能です。まずはお顔の中を全て塗りつぶします。
https://blog.adobe.com/media_0ca7bce734da1a93bdf400c1a5998fc75970b970.gif
レイヤーを長押しするとレイヤーの順番を自由に入れ替えることができます。色を塗っているレイヤーを長押しして、主線のみのレイヤーの下に移動させましょう（色で主線を塗りつぶしてしまわないように、色を全く塗らないペン入れレイヤーを一枚最上層に置いておきます。）
https://blog.adobe.com/media_27aa938f0234a293e1d4bb46528c70c35627dec3.gif
https://blog.adobe.com/media_310d8b21cc53ec79b413324cb45ad7e1a0f61d81.gif
「カラー」→「ピッカー」から一段階濃い色の肌色を選択し、お顔に陰影をつけます。同様に少し赤みのある肌色を選択し、唇の色を塗っていきます。
https://blog.adobe.com/media_87178c18c381ed5ae163042f6de5f80acb23c1f4.gif
https://blog.adobe.com/media_7aa83279dc53c02c296dea1529f195f0b9db068b.gif
「カラー」からホワイトを選択し、ハイライトを塗っていきます。お顔の中は３色しか使っていませんが、これだけでも立体感が出ました。
・色ぬり（髪、服）
https://blog.adobe.com/media_5a693099ea2326961149376e9c77f67506cf981c.gif
肌の色を塗ったレイヤーの一枚上にあるペン入れレイヤーを選択し、髪の毛と服の色を塗っていきます。「カラー」を濃いめのグレーに設定し（ブラックだと主線と同化してしまうため）、まずは髪の毛の範囲を長押しで塗りつぶします。
https://blog.adobe.com/media_7f235031fbfed9b57952ed0d47659a1db2f1b4a6.gif
https://blog.adobe.com/media_b996962aad4d680681b94a9bfc57f2f489d6def4.gif
https://blog.adobe.com/media_024622e855d3ff30b3459ece57ef42594a26969b.gif
「カラー」で一段階薄いグレーを選択し、髪の毛のハイライトを描き込みます。「カラー」を長押ししながらアートボード内へスライドさせると「スポイト」機能が使用できます。服の色をスポイトで抽出し、色を塗りましょう。
・背景を入れる前の準備
https://blog.adobe.com/media_a81f96a7ea3e167bcc3e94142503a0c053a59c8f.gif
https://blog.adobe.com/media_2c324772b39e028c4b15e52495e0e61f897d2c82.gif
背景を入れる前にイラストをアートボードの中央に移動させましょう。まずが人物の写真の「画像レイヤー」をダブルタップし非表示にします。一番上の描画レイヤーをタップし、オプションから「すべてのレイヤーを変換」を選択します。バウンディングボックスが表示されますのでイラストをアートボードの中央に移動させましょう（サイズの変更も可能です）。
・背景
https://blog.adobe.com/media_87b87285dcca3a6b23871a4d8ce8b18b856904c6.gif
https://blog.adobe.com/media_d327ba6a94035d9a12a0a32ec4ffaa7b23eca914.gif
今回はあらかじめiPadに保存したあったCreative Cloudのアイコンを背景に使用してみます。レイヤーの最下層にある「背景」レイヤーを選択し、レイヤー上部の「＋」アイコンをタップします。「画像レイヤー」を選択し、背景に使いたい画像を適当な大きさで配置します。
https://blog.adobe.com/media_7ceddf1dd21a2d0e7059f7d0835ce84466566392.gif
配置した画像レイヤーの上に新しく「描画レイヤー」を追加します。ホワイトのラウンドブラシで人物の周りをひと回りなぞっていきます。
https://blog.adobe.com/media_0675c45777a21f3f457b1c9e33ca9be77a31a5b7.gif
ホワイトで人物を囲ったらそのまま中を塗りつぶします。人物がクッキリ浮き出しました。
https://blog.adobe.com/media_494d2838d5f4a173652d6793ec58ab2e8b94df2a.gif
https://blog.adobe.com/media_b922393cd741d6f45c848c800c8e037f0b0c7741.gif
人物の周りを囲ったホワイトと、背景のアイコンのホワイトの部分が同化してしまい、バランスが悪いので背景のアイコンの大きさを変更します。背景アイコンの「画像レイヤー」をタップし、レイヤーオプションから「変形」を選択するとバウンディングボックスが表示されます。バランスの良い大きさに再設定しました。
・完成
https://blog.adobe.com/media_f7b3e95372df659e3c6a92e0aaf11bcad099728c.gif
サインを入れて完成です。
描いたイラストを活かす
https://blog.adobe.com/media_2d9e298353f5e67e4d85a1673023b964bacf8f6d.gif
Illustrator Drawで描いたイラストは様々な使い方ができます。
・イラストを保存、共有する
Illustrator Drawでは、プロジェクトに加えた編集は自動的に保存されます。いつでも「閉じる」をタップすれば、「プロジェクト」ビューに戻れます。「+」をタップして、プロジェクトに新しいドキュメントを追加することも可能です。また、「…」をタップして対象のドキュメントを選択し、複製や削除、または他のプロジェクトに移動することができます。「作品」ビューでは、選択したプロジェクトを一括して削除、複製することも可能です。
画像をカメラロールに保存することもできます。また、PSDまたはPDFの形式でCreative Cloudに保存することも、リンクを作成してプロジェクトを他の人と共有することも可能です。
・Behanceとの連携
コミュニティギャラリーで世界中のアーティストやデザイナーの作品を参照できます。また、Illustrator Drawで制作中の作品をBehanceに公開して、アプリ内ですぐにフィードバックを得ることも可能です。
・Illustrator、Photoshopに直接送信
作成したイラストをIllustratorに送り、4倍まで拡大して高解像度のコピーを印刷できます。また、レイヤー付きのPSDファイルとしてPhotoshopに送り、イラスト、背景、画像をそれぞれ個別のレイヤー上で編集できます。
・タイムラプス機能
Illustrator Drawでは作画の全行程が自動的に録画され、タイムラプス機能を使って手順を一から振り返ることができます。
タイムラプスのビデオもまた、保存と共有が簡単にできます。
Illustrator Drawは無料でご利用いただけます
Illustrator DrawはCreative Cloudのアカウントをお持ちの方ならどなたでも無料でご利用いただけます。
イラスト制作からちょっとしたメモ書きまで、使い方は無限大ですので是非インストールしてご利用ください。
https://www.adobe.com/jp/products/draw.html
タイムラプスを編集した動画
今回紹介した作画手順と全く同じ手法で描いた自画像の動画がありますので良ければご覧ください。
https://www.youtube.com/embed/zKkhI_uRtq0
次回予告
次回はIllustrator Drawを使ったより高度な作画の工程を紹介する【Adobe Illustrator Drawで描くデジタルアート（応用編）】をお送りします。配信をお楽しみに！