みなさん、こんにちは。Sokoageの宮澤です。
デザインのアクセントや、キービジュアルに手書き文字を使いたいと思ったことはありませんか？
プロのデザイナーならば、ペンタブを持っていたり、既存のフォントを編集したりして手書き文字を作ることも可能だと思うのですが、そんな機器やスキルを持っていないという方も多いはずです。
そこで今日は、誰でも簡単に出来る「手書き文字を使ったデザインを作る方法」をご紹介します。
ちなみに、この記事のハウツーで扱うのは、ぼくの”汚い手書き文字”なので、ちょっとデザイン映えしないんですが…手順としてはこの通りで出来ますので、ご了承ください…。
STEP1.まずは手書き文字を用意。
まずは大元となる、実際の手書き文字を用意します。
手書き文字を書く紙は、コピー用紙のような白紙にしてください。方眼用紙や罫線の入っているノートはNGです。
また、ここで書く実際の文字は、使うデザインに合わせた文章、文字の雰囲気にして”黒のペン”で書いてください。ここで書いたものが、そのままデザインに使われる文字になります。（色の変更はのちほど可能です）
文字が書けたら、「出来るだけ文字が歪まないように真俯瞰で写真を撮る」か「スキャナで文字の書かれたスキャン」で、手書き文字をデータ化してください。スキャナーがあれば、スキャンが推奨です。
これで実際に書いた文字がデータ化されますので、ここから実際の編集作業に入っていきます。
STEP2.Photoshopでコントラストを調整。
手書き文字をデータ化出来たら、まずはPhotoshopでそのデータを開いてください。
データを開いたら、メニューの「イメージ > 色調補正 > 明るさ・コントラスト」をクリックして、コントラストをガツンと上げます。
プレビューを確認しながら、「手書き文字の黒色」と「用紙の白色」の差が明確に出るように調整してください。
上げすぎると、黒文字の縁がギザギザしちゃうので、それが出ない範囲のなかでプレビューを見ながら調整してください。
コントラストの調整が終わったら、データを保存します。
STEP3.Illustratorで開く。
Photoshopでのコントラスト調整が終わったら、いよいよIllustratorで開いてデザインで使えるデータにしていきます。
ここからはIllustrator内での作業を、細かく分けてご紹介していきますね。
自動トレースでパス化
画像を配置する要領で、先ほど保存した手書き文字のデータをアートボードに配置します。
配置したデータを選択した状態で、上部のナビゲーションから「画像トレース > 白黒のロゴ」をクリックします。
これで、イラレが自動でデータをパス化してくれます。
自動なので上手くいかない場合もありますが、上手くいくようにPhotoshopでコントラスト調整をしているので、紙に色が入っていたりしない限り上手くいってるはずです。
※どうしても上手くいかない場合は、Photoshopのコントラスト調整でもっとコントラストを強くしたり、別の白紙に文字を書いてやり直してみてください。
パス化（拡張）前のプレビューを確認する
少し処理の時間を置いて、手書き文字のデータがトレースされます。
この時点で、自動トレースの結果が表示されていますので、このプレビューのような状態を目視で確認してください。
この内容で問題なければ、次に進みます。
もし、納得のいくないようでない場合は、前項で選択した「画像トレース > 白黒のロゴ」の部分を「16色変換」や「写真（高精度）」にしてみてください。
実際にパス化する
自動トレースの結果を確認し、問題なければ実際にパス化していきます。
上部のナビゲーション内にある「拡張」をクリックすることで、パス化されます。
不要な部分は削除する
これでパス化は出来たのですが、おそらく白紙の不要な部分がオブジェクトとして残っていると思いますので、その部分は「ダイレクト選択ツール」で選択して削除しましょう。
今回のチュートリアルでいうと、上図のように、用紙左上に不要な黒いものが残っていたりするので、こういうものを削除して、”手書き文字のパス”だけが残るようにしてください。
特にデータの境界線は、細いオブジェクトなどが残りやすいので、不要なものは残さず削除してください。
手書き文字のパスだけ残れば完成
不要なオブジェクトを削除して、上手のように「手書き文字だけ」という状態になればパス化は完了です。
スキャンされた画像データとは違い、パス化されたオブジェクトなので、いくら拡大・縮小しても問題なしです！
必要に応じて微調整
自動トレースしたデータそのままで問題なければ、あとはデザインに落とし込んでいくだけなんですが
おそらく細かい部分を見てみると、ちょっとトレースが甘い部分があると思います。
その場合は、ペンツールでアンカーポイントを調整したり、スムーズツールで調整したり…でお好みのパスになるように最終的に微調整してみてください。
動画で解説。
「手書き文字をデザインで使う方法」について、その手順をご紹介してきました。
最後になりましたが、テキストだけでは細かいニュアンスが伝えきれていないかもしれないので、実際の操作〜設定までをこちらの動画でも紹介しています。
わからない部分などがあった方は、こちらもぜひご覧ください！
