画像付きで解説！IllustratorでSVGを書き出してwebページで使う方法
susan すーさんのweblog
画像付きで解説！Illustratorで画像をトレースする方法！
susan
記事内に商品プロモーションを含む場合があります
Adobe Illustratorの中でも「画像トレース」は注目される機能の一つです。
これは、ピクセルベースのラスター画像を、解像度に関わらず自由自在に拡大縮小できるベクターデータに変換する機能を指します。
要は通常の画像や写真をイラストっぽくすることができてしまう機能のことです。
本記事では、そんな画像トレースの方法を、具体的な手順を画像付きで詳しく解説していきます。
Webデザイナーにおすすめのパソコンはこちら！
Webデザインが学べるおすすめのスクールに関しては【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較
フリーランスデザイナー用のエージェントに関して知りたい方はフリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？で詳しく解説していますので、ぜひチェックしてみてください。
あわせて読みたい
フリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？
Contents
画像トレースとは
画像トレースとは、一言で言えば、画像を「描き直す」機能のことを指します。
ラスター画像（写真や描いたイラストなど）は、データが画素（ピクセル）という単位で構成されています。
これに対して、ベクター画像は線や形状といった要素で表現されます。
これにより、ベクターデータは大きさを自由に変更しても線の鮮明さが損なわれません。
画像トレースは、このラスター画像をベクター画像に変換し、拡大・縮小や色の変更、形状の編集など、イラストレーションとしての自由度を大きく広げることができます。
※ラスター画像とは
ラスター画像とはピクセル型式で表示される画像のことを指し、主に写真などがこれにあたります。
ピクセル型式であるラスター画像は一つの点がいくつも合わさって大きな画像を構成していますが、拡大すると画像の品質が目に見えて落ちるという欠点があります。
※ベクター画像とは
ベクター画像はラスター画像とは異なり、ピクセル型式ではなく線や色、カーブなどを数値として記録する型式をとっています。
ベクター型式の画像は拡大しても画質を落とすことなく、そのままのクオリティを維持させることができます。
しかし、写真などの複雑な構成をしている画像を取り扱う場合はラスター型式の方が優れています。
Illustratorに関するおすすめの記事
画像トレースのメリット・デメリット
以下画像トレースのメリット・デメリットです。
画像トレースのメリット
主なメリット
- 画像のディテールを保ちつつベクター化できる
- 画質が劣化しない
- 元の画像の色調や明度を維持できる
画像のディテールを保ちつつベクター化できる
ディテールを保ちつつ、画像をベクター化できます。
これにより、原画の鮮やかさや表現力を保ったまま、拡大・縮小や色彩の調整が可能になります。
画質が劣化しない
ベクターデータは解像度に依存しないため、どんなに拡大しても画質が劣化しないのが大きな魅力です。
元の画像の色調や明度を維持できる
トレース後も元の画像の色調や明度を維持できることにより、写真などのリアルな色合いを再現したイラストレーションも可能になります。
画像トレースのデメリット
主なデメリット
- 細かい部分のトレースは難しい
- 色彩がうまく再現できないこともある
細かい部分のトレースは難しい
これは、トレースは自動的に行われるため、細かな部分は元の画像とは異なる結果になることがあるからです。
色彩がうまく再現できないこともある
画像の種類によっては、色彩がうまく再現できないこともあります。
たとえば、グラデーションが多い画像や複雑な色合いの画像は、トレース後に色がぼやけることがあります。
Illustrator学習におすすめの書籍
画像トレースをする前の注意点
Illustratorの「画像トレース」機能を利用する際には以下の点に注意しておく必要があります。
注意点
- 元画像の品質を考慮する
- 詳細設定を好みに合わせる
- パスが複雑になりすぎないようにする
- 人間の手を加える
- 著作権を事前に確認しておく
元画像の品質を考慮する
高品質の元画像から始めることが最良の結果を得るための鍵です。
低解像度や画質の悪い画像からトレースすると、結果も粗くなりがちです。
詳細設定を好みに合わせる
トレースする際の詳細設定は、結果に大きく影響します。
「パス」「コーナー」「ノイズ」などの設定を調整して、最適な結果を得るように努めましょう。
また、色数も重要な設定の一つで、多すぎると複雑になりすぎ、少なすぎると元画像から離れてしまいます。
パスが複雑になりすぎないようにする
トレースした結果のパスが複雑すぎると、後で編集が困難になります。
必要以上にパスを増やさないようにしましょう。
人間の手を加える
自動トレース機能は非常に便利ですが、それだけで完璧な結果を得ることは難しい場合があります。
トレース後は手動で微調整を加えることが求められることが多いです。
著作権を事前に確認しておく
他人の作品をトレースする際には、著作権を事前に確認することが重要です。
必ず使用許可を得てから行いましょう。
画像トレースのプリセットの種類
Illustratorには様々な種類の画像トレース用のモードが用意されています。
例えば、「デフォルト」では、一般的なラスター画像をベクター化します。
「ハイカラー」は色彩豊かな画像向け、「グレースケール」は白黒のグラデーション画像向け、「ラインアート」は線画をクリアにトレースするのに適しています。
使用する画像や目的に合わせて最適なトレース設定を選びましょう。
画像トレース用のモードは以下になります。
画像トレース用のモード
- デフォルト
- Illustratorが自動的に色を選択し、その色を用いてベクター化します。
- ハイフィデリティフォト
- 高解像度の写真をベクター化するのに適しています。
- ローフィデリティフォト
- 低解像度の写真または画質が低い画像をベクター化するのに適しています。
- ハンドドローンスケッチ
- 手描きのスケッチを線画でベクター化するのに適しています。
- シェイプバスト
- シェイプ（形）を優先してトレースします。色はそれほど重要視されません。
- ラインアート
- 線画やアウトラインをクリアにトレースするのに適しています。
- シルエット
- 画像の形状やシルエットを黒と白でトレースします。
- テクニカルイラスト
- 詳細なラインアートやテクニカルイラストをベクター化するのに適しています。
- シェイドアート
- 陰影やグラデーションを重視してベクター化します。
- 三色、六色、十六色
- それぞれ3色、6色、16色でベクター化します。色数が多いほど詳細になりますが、ファイルサイズも大きくなります。
- グレースケール
- 白と黒とその中間色だけでベクター化します。
- ブラックアンドホワイト
- モノクロでベクター化します。
それぞれの詳しい使い方を解説していきます。
画像トレースの手順
以下に、Illustratorで画像をトレースする基本的な手順を説明していきます。
ステップ1: アートボードの作成
まず、Illustratorを開き、「ファイル」メニューから「新規作成」を選びます。
アートボードのサイズやモードを選んだら、「OK」をクリックします。
ステップ2: 画像の取り込み
アートボードを作成したら、次に画像を取り込みます。
商用利用が可能な無料の画像素材なら【無料】商用利用可能なおすすめのフリー画像素材サイト10選！で紹介していますので、ぜひ合わせてチェックしてみてください。
あわせて読みたい
【無料】商用利用可能なおすすめのフリー画像素材サイト10選！
ファイル＞開く
次に、トレースしたい画像をIllustratorに取り込みます。
メニューバーからファイルを選択し、開くをクリックします。
画像を選択し、「開く」を押す
取り込みたい画像を選択し、右下の「開く」ボタンを押します。
画像がイラストレーターに取り込まれます。
ステップ3：画像トレース開始
取り込んだ画像を選択
まずは、取り込んだ画像を選択します。
画像トレースボタン
次に「ウィンドウ」メニューから「画像トレース」を選びます。
画像トレースボタン横のドロップアローを選択
パネルが開き、トレースの種類を選ぶことができます。
プリセットを選択
「自動色」や「ハイカラー」など、画像に最適な設定を選びましょう。
選択したら、「トレース」ボタンをクリックします。数秒で画像がベクター化されます。
以下各プリセットの使用例です。
画像トレースのオプション
サイドバーに画像トレースを選択できるタグがあります。
こちらをクリックすることでさらに細かい設定が可能になります。
右ボックスに見当たらない場合は、「ウィンドウ」から「画像トレース」をクリックすることで表示されるようになります。
プリセット
プリセットはすでに上記で説明したように前もって準備されているモードを選択することができます。
オプションを独自に設定する場合はカスタムになります。
表示
トレースした画像結果をどのように表示するかを選択します。
アウトラインつきで表示したり、アウトラインのみで表示することも可能です。
カラーモード
トレースの色モードを選択します。
色、グレースケール、黒と白のいずれかを選択できます。
パレット
自動、限定、フルトーンのいずれかから選びます。
これは、トレースに使用される色の選択方法を制御します。
カラー
トレースに使用する色の最大数を選択します。
色数を増やすと詳細度が上がりますが、ファイルサイズも大きくなります。
グレー
カラーモードでグレースケールを選択した場合に表示されるスライドバーです。
トレース画像のグレースケールを少なくしたり多くしたりすることでできます。
しきい値
カラーモードで白黒を選択した場合に表示されるスライドバーです。
トレース画像の白と黒のしきい値を調節することができます。
しきい値を少なくすると白の度合いが高まり、しきい値を高くすると黒の度合いが高くなります。
パス・コーナー・ノイズ
パス
元画像をどのくらいの精度でトレースするかを設定することができます。
パス値が低ければ低いほど滑らかな仕上がりになりますが、正確さは下がります。
また、パス値が高ければ高いほど正確さは上がりますが、画質が荒くなります。
コーナー
曲線や角の丸みを設定することができます。
コーナーの値が小さければ小さいほど角の丸みが強くなり曲線が鋭くなり、コーナーの値が大きければ大きいほど角が鋭くなります。
ノイズ
トレース画像のノイズの値を設定することができます。
ノイズが少なければ少ないほど、画像が細かくなり、ノイズが大きければ大きいほど、画像はシンプルになります。
方式
アブレーションまたはプリミティブのいずれかから選びます。
これは、イラストレーターがパスを作成するためのアプローチを決定します。
作成
このセクションでは、ストローク、埋め込み画像、無視の白を作成するかどうかを選択できます。
オプション
ここでは、トレース結果をプレビューする、トレース結果を作成する前にオーバーレイするなどのオプションを選択できます。
Illustrator学習におすすめの書籍
まとめ
Illustratorの画像トレース機能は、高品質なベクター画像を手軽に作成できる、デザイナーにとっては必須のツールです。
この記事を参考に、初めてでも迷わずに画像トレースを使いこなして、デザイン作業を効率化しましょう。
Webデザイナーにおすすめのパソコンはこちら！
Webデザインの勉強をしたい方はこちらの記事がおすすめ！
Webデザイナー用のエージェントをお探しの方はこちらの記事がおすすめ！
副業案件をお探しの方はこちらの記事がおすすめ！
ABOUT ME
30代web業界未経験
→オーストラリアにIT留学
→現地インターンを1年半経験
→フリーランスwebデザイナー・エンジニアとして活動
→月収80万円達成！
