イラレ 使い方 PR

イラレ 画像トレースの使い方!イラストの編集とパス

記事内に商品プロモーションを含む場合があります

イラレの便利な機能の一つ 画像トレース

写真や下書き線画をパス(ラスター画)にしてくれる神機能です。

本項では、画像トレースのやり方・綺麗にトレースするコツ・上手くいかない時の原因対策などをまとめています。

よろしければ、ぜひ参考にしてください。

ジーナ
ジーナ
ペインターには必須のスキル。

illustrator バナー

イラレ 画像トレースのやり方

画像トレースとは、画像をAIが分析して自動でパスを作る機能です。

自動なので超高速&楽ちんな反面、完全には思い通りになりません

上手く付き合っていくポイントは次の3点です。

【illustrator:画像トレースと上手く付き合う秘訣】

  • トレース精度に完璧を求めない
  • トレース精度を高めるために 手動補正は必須 でやる。
  • 塗り精度を高めるために パス補正は必須 でやる。

ジーナ
ジーナ
手動補正は必要だけど、画像トレースの恩恵は計り知れないほど大きい

画像トレースのやり方1. 画像の取り込み

画像トレースで最初にやることは画像の取り込みです。

【画像取り込みの方法】

  1. フォルダからイラレのキャンバスに向けて 直接ドロップでする。イラレ 画像トレース やり方1 画像をキャンバスにドロップ

【元画像は複製しておくのがおすすめ】

取り込んだ画像は画像トレースすると全く別モノになります。

トレース後、修正や比較は必ずやるので、取り込んだ画像は一先ず複製し、比較用として別レイヤーに保存&非表示にしておくのがおすすめです。

画像トレースのやり方2. 画像トレース作成・調整

画像を取り込んだら、さっそく画像トレース&調整をやっていきます。

【illustrator:画像トレースのやり方】

  1. 選択ツールでトレースしたい画像を選択
  2. メニュー>オブジェクト>画像トレース>作成 をクリック。イラレ 画像トレース やり方2 画像トレース 作成
  3. トレース結果を確認イラレ 画像トレース やり方3 トレース結果 初期

ただ画像トレースをしただけだと、よほど良い素材でない限りは上図のような微妙な結果になります。

精度を高めるには、最適なしきい値に調整する必要があります。

【しきい値とは?】

しきい値とは、輪郭線を黒く変換するための基準値のことです。
「しきい値」より明るいピクセルはすべて白に、しきい値より暗いピクセルはすべて黒に変換します。

【illustrator:画像トレースの「しきい値」調整方法】

  1. 選択ツール画像を選択。イラレ 画像トレース やり方4 オブジェクトを選択
  2. メニュー>ウィンドウ>画像トレース をクリックして画像トレースパネルを表示する。イラレ 画像トレース パス化 やり方 メニュー>ウインドウ
  3. 「□プレビューにチェック」があることを確認の上、しきい値の値を何パターンか入れてみる
    ※入力方法:おすすめはスライダーよりも値の直接入力。現状値より少しずつプラスorマイナスして一番きれいに出力される値を探すイラレ 画像トレース やり方5 しきい値調整
  4. 妥協できるトレース結果になったら、「□プレビュー」のチェックを外して「トレース」をクリックする。イラレ 画像トレース やり方7 トレースボタンをクリック
  5. ※捕捉:線だけをトレースしたいときは、「詳細」を開いて□ホワイトを無視にチェックを入れて、「トレース」をクリックする。イラレ 画像トレース やり方7 捕捉 ホワイトを無視
  6. トレース結果を確認する。イラレ 画像トレース しきい値170の画像

今回はしきい値170を採用しました。

初期値128からの変更となり、トレース精度は別モノと言えます。

イラレ 画像トレース しきい値128と170の画像 比較

ちなみに、しきい値は大きすぎても小さすぎても綺麗にトレース出来ません

  • しきい値が小さすぎる:画面全体が白くなる。
  • しきい値が大きすぎる:画面全体が黒くなる。

最適な値を見つけるには、地味に細かくトライ&エラーするしかありません。

なんだかんだ、初期値のマイナス50くらいから10ずつプラスしていって、一番きれいな線が出た値を採用するのがセオリーかな。と思います。

【今回のサンプルのしきい値によるトレース結果比較】

イラレ 画像トレース やり方6 しきい値比較

ジーナ
ジーナ
素材によって結果は違うので、地味なトライ&エラーを試してみるしかない。

画像トレースのやり方3. オブジェクトのパス化・単純化

画像トレースをしたらベクター線画が出来てるように見えますが、実はまだオブジェクトのままです。

この後もイラレで編集を進めるなら、パス化が必須です。

【illustrator:オブジェクトのパス化】

  1. 選択ツールでパス化したいオブジェクトをクリックイラレ 画像トレース パス化 やり方1 オブジェクトを選択
  2. ツールバー内にある「拡張」ボタンをクリックイラレ 画像トレース パス化 やり方2 拡張ボタン
  3. メニュー>オブジェクト>パス>パスの単純化をクリック。イラレ 画像トレース パス化 やり方3 パスの単純化

