【イラストレーターでイラストを描きたい！】未経験や初心者でも手描きの絵は描ける！絵心がなくても図形の組み合わせで絵を描いてみよう！フリーランスへの第一歩になるかも。

Illustratorでイラストを描いてみたい！
手描きのイラストに色をつけたい！

デザインは未経験だし、初心者。
パソコンは苦手だけど手描きの絵は描いてます！

手描きもいいんだけど、
Illustratorでイラストを描きたいな・・・
でも、パソコンは苦手だし
実は絵心がない・・・かも？

そういう方、多いのではないでしょうか。
今回は、Illustratorでイラストを描ける
ツールをご紹介します。

Illustratorでは、バナーやチラシなどの
デザインだけではなく
イラストを描くことができます。
未経験や初心者でも手描きの絵は描けるし
絵心がなくても、図形のツールを組み合わせて
イラストを描くこともできます。

絵が苦手でも、パソコンが苦手でも
少しでもできると自信がつきますし、
デザインの幅を広げることができます。
フリーランスへの第一歩になるかも！

今回は、このようなツールで
イラストを描いていきます。

1、図形を使う
2、ブラシツール
3、鉛筆ツール
4、ペンツール
5、紙に描いた手描きイラストに色をつける方法

図形を利用してイラストを描く

「あまり絵ごころがなくて・・・」
グラフィックデザイナー志望の方で
そういって不安になる方、多いです。

実は、デザイナーはイラストを
描けなくてもいいのです。
実際にイラストを描けない方も
たくさんいらっしゃいます。

デザイナーの仕事とは良い素材を探し、
それを上手くレイアウトをする
ということです。

最近では、その素材もネットに多く
出回っていますので、
探すのも簡単になりました。

注意点をあげれば、有料無料に限らず
著作権には十分お気をつけください。

とは言っても、簡単なイラストくらいは
描けた方が便利です。 Illustratorの機能に
慣れるためにも、ぜひ練習してみてくださいね。

まずは、絵心があまりなくても描ける、
Illustratorの図形を使って下図のイラストを
描いてみましょう。

ニコちゃんマークを作成してみよう

まずは、ニコちゃんマークを
作成してみましょう。

【ここでのポイント】
ダイレクト選択ツールに慣れる！

1、「楕円形」ツールを選び
「shift」キーを押しながら正円を作成。
続いて、小さな円を２つ
（片目とクチ用）を作成します。

２、「ダイレクト選択」ツールで
片目用の円の下部分を選択し、消去。
消去は「delite」キーか
「backspace」キーでできます。
同様に、クチ用の円も一部を消去します。

３、片方の目とクチを
顔用の円の中に移動します。
「選択」ツールで選択した方が
動かしやすいです。

４、「選択」ツールで片方の目を選択し
コピペしてもう片方に持っていく。
もしくはキーボードでコピペする。
片方の目を選択し「option(alt)」を押す。
『コピーできますよ』というマークが出るので
マウスから先にはなす。

５、色をつけてみましょう。
顔に色をつけると下図のようになります。
理由は、前回の記事で描いた
「塗り」に色が入っているからです。

通常は「塗り」に「白」が入ってるので
気づきづらいですが「塗り」に
色が入っているというのは下図のとおり。

これは「鉛筆」ツールや「ブラシ」ツール、
その他にも共通しますので覚えてください。
「塗り」はコップに入った水のようなもの。
アンカーポイントとアンカーポイントを
結ぶところに「塗り」が入ります。

上図のように、
図形がきちんと閉じられていな状態を
「オープンパス」と言います。
この説明は絵を販売したい時に
重要になりますので、
また後の記事でも説明します。

今は、線にだけ色を入れておきたいので、
「塗り」を「なし」にします。

６、クチを開けて笑ってる顔にしてみよう。
今度は、クチのオープンパスを閉じて、
クチを開けて笑っている顔にしてみましょう。

クチを「選択」ツールで選択。
「編集」メニュー　→ 「パス」→「連結」

