Illustratorでイラストを描こう

初めまして、ファンデリー デザイン・システム室のです。

エンジニア未経験で入社し今年で3年目です。

現在ではサーバーサイドからフロントエンド、Webデザインやイラスト作成、
最近では動画制作もしています。

直近では「私のおせち」のLPデザインからフロントコーディングを担当しました。

よろしくお願いします。

はじめに

今回はタイトル通り、Illustratorでイラストを描く方法についてお話しします。

イラストを描くことになったきっかけはミールタイムのカタログ冊子の
『イラストで分かる!栄養素のはたらき』というコーナー。
そこで使用する図やイラストを自社内で作ることになったためです。

初心者なりに色々試しつつ、簡単なものであればこの方法で描くことに落ち着きました。

イラストってどうやって描くんだ?と悩まれている方の参考になれば幸いです。

準備をしよう

今回はペンタブを使用しています。

トラックパッドでも操作はできますが、手首がめちゃくちゃ痛くなるのでペンタブかマウスを使うことをオススメします。
特にパスツールはペンタブかマウスじゃないと手首が破壊されます。

まず下書きを用意します。

ミールタイムのカタログで使用しているキャラクター「糖質くん」です

今回は商品開発の部署からいただいたラフ案をPhotoshopに取り込み、
それを元にしてブラシツールで下書きをしました。

紙に書いたものをスキャンしてそのまま使うときもあります。

主線を描こう

下書きをIllustratorで開き、不透明度を下げます。

下書きを編集してしまわないようレイヤーにロックをかけます。

新規レイヤーを作り、ペンツールを使用してパスを引いていきます。

ついでにレイヤーの名前をそれぞれ「レイヤー1」から「下書き」、「レイヤー2」から「主線」に変更しました。

始点をクリックして、

任意の場所をもう一度クリックすれば、その間に線を引くことができます。

曲線を描きたい時は、任意の場所をクリックしたままドラッグさせると
ハンドル(マチ針のようなもの)が出てくるので、それを動かして曲線の角度を調節してください。

パスの引き方については「慣れ」としか言いようがないので、
このサイトとかこのサイトを使って練習してみてください。私もまだ練習中です……。

こんな感じでどんどん線を引いていきましょう。

全部引き終わったのがこちら。

めっちゃはみ出しとるやんけ。仕事雑か?

……と思われるかもしれませんが、私は線と線の間に隙間ができるのが嫌なのでわざとはみ出して描いています。わざとです。

はみ出した部分はシェイプ形成ツールを使って消していきます。

主線レイヤーを選択して、

シェイプ形成ツールでoptionキーを押しながら消したい線をクリックすると

消えました!この調子でサクサク消していきましょう。

仕上げに線の太さや角度などを調節して主線は完成です。

色を塗ろう

ライブペイントツールを使用して塗っていきます。

主線レイヤーを選択した状態で、メニューバーから

「オブジェクト」→「ライブペイント」→「作成」

を選択します。

すると、新たに「ライブペイント」というグループができました。

ライブペイントツールに切り替え、選択箇所を塗りつぶしていきます。

ショートカットキー「K」またはシェイプ形成ツールを長押しすると切り替えができます。

カーソルを近づけるとワンクリックで塗りつぶされるエリアに赤い枠が出るので、
好きな色を選択して色を流し込んでいきます。

流し込みが終わりました。

このライブペイントツール、とても便利で、閉じられたエリアに限りパスを変形させても
塗りつぶしが消えません。

例えば、糖質くんの口の大きさを変えたいな〜と思った時、変形ツールを使うだけで

にこっ
ワハハ

自動的に塗りつぶしの範囲を広げてくれます。便利!

ただ、色の塗られたエリアに隙間ができると塗りが消えてしまうので注意してください。

糖質くんの茶色の部分を変形したいな〜と思って線を動かした時、
隙間ができると色が消えてしまいます

あとは任意の形式で出力してトリミングしたり解像度変えたりして完成です!

下書きから出力までだいたい1時間くらいでしょうか。
簡単なイラストであればもう少し早く完成させたいですね。

余談ですが、「オブジェクト」→「分割・拡張」から「オブジェクト」にチェックを入れて
OKを押すと主線と色が別グループに分割されるので、

イラストTシャツでよく見る塗り方

色部分だけズラしたりすることもできます。ズラすとちょっと今っぽいですね。……そうでもないか?

この方法は「主線を書く」「線に囲まれた部分を塗る」など動きが比較的イメージしやすいので
初めてイラスト描くよ〜という方でもチャレンジしやすいかなと思っています。

以上、Illustratorでイラストを描く方法でした。


現在デザインシステム室では、新しいメンバーを募集しています。
少しでも興味を持たれた方、ご応募お待ちしております!

募集要項およびエントリーフォーム >