ブロサイ
2021.09.13

【Adobe Illustrator】手書き文字をトレースしてsvg画像として保存する方法

今回は、Adobe Illustratorで手書きの文字をトレースしてsvg画像形式で保存する方法を紹介します。

【Adobe Illustrator】手書き文字をトレースしてsvg画像として保存する方法

顧客のコーポレートサイトなどを作成する場合、代表挨拶ページや会社沿革、スローガン部分などに手書きの文字を用いたいケースはあると思います。難しそうに感じる方もいるかもしれませんが、プリンター(または複合機)とイラストレーターが使用できるパソコンがあれば、割と簡単に画像で保存してサイトに表示することができます。※USBメモリがあるとなお簡単です。
今回は、拡大縮小しても画質が落ちないsvg画像で保存するまでの流れを説明します。
 
[inter id=’429′]

プリンターまたは複合機で手書き文字をpdfとして保存

手書き文字をプリンターでスキャン
最初にプリンターや複合機を使って、上図のような手書き文字をイラストレーターで編集できる形式で保存します。
お持ちのプリンターごとで操作方法や名称は多少異なるかもしれませんが、基本的な操作方法は下記の通りです。

  1. 文字面が裏向きになるように、プリンターのスキャナー(ガラス面部分)に紙を置く。
  2. プリンターの前面にUSBメモリの差込口があれば、差し込む。
  3. 印刷方法からスキャンを選択。
  4. 保存先にUSBメモリを指定。USBメモリの指定ができない場合は、メールアドレスを指定して送信。
  5. USBメモリ内または、メールアドレスに届いたファイル(pdf等)を確認。

これで、手書き文字をイラストレーターで保存する準備ができました。

保存した手書き文字をイラストレーターでsvg保存する

次に、プリンターでスキャンした手書き文字のファイルをイラストレーターでsvg形式で保存するまでの流れを説明します。

  1. USBメモリまたは、メールアドレスに届いた手書き文字のファイルをイラストレータで開く。
  2. レイヤーから画像レイヤー以外の余分なレイヤーを削除する。
  3. 画像レイヤーを選択して「画像トレース」をクリック。
  4. トレースパネルから、パス数やノイズ、コーナーの数値を変更して、最後に「拡張」をクリック。
  5. 保存時の拡張子をsvgにして、svg形式として保存する。

これで、svg形式での保存が完了しました。あとは、保存したsvgファイルをご自身のサーバーにアップロードして、imgタグで指定することで、サイトに表示することができます。
※イラストレーターでの、svg形式保存方法は下記記事で詳しく説明しています。
 
[inter id=’440′]

まとめ

今回は、イラストレーターで手書きの文字をトレースしてsvg画像形式で保存する方法を紹介しました。プリンターまたは複合機と、イラストレーターが使用できるパソコンがあれば簡単にsvg画像を作成できます。

関連する記事