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

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

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

Advertisement

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

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

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

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

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

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

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

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

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

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

まとめ

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

webスキルカテゴリの最新記事