紙に書いた文字をパソコンに取り込む
![](https://design-baum.jp/files/2022/10/svg_handwriting_01-1024x636.png)
![](https://design-baum.jp/files/2022/10/svg_handwriting_02-1024x636.png)
IllustratorでSVG化する
写真を右クリックし、Illustratorで開きます。
![](https://design-baum.jp/files/2022/10/svg_handwriting_03-1024x636.png)
レイヤーを選択した状態でメニューバーの「ウィンドウ」→「画像トレース」を選択します。
![](https://design-baum.jp/files/2022/10/svg_handwriting_04-1-1024x636.png)
詳細をクリックし「ホワイトを無視」にチェックを入れます。
![](https://design-baum.jp/files/2022/10/svg_handwriting_05-1024x636.png)
プレビューを押すとトレース結果が反映されます。文字が薄くなってしまった場合は「しきい値」を上げてください。
レイヤーを選択した状態でメニューバーの「オブジェクト」→「分割・拡張」を選択し、OKをクリックします。
![](https://design-baum.jp/files/2022/10/svg_handwriting_06-1024x636.png)
![](https://design-baum.jp/files/2022/10/svg_handwriting_07-1024x636.png)
ダイレクト選択ツールに切り替え、残したい文字以外のオブジェクトを選択し削除します。
![](https://design-baum.jp/files/2022/10/svg_handwriting_08-1024x636.png)
オブジェクトを選択した状態でメニューバーの「オブジェクト」→「アートボード」→「選択オブジェクトに合わせる」をクリックします。
![](https://design-baum.jp/files/2022/10/svg_handwriting_10-1024x636.png)
アートボードがオブジェクトのサイズに変わりました。
![](https://design-baum.jp/files/2022/10/svg_handwriting_11-1024x636.png)
おまけ
このように作った手書き文字のデータは、パスや図形と同じように色を変えることもできます。ぜひ試してみてください!
![](https://design-baum.jp/files/2022/10/svg_handwriting_12-1024x636.png)
おわりに
今回はIllustratorを使って手書き文字をSVG化する方法について解説しました。
「エモい」デザインにぴったりな手書き文字、ぜひ取り入れてみてください!