今回は、Adobe Illustratorで手書きの文字をトレースしてsvg画像形式で保存する方法を紹介します。
【Adobe Illustrator】手書き文字をトレースしてsvg画像として保存する方法
顧客のコーポレートサイトなどを作成する場合、代表挨拶ページや会社沿革、スローガン部分などに手書きの文字を用いたいケースはあると思います。難しそうに感じる方もいるかもしれませんが、プリンター(または複合機)とイラストレーターが使用できるパソコンがあれば、割と簡単に画像で保存してサイトに表示することができます。※USBメモリがあるとなお簡単です。
今回は、拡大縮小しても画質が落ちないsvg画像で保存するまでの流れを説明します。
[inter id=’429′]
プリンターまたは複合機で手書き文字をpdfとして保存
最初にプリンターや複合機を使って、上図のような手書き文字をイラストレーターで編集できる形式で保存します。
お持ちのプリンターごとで操作方法や名称は多少異なるかもしれませんが、基本的な操作方法は下記の通りです。
- 文字面が裏向きになるように、プリンターのスキャナー(ガラス面部分)に紙を置く。
- プリンターの前面にUSBメモリの差込口があれば、差し込む。
- 印刷方法からスキャンを選択。
- 保存先にUSBメモリを指定。USBメモリの指定ができない場合は、メールアドレスを指定して送信。
- USBメモリ内または、メールアドレスに届いたファイル(pdf等)を確認。
これで、手書き文字をイラストレーターで保存する準備ができました。
保存した手書き文字をイラストレーターでsvg保存する
次に、プリンターでスキャンした手書き文字のファイルをイラストレーターでsvg形式で保存するまでの流れを説明します。
- USBメモリまたは、メールアドレスに届いた手書き文字のファイルをイラストレータで開く。
- レイヤーから画像レイヤー以外の余分なレイヤーを削除する。
- 画像レイヤーを選択して「画像トレース」をクリック。
- トレースパネルから、パス数やノイズ、コーナーの数値を変更して、最後に「拡張」をクリック。
- 保存時の拡張子をsvgにして、svg形式として保存する。
これで、svg形式での保存が完了しました。あとは、保存したsvgファイルをご自身のサーバーにアップロードして、imgタグで指定することで、サイトに表示することができます。
※イラストレーターでの、svg形式保存方法は下記記事で詳しく説明しています。
[inter id=’440′]
まとめ
今回は、イラストレーターで手書きの文字をトレースしてsvg画像形式で保存する方法を紹介しました。プリンターまたは複合機と、イラストレーターが使用できるパソコンがあれば簡単にsvg画像を作成できます。