ショートカットキー
「⌘(ctrl)」＋「J」

「塗り」に好きな色を入れてみましょう。
今回は赤にしてみました。
他にも、このような表情が作れます。
色々と試してみてくださいね。

グラデーションを使ってイラストを描く

前回の記事でも紹介した
グラデーションを使って
ちょっとリアルなイラストを
描いてみましょう。

今回作成するのは30代の方には馴染みが
ないかもしれませんが、
CDやカセットテープが入るコンポです。

グラデーションでの表現に慣れるのに
いいかと思いますので、
ぜひ作ってみてください。

【ここでのポイント】
グラデーションの向きの変更に慣れる！

1、「長方形」ツールと
「楕円形」ツールで図形を作る。
まだ選択や移動に慣れてない場合には、
図形を重ねず、別で作成してください。

2、全てを選択し、
「塗り」に白黒グラデーションを入れる。
「線」は「なし」にしてください。
その方がリアルです。

3、楕円形は「円形」のグラデーションにし
白部分を多めにしておく。

4、「グラデーション」ツールで
長方形のグラデーションを動かす。
どこから光が入ってくるかを考えて
引っ張ってみてください。
※前回の記事にも書きましたが、
「グラデーション」ツールと
「グラデーション」パネルは別です。
グラデーションを動かしづらい場合には、
重なっている図形をバラバラにしてからやってください。

5、円を「拡大縮小」ツールで縮小する。
左側のツールボックスに
「拡大縮小」ツールがあります。
簡単な使い方は、まず円を選択します。
「拡大縮小」ツールをダブルクリック。
縦横比固定に任意の数字を入れる。
今回は60％。
「コピー」ボタンを押す。

キーボードを使っての拡大縮小にも
慣れてみましょう。
図形を「選択」ツールで選択する。
「拡大縮小」ツールに持ち替え、
右下から中心に向かって斜めに動かす。
縦横比を変えたくないので「shift」キー
次に、そのままコピペしたいので
「option(alt)」キーも押す。
マウスから先にはなす。

6、2つの円をグループ化する。
2つの円を選択し、
ショートカットキー「⌘(ctrl)」＋「G」
この時に円のグラデーションが
気になる場合には、修正してから
グループ化してください。

7、スピーカー部分の円を選択し
下にコピーする。
普通にコピペしてもOKですが、
先ほどと同じようにキーボードを使って
コピペしてみてください。

グループ化された円は「選択」ツールなら
どこをクリックしてもOK。
下に移動しながら「option(alt)」キーを押し
マウスから先にはなす。
確実に垂直にいきたいなら「shift」キーも押す。

8、スピーカー部分を全て選択し、
右側に７と同じ容量でコピーする。
この時、スピーカー全体を
グループ化してから移動してもOK。
これで完成です！

多少、絵心がなくてもIllustratorでは
図形だけでイラストを作成することができます。

図形を多用してオリジナルのイラストを
作成してみるのも楽しいと思います。

実際に、コップなどを作成する際には、
図形のツールを使うとキレイなコップが
出来上がります。

絵を描くときは、手描きでも共通ですが、
コツは「描きたいものをよく見ること」です。

「なんか・・・変？」となるのは
描きたいものをよく見てないから
変なところに取っ手があったり
変なところから腕がはえてたりするのです。

他のイラストの作成例は
また別の記事で書きたいと思います。

ブラシツール

ペンタブレットを使用している方は、
これを使うと筆圧感知もします。
選ぶブラシによっても変わります。
設定の仕方でわかりやすいページが
ありましたのでリンクを貼らさせて
いただきます。

ブラシツールは、
感覚的に描きたい時に重宝します。

「ブラシ」ツールをダブルクリックして
設定画面を見て見ましょう。

アナログ同様、ペンやブラシで描いている
ようにしたい場合には、
「塗り」を適用のチェックをはずします。

使い方は、左クリックしたまま
好きなように動かしてください。

