Oitan Blog Written by Oitan

Illustratorで手書き文字をデータ化する方法【初心者でも簡単】

デザイン

Illustratorで手書き文字をデータ化したいけどどうすればいいんだろう?

手書き文字を使ったデザインって温かみがあるしエモくていいですよね。

データ化する方法をザックリ説明すると

手書き文字をスマホで撮影>イラレに配置して画像トレース

これだけでできます。

[voice icon=”https://oitanblog.com/wp-content/uploads/2021/07/顔-1.jpg” name=“おいたん” type=”l”]イラストを読み込む時も使える方法なので、覚えておくと便利です![/voice]

素材を書く

まずは元となる素材を紙に書いていきます。

鉛筆でも筆ペンでもボールペンでもなんでもいいので好きに書いてみましょう。

思い通りに書けない。。しっくりこない。。という人、挙手!

そういう時はお手本を見ながら書くとそれっぽくなります。

例えばPinterestで検索して30分くらい練習すると結構変わります。マジで。

[voice icon=”https://oitanblog.com/wp-content/uploads/2021/07/顔-1.jpg” name=“おいたん” type=”l”]Dont’t think.FEEL!(考えるな、感じろ!)[/voice]

手書き文字をデータ化する

素材が書けたと思いますので実際にデータ化する手順を解説していきますね。

3ステップでできるので早速やっていきましょう。

ステップ1:画像を読み込む

スマホで素材を撮影してください。

できるだけ明るいところで文字がハッキリとわかるように撮影するのがポイントです。

[voice icon=”https://oitanblog.com/wp-content/uploads/2021/07/顔-1.jpg” name=“おいたん” type=”l”]文字に影がかかっていると次の工程がやりにくいので注意です![/voice]

画像トレースする

Illustratorを立ち上げて

メニューバー>配置(⌘+shift+4)

これで画像を配置できます。

「さっき明るいところで撮れって言ってたのに画像暗いやんけ!」と思うかもしれませんが見逃してやってください。笑

画像を選択するとコントロールパネルに「画像トレース」という項目が出てきますので選択します。

するとこんな感じの白黒に変換されます。

参考画像の赤マルで囲ったアイコンをクリックすると細かく設定できるウインドウが出てきます。

慣れない内はしきい値だけ設定していけばOKです。

[voice icon=”https://oitanblog.com/wp-content/uploads/2021/07/顔-1.jpg” name=“おいたん” type=”l”]しきい値を多くするほど黒くなります。(ザックリ)[/voice]

もっと詳しく知りたい人はここをのぞいてみてください。

いい感じになったら「ホワイトを無視」にチェックを入れてから「拡張」でほぼ完成です。

いらないところはダイレクト選択ツールで選択してdeleteしてください。

調整する

できたはいいものの「思っていたよりも細くね?」となることあると思います。

そういう時のリカバリー方法を紹介します。

文字を選択して線に塗りを追加すればOKです。

ゴツゴツするなぁという時は線パネルで

・線端>丸型線端
・角の形状>ラウンド結合

こんな感じに設定すると丸みがでて可愛くなります。

[voice icon=”https://oitanblog.com/wp-content/uploads/2021/07/顔-1.jpg” name=“おいたん” type=”l”]線幅で好きな太さに設定して完成です![/voice]

イラストもやり方は大体同じ

ここからは余談ということで。

イラストのデータ化もやり方は同じです。

画像を配置>画像トレース

シンプルなものならばこれが楽です。

ただ、画像トレースすると1つのパスのまとまりとして処理されてしまいます。

パーツごとにパスで管理したい場合はペンツールでトレースしていく方法がいいです。

こんな感じの元画像を配置します。

で、あとはパーツ毎になぞっていけばOKです。(ざっくり)

これはまた今度別の記事で解説しますね!