creatersnest62

【Illustrator】簡単!文字を上手くトレースする方法


トレースとは?

トレースとは、下絵をなぞってパス(線)のデータを作成することです。

Illustratorのトレースには2つの方法があり、
1つは、ペンツールでトレースする方法。
もう1つは、ライブトレース機能を使ってトレースする方法です。

 

著作権について

フォントにも著作権があります。

Webデザイナー必読?!著作権について知っておくべき10のことによると、

デザインに重要に関わってくるフォントですが応用美術とされ、現在の著作権法では美術に属する著作物ではないとされています。

そのためフォントの変形、切断、ロゴマークとして使用しても著作権侵害には至りません。
また有名企業のロゴのタイプフェイスを利用して、新たにロゴマークを制作しても著作権侵害にはなりません。

とありますので基本的には問題ありませんが、著作権というものはデザイン業務と密接に関わりあってくるので、今後も必ず確認するようにしましょう。

 

ペンツールでのトレース

それでは、まずは基本的なペンツールでトレースする方法をご紹介します。

トレースしたい素材をIllustrator上に読み込みます。
[ファイル]⇒[配置]からファイルを選んで配置します。

Illustrator上に配置

不透明度を10%に設定して、レイヤーをロックするとトレースしやすいです。
(Shift+Ctrl+F10で透明パネルを表示、テキストを選択した状態でCtrl+F2でロックできます。)

不透明度を10%にしてレイヤーをロック

次にペンツールを使って、書き順(筆順)毎のパーツに分けてトレースしていきます。
一つの形としてトレースしてもいいですが、書き順(筆順)毎のパーツに分けてトレースした方が綺麗に仕上がります。

まずは直線部分です。
ペンツールを選択してください。
そして①の地点をクリックし、次に②の地点をクリックすれば直線のパスができ上がります。
またその際にShiftキーを押しながらクリックすれば、真っ直ぐな線を引くことができます。

直線のパスを描く
間違えた場合は、Ctrl+Zで手順を一つ戻すことができます。
また逆に手順を進めたい場合はCtrl+Shift+Zで進められます。
便利なので覚えておきましょう。

次に曲線部分に入ります。
②の地点にある黒丸(アンカーポイントといいます)をクリックし、そのまま右へドラッグしてください。
すると下図のようにハンドル(方向線)が出てきて自由に動かすことができます。
曲線を描くために少し右に伸ばしておきましょう。

ハンドルを右へ少し伸ばした状態

次に③の曲線の頂点をクリックし、Shiftキーを押しながら下へドラッグすると綺麗な曲線の形になります。

曲線の頂点にアンカーポイント

仕上げに④の地点(ちょうど②の真下あたり)をクリックし、Shiftキーを押しながら左へドラッグすれば曲線部分の完成です。

曲線の仕上げ

ハンドル(方向線)を引く方向やアンカーポイントを打つ位置を変えれば様々な図形が作れますので、色々と試してみてください。

書き順(筆順)にトレース

次に、トレースしたパーツをパスファインダ機能を使って合体しましょう。
(パスファインダパネルが見当たらなければ、Shift+Ctrl+F9で表示できます。)

[パスファインダパネル]から[合体]

パスファインダから合体

パスファインダで合体したオブジェクト

次に、どうしても時間がない!という時に役立つライブトレースを使った方法をご紹介します。

 

ライブトレース機能を使ったトレース

ライブトレースとは、写真や手書きの画像などをビットマップデータからベクターデータに変換する機能です。

ビットマップデータとベクターデータとは、
・ビットマップデータ = ドットの集合体データ
・ベクターデータ = 点の座標などから演算によって再現されるデータ
のことをいいます。

ですので、ライブトレースはドットの集合体である写真や手書きの画像などのビットマップデータを、演算によって再現されるベクターデータに変換する機能といえます。

トレースしたい素材を配置します。

下絵を配置

[オブジェクト]⇒[ライブトレース]⇒[作成]でライブトレースを作成します。

しかし、このように歪んだトレースになってしまいました。

歪んだライブトレース

手書き感を出したかったのなら問題ありませんが、そうでない場合はトレースオプションでもう少し正確にトレースされるように設定する必要があります。

[オブジェクト]⇒[ライブトレース]⇒[トレースオプション]を選択してください。

今回はプリセットの[文字]を選んでみました。

トレースオプションダイアログでプリセットの[文字]を選択

①誤差の許容値 = 元画像とトレース結果の誤差の許容値で、小さいほど正確にトレースされます。
②最小エリア = 元画像の最小ピクセルの値で、小さいほど正確にトレースされます。

ライブトレース直後はまだ仮の状態で、パスがありません。
[オブジェクト]⇒[ライブトレース]⇒[拡張]を選択して、パスを確定してください。

拡張してパスを確定

ただ、ライブトレースは元画像の解像度にかなり影響されます。
解像度が低く複雑な文字だと、綺麗にトレースするのは中々難しいです。

 

まとめ

手作業でパスをとる必要はあるが、安定して綺麗に仕上げることのできるペンツール。
短時間でトレース(変換)できるが、元画像の解像度にかなり依存するライブトレース。
どちらの機能も一長一短です。
クオリティをとるか時間をとるか、状況により上手く使い分けてくださいね。

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

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

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


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Articleインフォグラフィックを駆使した魅力的なサイトまとめ