Illustratorで画像トレースする方法!落書きからイラストを作ってみた。

Illustratorで画像トレースする方法!落書きからイラストを作ってみた。

姐さん

姐さん

これまで何度かIllustratorの「トレース機能」について書いてきました。

しかし、「実際どこまで線画を再現できるのさ?」と懐疑的な方が結構いるようなので、実際に弊社ホワイトボードの写メからイラストをおこしてみました。

「ググってわからないこと」が一瞬で解決するかも?

Webデザインを効率的に学びたい転職・就職を目指している誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します!

▼少しでも気になる方は、ぜひ公式サイトをご覧ください!
デジタルハリウッドSTUDIO by LIG

※この記事は、2013年01月29日に公開された記事を再編集したものです。

Photoshopでゴミ取りをする。

まずは、写真のゴミ取りから取り掛かります。

01

こちら、弊社 落書き ホワイトボードの写メです。

この状態からPhotoshopの「レイヤースタイル」→「トーンカーブ」で周りを白く飛ばし、余計な背景を消しゴムツールで削ってゆきます。
02

同じ作業をなんどか繰り返して……
03

こんな感じの、なるべく線だけが見える画像にします。

画像トレースでIllustratorに線画を取り込む。

(編集部注:下記のIllustratorのバージョンは、IllustratorCS3となっております。)

04

先ほど作った画像をIllustratorに配置し、画像を選択した状態で、「ウィンドウ」→「画像トレース」を開きます。

 

05

ここを調整してプレビューを確認しながらトレースをすると割りとうまくいきます。

 

06

しきい値が多いほど詳細に取り込まれます。

調整が決まったら、プレビューを外してレッツトレース!!

次に、トレースされた画像を選択して「オブジェクト」→「画像トレース」→「拡張」で線画をパス化しておきます。

ライブペイントで色を塗る!

出来た線画をぐるっと選択して、「オブジェクト」→「ライブペイント」をクリックします。
すると・・・Photoshopの塗りつぶしツールのごとく、色が塗れるようになります。

 

08

当然隙間があいていると、予定外のところまで色が流れこんでしまうのですが・・・。

「オブジェクト」→「ライブペイント」→「隙間オプション」で調整できます。

 

09

これぐらいの隙間は閉じてるものとみなしますよ~っていう設定をしてくれるので、
ちょっと隙間が開いてる領域も塗りつぶしてくれます。便利!

 

11

どうにも隙間が開きすぎなところはダイレクト選択ツールで黒の線画をちょっと伸ばしてみるとうまくつながりますよ。

 

12

あらかた塗り終えたら「オブジェクト」→「分割・拡張」で塗りと線画を分離して色調整……。

で……こんな感じになりました。

13

色の調整は前回ご紹介した「オブジェクトの再配色」使ってみました。

困ったときの、チーク! グラデーション発動でこんな感じになりました。

う~ん。アクセサリーの部分がちょっとグダグダな結果に。

まとめ

写メからでもそれなりのイラストに仕上げることができたと思います!

鉛筆画などでも境界をはっきりさせることを意識して描けば、なかなか良い感じにトレースしてくれますよ。お試しあれ!

 

【Illustratorを使ってできること特集】

手書きイラストをIllustratorやPhotoshop用のブラシにできる「Adobe Capture」入門

かわいいイラストを描くためのIllustrator講座

Illustratorで簡単にできる加工・表現テクニック

Web制作のご相談・料金のお見積りはこちらから

よくある質問

画像トレースでイラストを作成する手順は?

元画像のごみ取りをして線だけが見える状態にする→画像トレース機能で線画を取り込む→ライブペイントで色を塗るという流れです。

画像トレースのコツは?

色を塗るときは、「隙間オプション」を設定すると細かな隙間があても色が流れ込みません。隙間が空きすぎてしまっている場合は、ダイレクト選択ツールで線画を伸ばしてください。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーの白浜です。ウェブデザイナーとして日々修行中。マンガと音楽とお米が好きです。よろしくお願いします。

このメンバーの記事をもっと読む
Illustratorの使い方 | 25 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL