記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

Illustratorで画像をトレースする方法

Illustratorでは、画像のトレース方法を使えば、ラスター画像を簡単にベクター画像に変換することが可能です。ここでは、トレースとは何かに加えて、画像を出しながら詳しい画像のトレース方法を解説します。

カテゴリ: Illustrator

本記事では画像のトレース方法を解説します。

画像のトレースとは

Illustratorの画像トレースとは、ラスター画像(格子状のドッドの集合体で表現される画像形式)をベクター画像(線、色、曲線など解析幾何的な数値データによってデータが再現される画像形式)に変換できる機能です。

ベクター画像は拡大・縮小しても画像の質が劣化せず、ラスター画像に比べてデータサイズも軽い画像形式です。複雑な画像表現には適しませんが、様々なサイズで利用されるロゴやキャラクターイラストなどに適しており、広く用いられています。

ポスターやノベルティグッズを作る際に用いるロゴやキャラクターのデータは、ベクター画像であることが望ましいとされています。また、Webに用いるロゴなども、データサイズを軽くしたり、端末によって表示サイズが変わっても画質が保たれるというメリットからベクター画像が用いられるケースが増えてきています。

例えば、著名なイラストレーターや漫画家にキャラクターデザインを依頼したい企画があっても、その作家はデジタル対応していないという状況もあるかと思います。また、自分が紙に書いたイラストやロゴをベクター画像に変換したいといった状況もあるかもしれません。

そうしたケースでも、画像トレース機能を使えば、アナログのデータをベクター画像に変換することができるのです。

早速その方法を紹介します。

画像のトレース方法

1.画像を配置する

画面上部にあるメニューバーからファイルをクリックし、「配置…」を選択します。

配置するためのモーダルウィンドウが開きますので、ここで任意の画像を選択します。ここではpngというラスター画像形式の画像をトレースしてみましょう。画像が選択できたら「配置」ボタンをクリックします。

上の画像のように配置ができました。

2.「画像トレース」を選択する

画面上部のメニューバーからウィンドをクリックし、「画像トレース」を選択します。

3.画像トレースパネルで各項目を設定する

メニューから「画像トレース」を選択すると、画像トレースの設定パネルが開きます。

以下の画像と表で画像トレースパネルの各項目について説明します。

画像トレースパネルで各項目の説明

名称 説明
①プリセット 「写真(高精度)」「写真(低精度)」「3色変換」「6色変換」「16色変換」「グレーの色合い」「白黒のロゴ」「スケッチアート」「シルエット」「ラインアート」など画像トレースのプリセット設定を選択できます。
②表示 「トレース結果」「トレース結果とアウトライン」「アウトライン」「アウトラインと元の画像」「元の画像」というように、トレースしたいオブジェクトの表示を変更します。
③カラーモード 「カラー」「グレースケール」「白黒」などのカラーモードを選択できます。
④パレット 「カラー」か「グレースケール」のカラーモードの時に指定できる項目です。トレースする色の数などを指定することができます。
⑤カラー カラーモードが「カラー」のときに表示される項目です。トレースする色数などを指定することができます。
⑥グレー カラーモードが「グレースケール」のときに表示される項目です。グレースケールを調整することができます。
⑦しきい値 カラーモードが「白黒」のときに表示される項目です。しきい値より暗いピクセルは黒に変換されます。
⑧詳細 詳細をクリックすると⑨〜⑮の項目が表示されます。
⑨パス 元のオリジナル画像をどれくらいの精度でとレースするかを調整できます。
⑩コーナー コーナーなど曲線の部分の精度を調整します。値が大きくなるほど、なめらかな曲線になります。
⑪ノイズ ノイズを減らす調整ができます。値が大きいほどノイズが減ります。
⑫方式 切り抜かれたパスが作成できる「隣接」と、重なったパスを統合する「重なり」のアイコンからトレース方式を選択できます。
⑬作成 オリジナルの画像の塗りの部分もトレース結果に反映させる「塗り」と、オリジナルの画像の線部分のみをトレース結果に反映させる「線」を選択できます。
⑭線 ⑬作成で、「線」を選択したときに調整できる項目です。ピクセル単位で線に変換する範囲を指定できます。
⑮オプション フリーハンドの手ブレなどによって生じたわずかな曲線を直線に変換する「曲線にスナップ」、オリジナル画像の白い塗り部分を無視してトレースをすることができす「ホワイトを無視」といった設定が可能です。

4.画像トレースパネルの「トレース」をクリックする

各項目が調整できたらプレビューのチェックを外し、「トレース」ボタンをクリックします。

5.トレースした画像をパス化する

上の画像のようにトレースができました。次にトレースした画像をパス化していきます。画面上部にあるコントロールパネルにある「拡張」をクリックします。

上の画像のように、画像がパス化されました。これでラスター画像が、ベクター画像に切り替わりました。

6.パスを単純化する

ラスター画像をベクター画像に切り替えると、どうしてもアンカーポイントが多くなりがちです。これを解消させるために、アンカーポイントを減らしパスを単純化する作業を行っておくと画像のデータが軽くなります。画面上部にあるメニューバーからオブジェクトをクリックし、「パス」から「単純化」を選択します。

メニューから「単純化」を選択すると、単純化の設定パネルが表示されます。ここで各項目を調整します。アンカーポイントを削減していくことで、画像も少し変化しますのでプレビューを見ながら調整すると良いでしょう。この機能を使えば元の画像のイメージを保持しながら、アンカーポイントを減らすことができるので大変便利です。

以下の画像と表で単純化パネルで各項目について説明します。

単純化パネルで各項目の説明

名称 説明
①曲線の単純化 曲線を単純化しアンカーポイントを減らしていく設定ができます。
②コーナーポイント角度のしきい値 コーナーポイントを調整することでアンカーポイントを削減できます。
③自動単純化 自動で単純化できるボタンです。
④直線に変換 曲線をすべて直線に置き換えることができます。
⑤変更前のパスを表示 変更前のパスを表示することができます。
⑥最新の設定を保持し、このダイアログを直接開く 最新の設定を保持したまま、単純化パネルのダイアログを開くことができます。複数の画像を同じ設定で単純化したい場合などにチェックを入れておくと便利です。

まとめ

ベクター画像でロゴやイラストを作成するには、ペジェ曲線の扱いに慣れが必要で経験やスキルが必要になってきます。しかし、今回紹介した画像トレース方法を用いれば、ラスター画像を簡単にベクター画像に変換することができます。

紙にフリーハンドで描いたキャラクターイラストやロゴなども、スキャニングして画像トレースにかければベクター画像になります。また、デジタルデータになっていない古いロゴの清刷りなどを、ベクターデータに変換するといったことも可能になります。

大変便利なので本記事を参考にして、画像トレース方法を覚えてしまいましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。