この記事は2分で読めます

【Illustrator】手書き文字をSVG化する方法

  • 投稿日
  • 更新日

あとで読む

【Illustrator】手書き文字をSVG化する方法

今回はIllustratorで手書き文字をSVG化する方法について解説します。

画像トレースという機能を使えばとても簡単にできますよ〜!

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

紙に書いた文字をパソコンに取り込む

STEP
手書き文字を紙に書き、写真を撮る
文字がはっきりと読めるように写真を撮りましょう。
STEP
撮った写真をパソコンにダウンロードする

ダウンロードした際に「HEIC」という拡張子がついている場合はJPEGファイルに変換が必要です。
【macの場合】
HEIC形式のファイルを「プレビュー」アプリで開き「ファイル」→「書き出す」で変換できます。
【Windowsの場合】
HEIC形式のファイルを「ペイント」アプリで開き「ファイル」→「名前をつけて保存」→「JPEG画像」を選択します。最後に保存をクリックすれば変換できます。

IllustratorでSVG化する

STEP
Illustratorでファイルを開く

写真を右クリックし、Illustratorで開きます。

STEP
画像トレースをする

レイヤーを選択した状態でメニューバーの「ウィンドウ」→「画像トレース」を選択します。

詳細をクリックし「ホワイトを無視」にチェックを入れます。

プレビューを押すとトレース結果が反映されます。文字が薄くなってしまった場合は「しきい値」を上げてください。

STEP
拡張する

レイヤーを選択した状態でメニューバーの「オブジェクト」→「分割・拡張」を選択し、OKをクリックします。

ダイレクト選択ツールに切り替え、残したい文字以外のオブジェクトを選択し削除します。

STEP
完成

オブジェクトを選択した状態でメニューバーの「オブジェクト」→「アートボード」→「選択オブジェクトに合わせる」をクリックします。

アートボードがオブジェクトのサイズに変わりました。

おまけ

このように作った手書き文字のデータは、パスや図形と同じように色を変えることもできます。ぜひ試してみてください!

おわりに

今回はIllustratorを使って手書き文字をSVG化する方法について解説しました。

「エモい」デザインにぴったりな手書き文字、ぜひ取り入れてみてください!

この記事で使用したデータの
ダウンロードはこちら

利用規約 ※必ずお読みください

この記事を書いた人

なこ
なこ

食べることが好き。最近はタコスにハマっています🌮

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須