creatersnest32

ライブトレースの機能を使って、画像をベクターにしてみよう


写真などの画像から、簡単にベクターデータを作成する事ができれば便利ですよね。
今回は「ライブトレース」という機能を使ってベクターデータを作成する方法をご紹介いたします。
とても簡単な操作で、あっという間にベクターデータができてしまいますよ。
データの軽減にも役立つオプションもご説明いたします。

写真からベクターデータを作成しましょう

写真をIllustratorに配置

最初に、Illustratorに素材となる写真を配置する必要があります。
写真からモチーフを切り出したい場合は、背景が一色でモチーフとの境界がハッキリしている画像がお勧めです。

今回は、白背景で赤いバラの写真を配置しました。
ここから赤いバラのベクターデータを取り出して使用できるようにしたいと考えています。

画像を配置

写真にライブトレースを適用

さっそく「ライブトレース」を適用してみましょう。
「オブジェクト」タブ「画像トレース」「作成」をクリックします。

画像トレースの適用

「この大きさの画像にトレースを実行すると、時間がかかる可能性があります。続行しますか?」
というメッセージが表示された場合はそのままOKします。

バラの形が自動でトレースされました。

適用結果
が、真っ黒で使い物になりませんね。
オプションでトレース結果の調整を行うことができます。

ツールバーにある「画像トレースパネル」をクリックします。
画像トレースパネルのオプションが表示されます。

画像トレースパネル

今回は、イラストタッチにトレースしたいので
「カラーモード」を「カラー」
「カラー」の数値を「8」に設定しました。
オプションの各項目は後でまとめてご説明致します。
設定できたら「画像トレースパネルを」閉じます。

そして、ツールバーにある「拡張」をクリックします。

画像トレースパネルの設定

画像からベクターデータが作成されました。

画像トレース結果

不要データを削除して完成

不要な背景部分などのポイントを削除します。

バラのベクターデータの完成です!
リアルなバラのデザインを簡単に作成できました。

完成

画像トレースオプションについて

画像トレースオプションの内容について説明いたします。
オプションの設定により、同じ画像をトレースしても結果が大きく異なってきます。

オプションの各項目

・アイコン
「自動カラー」「カラー(高)」「カラー(低)」「グレースケール」「白黒」「アウトライン」をアイコンから選択できるようになっています。
設定結果は以下のようになります。

「自動カラー」

自動カラー

 

「カラー(高)」

カラー(高)

「カラー(低)」

カラー(低)

「グレースケール」

グレースケール

「白黒」

白黒

「アウトライン」
線画をトレースする際などに使えそうです。

アウトライン

 

・プリセット
11設定が保存されており、プルダウンメニューから選択できます。
ツールバーからも設定できます。

・表示
画面での表示方法を設定できます。
オプション最下部にある「プレビュー」を有効にしておいてください。
ツールバーからも設定できます。

・カラーモード
「カラー」「グレースケール」「白黒」を選択できます。
・パレット
カラーパレットの設定です。

・カラー
画像中に使用する最大色数を設定できます。
例えば、同じ「カラー(低)」でも、カラー数3と30では結果が異なってきます。
カラー数3
オシャレなイラスト調になりました。

カラー数3

カラー数30
写真を精密に再現しています。

カラー数30

・詳細
パス…誤差の許容値
コーナー…コーナーの強調
ノイズ…ノイズ軽減の数値
方式…パスの作成方式を選択できます
オプション…曲線を直線に置き換える設定と、ホワイトの塗りを「なし」に設定する設定です。

・トレース結果の情報
作成されるパス、カラー、アンカーポイントの数値を確認できます。

アンカーポイント数の調整

画像トレースは、大変便利な機能ではあるのですがアンカーポイントの数がかなり多くなってしまいます。
オプションの設定で結果を確認しながら作業を進めていくと良いでしょう。
同じカラー数3でも、設定によってポイントを削減できます。
「詳細」のパス、コーナー、ノイズの数値、方式の設定などを調整してみました。

オプション設定前

オプション設定後

まとめ

写真から簡単にベクターデータを作成できる画像トレース。
イラストの制作や、写真からパーツを切り出しての素材作成など作業効率アップに役立つでしょう。
オプションで細かく設定できますので、イメージ通りのベクターデータを作成できることと思います。
ぜひお試しください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Illustratorってとっつきにくいなあと思っていたのですが、便利な機能を知っていくうちに楽しくなってきました。 「illustratorって楽しいな」と感じるきっかけになることができれば嬉しいです。

Next Articleレイヤー操作を効率よくするためのショートカット30選