記事の詳細

たくさんのIllustratorさんがIllustratorよりPhotoshopを愛用するのは、ピクセル形式の書きやすさ故だと思うのですが、やはりデザイナーとしては拡大縮小に強く、また比較的単純な形であれば容量としても軽いベクター形式でイラストがあるととてもラクチンというのが正直なところ。

「でもIllustratorだと、線のヌケ感だったり、色の緻密なグラデーションだったり、表現が厳しいところあるでしょう?」

はいまったくもってその通りでございます。

ですが、ベクターにはベクターの良さがあるもの。
本日は手描きしたイラストのアウトラインをとって、そこに手書きっぽく着彩していこうと思います。
流れとしてはこんな感じ

  • 手描きで絵を起こし、Photoshopで取り込んで白黒画像にする
  • Illustratorに配置してアウトラインを作成する
  • ライブペイントツールを使って着彩した後、手書き風に加工する

手描きで絵を起こし、Photoshopで取り込んで白黒画像にする

Photoshopに直接描いたほうが効率はいいのですが、ウチにはタブペンがございませんで、さくっと裏紙に絵を描きます。
良く使うペンはプラチナ万年筆「preppy」 万年筆の書き心地でナカ芯も変えられる400円前後のインクペン。万年筆は高いけど、使ってみたいなぁという方にはオススメです。Gペンの書き心地に少し似ている、かも……。

preppy

絵はこんな感じ。トーンカーブとレイヤーコピー+オーバーレイ+スクリーンで調節しています。

Illustratorのライブペイントツールを使ってイラストを描く【原画】

イラストを描く方にとっては「線のヌケ感」を大事にされている方もいらっしゃると思います。

こういうところとか

Illustratorのライブペイントツールを使ってイラストを描く【線のヌケ】

こういうところとか

Illustratorだとここにパスがないと色が付けられない、という点で非常に面倒くさいので、Photoshopで着彩する方が多いかと思うのですが、今回はこのヌケ感を残しながら着彩を行います。

 

Illustratorに配置してアウトラインを取る

psdを直接Illustratorで開くと大変重たいので、場合によっては新規ファイル作成→画像を配置 でリンク配置をするとよいでしょう。画像トレースはリンク画像でも可能です。
絵の画像をクリックし、上部サブメニューから画像トレース、またはオブジェクトから画像トレースを選びます。

Illustratorのライブペイントツールを使ってイラストを描く【画像トレース1】 Illustratorのライブペイントツールを使ってイラストを描く【画像トレース2】

時間がかかるかも、と言われますが白黒画像ならそんなに時間はかかりません。トレースが終わったら「拡張」を選択します。

Illustratorのライブペイントツールを使ってイラストを描く【画像トレースからの拡張】

パスになったので、ここから白い部分を撤去します。白い部分をクリックして、共通で選択範囲をとると、非常に簡単に画像がとれます。
Illustratorのライブペイントツールを使ってイラストを描く【共通の塗り】

わかりにくいので下に赤を引くとこんな感じ。

Illustratorのライブペイントツールを使ってイラストを描く【パス抜き】

綺麗に取れてますね。

 

ライブペイントツールを使って着彩した後、手書き風に加工する

Illustratorのライブペイントツールを使ってイラストを描く【ライブペイントツール】

ライブペイントツールはシェイプ形成ツールの下の階層に入っています。これを選択して、ライブペイントグループを作成しましょう。

Illustratorのライブペイントツールを使ってイラストを描く【ライブペイントグループ】

カラーパネルで色を作り、パスの閉じている部分をクリックすると、自動的にその色が適応されます。

Illustratorのライブペイントツールを使ってイラストを描く【ライブペイント:着彩】

クローズドパスになっていない部分の処理としては、適当にパスを作成し、そこを閉じます。閉じた後、塗り、線ともに非表示にして、「ライブペイント結合」をクリックします。

Illustratorのライブペイントツールを使ってイラストを描く【ライブペイント:ライブペイント結合】

Illustratorのライブペイントツールを使ってイラストを描く【ライブペイント:ライブペイント結合】

Illustratorのライブペイントツールを使ってイラストを描く【ライブペイント:ライブペイント結合】

 

すると、そこがクローズドパスと認識され、着彩が可能な状態になります。パスが存在しているところは、パスファインダを使わずとも境界線で色分けがなされるので、これを利用して着彩していきます。

ざっくり着彩がおわったものがこちら。

Illustratorのライブペイントツールを使ってイラストを描く【ライブペイント:ライブペイント着彩済】

ライブトレースのいいところは、ごみをとってもそこが自動的に保管されることです。穴が開かないんですね。色の範囲がパスでおおわれていれば、パスのかたちは変形することができます。

Illustratorのライブペイントツールを使ってイラストを描く【ライブペイント:ライブペイントごみとり】

Illustratorのライブペイントツールを使ってイラストを描く【ライブペイント:ライブペイントごみとり2】

Illustratorのライブペイントツールを使ってイラストを描く【ライブペイント:ライブペイント:パスの変形】Illustratorのライブペイントツールを使ってイラストを描く【ライブペイント:ライブペイント:パスの変形2】
ライブペイントは拡張することが出来ます。拡張すると、それぞれのパーツに自動的に変換されるので、グラデーションやパターン、フィルターなどを適応させることが出来ます。

Illustratorのライブペイントツールを使ってイラストを描く【ライブペイント:ライブペイント:拡張】

パターンを適応

Illustratorのライブペイントツールを使ってイラストを描く【パターンを適応】

グラデーションを適応

Illustratorのライブペイントツールを使ってイラストを描く【グラデーションを適応】

フィルター「落書き」を適応

Illustratorのライブペイントツールを使ってイラストを描く【フィルターを適応】

あとは若干色をコントロールして出来上がり。

Illustratorのライブペイントツールを使ってイラストを描く【完成】

 

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
インクループ株式会社

インクループ株式会社

インクループ株式会社は、データ分析、市場調査に基づく企画立案、コンテンツ制作、運用を通じてお客様の目標を実現する会社です。WEBサイトをもっと活用したい、ECサイトの売上をもっと増やしたいなどのお悩みをお持ちの方はぜひお気軽にお問い合わせください。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る