パスの単純化は必須ではありませんが、結構無駄にパス化されているので、ココで一度整理しておくのがおすすめです。

\パスの単純化をすると無駄なパスがかなり減らせる/

イラレ 画像トレース パス化 やり方3 パスの単純化 ビフォーアフター 比較

イラレ 画像トレース後の色と塗り

イラレ 画像トレース後の色と塗り1. 不足している線を追記

塗りに入る前に、次の2点を適宜加筆・修正しておくのがおすすめです。

◎画像トレースで消えてしまった線

  • 画像トレースでは、白と黒を最も拾えるしきい値で実行するので、細い線は捉えきれないことが多い。
  • 抜け落ちた線は塗りの前に手動で加筆するのがセオリー。

◎大きい隙間

  • 画像トレースで途切れることも、元々隙間がある場合もある。
  • イラレの特性上、線が途切れた箇所塗りは適用できないので、線はできるだけ繋げるか隙間を極小にする。
  • ※隙間が小さいなら「ライブペイント」でもカバーできるため、完全に閉じる必要はない。

\目立つ隙間は小さくしておくとこの後が楽/

イラレ 画像トレース 塗り前 補正したほうがよい箇所 サンプル

ジーナ
ジーナ
塗りながらの微調整でもいいけど、最初にやっておいたほうがサクサク進められるよ。

イラレ 画像トレース後の色と塗り2. ライブペイントで塗り

画像トレース+パス化した後の塗り・加筆は普段のイラレの編集と全く同じですが、最も手をかけずに着色するならライブペイントを使うのがおすすめです。

【ライブペイントとは?】

ライブペイントとは、多少の隙間閉じられたパスと判断して塗りを行うイラレの特殊技術。

【illustrator:ライブペイントのやり方】

  1. 選択ツールをクリック。イラストレーター 選択ツール
  2. マウスをドラッグして、塗りたいパスを全部選択する。イラストレーター 塗りつぶし ライブペイントのやり方1 オブジェクトを全選択
  3. メニュー>オブジェクト>ライブペイント>作成 をクリック。イラストレーター 塗りつぶし ライブペイントのやり方2 ライブペイント作成
  4. ポップアップメッセージはOKをクリック。イラストレーター 塗りつぶし ライブペイントのやり方3 メッセージ
  5. ライブペイントツールをクリックしたあと、太線で囲まれた面をクリック。イラストレーター 塗りつぶし ライブペイントのやり方4 ライブペイントツールでパーツをクリック完成
  6. イラストレーター 塗りつぶし ライブペイントのやり方5 塗りつぶしとスキマ 図解

ライブペイントも画像トレース同様、しきい値で隙間を判断してるので、隙間が広すぎると閉じたパスとして認識してくれません

\パスの隙間が広いと塗れるエリアはとても少ない/

イラレ 画像トレース 塗り やり方1 補正なしライブペイント

ライブペイントの精度を高める方法は次の2つです。

  1. ライブペイント>隙間オプションパネル を開き「隙間の許容」を大きくする。
  2. .をやってもライブペイントが認識できないなら、パスを直接修正して隙間を極小にする。

orのどちらかだけで全て対処するというより、どちらもやるのが基本です。

隙間を適度に調整すれば、ほぼ全域の着色ができます。

\隙間補正前(左)と隙間補正後(右):ライブペイントできる範囲比較/

イラレ 画像トレース 塗り パスの調整後 ライブペイントで塗り出来る範囲が広がった 比較画像

イラレ 画像トレースの精度を上げるコツ

画像トレースの精度を上げるコツは次の2点です。

  • 解像度の高い画像を使う。
  • 設定パネルでしきい値を調整する。

解像度の高い画像を使う

画像トレースは、画像の白と黒のコントラスト差でアウトラインを読み取ります。

そのため、輪郭の滲んだような解像度の低い画像細い線ほどトレース精度は下がります。

\コントラストがはっきりした画像・高解像度の画像ほど綺麗にトレースできる/

イラレ 画像トレース 精度を高めるコツ 解像度の高い画像 トレース結果比較

手描きイラストをトレースする場合は、線にペン入れするなどして濃淡を無くすと細い線でもトレース精度は上がります。

設定パネルで詳細を調整

画像トレースは、しきい値次第で精度が変わります。

初期値で最高の結果が出る事はまずないので、必ず設定パネルでジャストのしきい値を探してください。

ジーナ
ジーナ
ほぼ自動とは言っても、人の手必ず必要。完全にAI任せちゃダメなツールでもある‥‥。

イラレ 画像トレースできない時の原因・対策

画像トレース出来ない時の原因は主に2つです。

プレビューにチェック

トレースボタンが押せない場合に多いのが「□プレビュー」にチェックが入っているパターン。

画像トレースパネルの「□プレビュー」と「トレース」は連動していて、プレビューを外さないとトレースボタンは活性化しません。