一度マウスを離すと、
そのカタチで確定されます。

もし、一度描いたカタチを
修正したい場合には、
上図でも説明していますが
ブラシツールをダブルクリックし、
『選択したパスを編集』にチェックを
入れておいてください。

「選択」ツールで選択した状態であれば、
一度描いた線の上をなぞってカタチを
編集することができます。

もしくは上図にもあるオプションパネルで
『選択を解除しない』にチェックを
入れておくと、描いた線を直しながら
制作することができます。

ブラシツールを使う際には、
ぜひ「ウィンドウ」メニュー　→
「ブラシ」パネルを出してください。

「ブラシ」パネルの左下側に
「ブラシライブラリ」というのがあります。
いろいろありますが、今回は
「アート」→「木炭・鉛筆」
というものを出してみます。

好きなものを選んで、
新たに描くと筆で書いたようなイメージを
作成できます。
もし、一度描いた線に適用したい場合は
「選択」ツールで選択して
使用したいブラシを選んでください。

例えば、居酒屋の地図とかで筆で
書いたような地図を見たことが
あるかと思います。

それは、線を引いた後に
これを使っているからです。

図形の線にも使えますので、
色々な表現ができます。

例えば、メニューを作って、
背景が寂しい・・・・という時には
「アート」→「水彩」から選び、
ブラシツールなどでサッと線を引き
そのブラシを適用すると、
なんとなくいい感じになります。

すでに描いたものや図形などに利用したい
場合には、選択してから変更ができます。

鉛筆ツール

「鉛筆」ツールはツールボックスの中に
隠れていますので、探してください。
バージョンによっても隠れている
場所が変わります。

図例（CC2019）ではここに隠れています。
これもブラシツール同様、
感覚的に線が書けます。

ブラシツール同様、描いた線を
修正することもできます。

「鉛筆」ツールをダブルクリックし、
修正できるところにチェックが
入ってればOK。

注意点を挙げると、
「いくら描いても描けてない？」
と見えることがあります。

これは、色々と作成しているうちに
「塗り」と「線」が
「なし」になってしまっている状態で
描いてしまったためです。

こうなってしまった場合には、
線に色を入れてください。
もし、描いた図形を選択解除してしまった
場合には、再度、「選択」ツールで
選択をし、色をつけてください。

「鉛筆」ツールで描いたものも、
ブラシパネルのものを適用できます。

「ブラシ」ツールと
「鉛筆」ツールの違いは
ブラシパネルで選んだものを
最初から適用できるかどうかの違いです。
※バージョンにより変わる可能性もあります。

「ブラシ」ツールは、最初から
ブラシパネルで選択したものを
使用できます。

「鉛筆」ツールは、一度描いてから
次に「ブラシ」パネルで
適用したいものを選びます。

ペンツール

ペンツールは、慣れないとかなり大変で
嫌いになってしまう方もいます。

しかし、慣れてしまえば
どんなイラストも書けますし、
Photoshopでの写真の切り抜きにも
重宝します。

ここでは、簡単なお花の作り方を
お伝えします。
そして、覚えておくと便利な機能も
ご紹介します。
ペンツールの使い方については、
後の記事で基本的な使い方も含め、
詳しく書きますね。

ペンツールは、上記のツールと違って、
「点」と「点」をつないでいくツールです。

曲線を引く際には、クリックしながら
引っ張るのですが、これが初心者には
とても難しいです。

ですので、今回は色々とやるのではなく
点を打つこと、曲線をつくること
これをやってみましょう。

下図のお花を作ってみましょう。

【ここでのポイント】
アンカーポイントを打つ、
曲線の作り方の違いを知る。

1、花びらを一枚作ります。
上部分になるところを「左」クリック。

2、下になる部分を「shift」を
押しながらクリックし、右に引っ張る。
「shift」は押したままの方がいいです。

「shift」を押す理由。
理由1、確実に垂直にいくから。
理由2、曲線の「ハンドル」を
引っ張る際に「shift」を押してないと
グラグラしてしまい、安定しないので、
カタチが崩れやすいため。

3、最初のアンカーポイントをクリックし、
結ぶ。結ぶことでオープンパスにならずに
すみますし、塗りもキレイに入ります。

4、選択ツールで選択する。
「選択」ツールを選んだ時に、
選択してるっぽくなりますが、
きちんと全体が選択されていません。

これからやる作業がうまくいかなくなるので
きちんと選択し直してください。

5、ここで、回転でコピーをしていくのですが
「回転」ツールとキーボードのキーを使用し
角度の入力をする、ということをやってみます。
ちょっと混乱される方もいるかもしれませんが
ゆっくりと順をおってやってみてください。

先ほどの「拡大縮小」ツールもそうですが、
「回転」ツールも図形の中心部分に
青いマークが出ています。
これは、「ここを中心にしますよ」と
いうことです。
中心地点を変更したい場合は、
中心にしたいところをクリックするだけで
中心点を変更する事ができます。

しかし今回は、角度も入力したいので、
通常であれば「回転」ツールを
ダブルクリックするといいのですが、
「回転」ツールを
ダブルクリックしてしまうと
せっかく中心にしたいと中心点を
変更したのにもとに戻ってしまいます。

そこで、今回はキーボードのボタンも使い、
中心地点と角度入力を同時にやる
やり方をお伝えします。

「選択」ツールで、
先ほど作成した花びらを選択。
左側のツールボックスにある
「回転」ツールに持ち替える。
「option(alt)」キーを押しながら、
中心にしたい箇所をクリック。

「回転」ツールの設定画面が開くので、
数字を入力し、「コピー」。
今回は花びらを6枚にするので、
60度にしました。
花びらが60度の位置にコピーされました。

これをどんどんコピーしていくのですが
何度も同じ操作をしていくと、
めんどくさいですし、中心部分がずれて
しまう可能性もあります。

そこで、ぜひこのやり方を覚えてください。

「編集」メニュー　→「変形」→
「変形の繰り返し」 ショートカットキーは
「⌘(ctrl)」＋「D」です。

これは、先ほどやった操作を
Illustratorが覚えていて、
同じ操作をやってくれるものになります。

もし、花びらの選択を解除してしまった
場合は、再度「選択」ツールで選択して
から行ってください。

ショートカットキーで説明します。
「⌘(ctrl)」を押しながら
キーボードの「D」をポンポンと押すと、
どんどん花びらがコピーされていきます。

6、好きな色を入れてみましょう。
今回は、黄色と赤のグラデーションに
してみました。
リアルにしたいので「線」は「なし」

7、花の中心に「楕円形」ツールで
正円を作成。
この正円には黄色とオレンジの
グラデーションを入れてみました。
グラデーションの作り方は
コチラのページに説明しています。

8、「選択」ツールで全てを選択し、
「⌘(ctrl)」＋「G」でグループ化する。
イラストを作成した場合など、
グループ化しておくと
移動する際にとても便利です。

紙に描いた手描きイラストに色をつける方法

手描きで描いたイラストや図形に
Illustratorで色をつけたい！

手描きで描いたイラストや図形、
筆文字などを取り込んで色をつけたい、
ステッカーにしたい、デザインに使用したい
ってありますよね。

やはり、デジタルが進んでいても、
手描きき感というのは
なんともいえない味があります。

これからご紹介する手描きのイラストを
取り込む前、描く時の注意点ですが
鉛筆などで描いた薄い線や
描く用紙に模様や色が入っていると
これからやる操作がうまくできないので
真っ白な紙にサインペンや筆などで
はっきりと描いてくださいね。
鉛筆の場合にも、はっきりと描いてください。

1、手書きのイラストをスキャンするか
写真を撮り、パソコンに取り込む。

※写真を携帯などで撮影する場合には
影にならないように注意してください。
スキャナーをお持ちでない方は、
コンビニなどのコピー機で
スキャンすることもできます。

adobeで提供しているアプリで
携帯で撮影するとすぐにIllustratorで
使用できる状態になるというものも
あるようですので、こちらが使えるようで
あれば使ってもいいと思います。
リンクを貼っておきますね。

2、「ファイル」メニュー　→「配置」で
取り込んだものを配置する。

新バージョンでは、配置する際に、
小さなアイコン状で出てきます。
そのままクリックすると、原寸サイズで
配置されます。
図形を作る要領でクリックしながら引っ張ると、
使用したいサイズになります。

もし、大きすぎた場合などは
「選択」ツールや「拡大縮小」ツールなどで
サイズを調整してください。

3、イラストが配置されたら、
上の方にある「画像トレース」をクリック。

トレースの結果には色々あるので
試してみてください。
カラー画像を編集することもできます。
（色が多いと編集結果の時間がかかります。）
今回は、特にさわらず次にいきます。

4、「拡張」ボタンを押す。
これ、忘れがちなのですが、これを押さないと
確定されたことになりません。

色をつけるには、Illustratorのデータに
変えないといけないのですが、
今の状態だと画像が変化しただけなので、
Illustrator上で色がつけられないのです。

「拡張」ボタンを押すことで、
Illustratorのデータ、ベクトルデータとなります。
つまり、Illustrator上で好きな箇所を消したり、
動かしたりすることができるということです。

５、色をつける。
色の付け方は２種類あります。
下記に紹介しますので好きな方法を試してください。

塗りつぶしツールから色をつける

「拡張」をした画像は、
Illustratorのデータに変換されました。

「ライブペイント」ツールを探してください。
今回のバージョン(CC2019）では
下図の場所に隠れています。
だいたいツールのカタチは似ていますので、
バケツのカタチを探してください。

「塗り」と「線」に好きな色を選んでおき、
先程変換したデータにマウスを近づけ
クリックすると、色が入ります。
もし、うまく色がはいらない場合には
「選択」ツールで選択してから
色をいれてください。

色を「なし」にしたい部分は、
色の設定で「なし」にしてクリック。

隙間に注意！
手描きイラストって
けっこう「隙間」がありますよね。

描いた本人はここから色を変えたい！と
思っていても、Illustrator上では
『つながっている』ことになり、
うまく「塗り」の色を入れることができません。

「オブジェクト」メニュー　→
「ライブペイント」で隙間の設定をしてください。
この設定をすると、多少スキマがあいていても
色をいれることができます。

通常通り色をつけ、自由に動かす

今回は、自由に動かしたり、
いらない箇所を削除したりする
やり方をお教えします。

上記にも書きましたように
「拡張」をした画像は、
Illustratorのデータに変換されるのですが
グループ化になっています。

１、「option(alt)」＋「⌘(ctrl)」＋「G」等で
グループ解除をします。

２、今までの図形と同じように
「選択」ツールで色を変更したい
図形を選択して色を変える。
必要のない部分は「delete」などで削除。

※グループ解除ができてないようであれば、
もう一度グループ解除してみてください。

上記にも書きましたように、
いらない背景などを選択し、
削除することもできます。

たいていはイラストのまわりの背景は
いらないので、「白」のままにするよりは
削除したほうがいいと思います。

３、色をつけおえたら「グループ化」しておく
ことをおすすめします。

いかがでしたでしょうか。
パソコンは苦手だし、Illustratorを
使いこなせてないけどイラストを描きたい！
という方も多いです。

フリーランスになるわけではないけど、
副業でやってみたいな、とか
転職するためにちょっとイラストが必要
という場合もあるかもしれません。

また、お友達に頼まれてステッカーを
作りたいとか、ちょっとしたロゴを
作成したいとか。

そういう時には今回紹介した
Illustratorで絵を描く方法を
試してみてくださいね。

直接習いたい方はコチラからも受け付けてます。
イラストレーター教室in沖縄のページにリンクしています。
リモートでのオンライン授業もやってます。