イラレ 画像トレース やり方7 トレースボタンをクリック

全ての値を設定した後は、「□プレビュー」のチェックを外してから「トレースボタン」を押すようにしましょう。

レイヤーがロックされている

操作しているうちに、気づかないうちにロックしているパターンで、超凡ミスですが時々あります。

操作出来ない時は、レイヤーパネルを見て鍵マークがついてないか確認してみてください。

イラレ 画像トレース トレース出来ない原因 レイヤーにロック

もし鍵マークがついていたら、鍵アイコンをクリックすると解除されます。

イラレ 画像トレース まとめ

illustrator バナー

イラレの画像トレースは、手描きイラストのベクター化・写真画像のトレースなど、ペイント系作品の編集に欠かせないツールです。

残念ながら完璧な精度には絶対なりませんが、必要最低限の追記・修正で済むので確実に時短できるのが魅力です。

画像トレースと上手く付き合っていくポイントは次の3つ。

【illustrator:画像トレースと上手く付き合う秘訣】

  • トレース精度に完璧を求めない
  • トレース精度を高めるために 手動補正は必須 でやる。
  • 塗り精度を高めるために パス補正は必須 でやる。

画像トレースは 複雑な線画でも一瞬でベクター化してくれるから、めちゃくちゃ便利。

ペイント系の編集をする人には必須の機能なので、ぜひマスターしてください。

ジーナ
ジーナ
画像トレースがあるから、イラレでイラスト描くのは楽しい

イラストレーターで切り抜き!画像トリミングの方法イラストレーターで画像を切り抜く方法は3種類。うち、主に使うのはクリッピングマスクを使う方法。❶画像素材をざっくりとカットしたい?⇒「画像の切り抜き」でトリミング。❷イメージ通りの形でカットしたい?⇒図形orペンツールでオブジェクトを作成し、クリッピングマスクで切り抜き。....詳細はコチラ。...
イラストレーターで塗りつぶしするツールと方法・illustratorイラストレーターには、ペイントツールにあるようなバケツツールはないものの、背景はキャンバスより大きい長方形ツールの面を塗って最下層レイヤーへの配置で対応可。線画もライブペイント」で自動パーツ分け&塗り分けできるからとても便利。図形は線と塗りで一瞬に塗りつぶしできる。....illustratorの塗り方法・詳細はコチラ。...
イラレ 矢印の作り方!初心者でも簡単・illustratorイラレで作るシンプルな線矢印は、色・太さ・矢印の形・線幅・長さ・曲線の変更がいつでも自由自在。とても使いやすいのが特徴。対して縁取りや3D加工した矢印は後からラインを変更するのは線矢印より面倒に。いずれも初心者でも簡単に作れ、後修正もやりやすいです。....illustrator:詳細はコチラ。...
イラレで背景透過した画像・イラストの書き出し設定とやり方イラレで制作した作品は、素材としての利用も多く背景透過できるPNGでの書き出し頻度は高め。基本、以下3つのポイントをすべて満たせば出力できないことはまずない。❶アートボードの背景を透明グリッドにする。❷PNGの書き出し設定で背景を透明で保存する。❸書き出し時にPNG形式を選択する。....やり方・詳細はコチラ。...
イラレの反転方法!図形オブジェクト・反転コピーの使い方イラレで反転・反転コピーする方法は幾つかあるものの、基本的に「個別に変更」を覚えておけば困ることはまずない。イラレは図形のコピペ・反転・合成を頻繁に使いがちなツールで、結果は同じでも、「何を使うか」で作業時間が大きくかわるのが特徴。事例交えて初心者向けに使い方を解説。....詳細はコチラ。...
イラレのアートボード・サイズ変更の方法とキャンバス設定イラレのアートボードは出力範囲のこと。編集時の背景としても使え、複数並べらるのでパーツの仮置きにも最適。また、イラレでは流用・書き出し変更はたびたびあるのでスムーズに変更できるようになっておくと、後々楽なやつ。方法は3つありますが、値で変更できる「アートボードオプション」を使うのがおすすめ。....やり方・詳細はコチラ。...
イラレ クリッピングマスク
イラレでクリッピングマスク!編集の方法とポイントイラレのクリッピングマスクの編集ルールは3つ。❶テキストオブジェクトは上のレイヤーに配置する。❷画像オブジェクトは下のレイヤーに配置する。❸テキストオブジェクトと画像オブジェクトは同じレイヤーに配置する。....方法とポイントの詳細はコチラ。...
イラレ 吹き出し
イラレで吹き出し!簡単な作り方とデザイン illustrator吹き出しは凝ったデザインも多いですが、使いやすくてオシャレなのはシンプルな吹き出しデザイン。そしてシンプルなデザインは超簡単に作れるので、素材をダウンロードするよりも自作するほうがおすすめ。❶円オブジェクトを作る。❷ペン追加ツールで3つのアンカーポイントを追加する。❸ ダイレクト選択ツールで真ん中のアンカーを引き延ばす。....詳細はコチラ。illustrator:...