スキャンしたラフな手書き文字をロゴなどに加工する方法
最近、手書きロゴを使った案件があり、ひたすら手書きをスキャンしては加工を行っています。
と、せっかくなので、手書き文字をどんな感じで素材として作り込んでいくかといったお話しをしたいと思います。
イラストなどにも流用できる方法なので、手持ちの武器になるのではないでしょうか。
何はともあれ紙に書く。そしてスキャン。
コピー用紙など、無地の紙に、鉛筆などで下書きを行い、出したい太さに合わせたペンで書くだけでOKです。
下書きの線は消しゴムで消しておきましょう。
文字がガタガタなのは、あとでPhotoshopやIllustratorで編集が効くので、ある程度気を使う程度で大丈夫です。
とはいえ、一発で綺麗に書けていれば後が楽なのですが・・・。
スキャンするときのポイント
解像度は高めにしておきましょう。
どんなサイズ感で描いたかによるのですが、僕はだいたい300dpiくらいで取り込んでいることが多いです。
というのも、小さいままだと、細かい加工がしにくいんですよね。
Photoshopで白黒にする。
ざっくりカラーで白黒にする方法もあるのですが、諸々の扱いやすさから、僕はトーンカーブとレベル補正を使っています。
こんな感じでざっくり黒をしっかり出して
こんな感じにレベル補正で白黒にしてしまうだけでOK。
線の汚いところを補正しておく
※今回は完全に白黒にした後だと少し見辛いので、参考用に白黒になる前に補正をしています。白黒にした後の方が楽ですよ！
こんな感じで、線と線のつなぎ目のエッジが汚くなりがちなところや、薄くかすれたところを白と黒のブラシツールで補正をしていきます。
はみ出た部分は白で消し、足りないところは黒を足すイメージです。
Illustratorでライブトレース！
新しいアートボードに、PSDごとざっくり配置しちゃいましょう。
そして、配置した画像を選択して上の画像にもある「画像トレース」をおもむろにぽちっと。
ライブトレースの設定をする
何はともあれそのままではなんともしがたいので、ライブトレースの設定を開きます。
とりあえず設定画面を開いちゃいましょう。
普段使うパネルでもないので、手近な出せるボタンをぽちっと。
で、開いた設定画面でやるべきことは、オプションのホワイトを無視にチェック。
で、プレビューを見ながらしきい値などをいい感じに調整したら
ここの拡張ボタンをぽちっと。
これでやっとパスになりました！ここからはやりたい放題ですね。
Illustrator上で整えていく
手書きなので、よほど気を使って書いていない限り、文字のツラはあっていないのではないでしょうか。
あとはスキャンの都合で若干斜めになっていたりとか・・・。
文字のサイズや角度、縦位置をざっくりあわせる
ガイドを使って、角度や位置を調整していきます。
ここでポイントになるのは、全ての文字がバラバラだとすごく調整しやすいということ。
今更言うなという話なのですが、手書きの時点でこれだけ押さえておくと楽ができますよ。
文字の太さなどはパス自体をいじって調整する
変に太くなってしまっているところは、内側外側のパスをいじって調整しましょう。
概ね調整をするとこんな感じ。
今回は少しラフな印象を出したかったので、あまりキッチリとあわせていません。
そしてカラーバリエーション
ここまでできたらもう少しで大量のカラーバリエーションが作れるようになります。
塗りと線を準備する
まず、調整されてできた線画をCmd+Cでコピーしておきます。
次に、こんな感じで白い矢印アイコンでおなじみ、ダイレクト選択ツールでフチの内側を選択、削除していきます。
D、O、P、R、Qなどの囲われた部分がある文字については、内側と外側のパスが残るので、パスファインダの前面オブジェクトで型抜きなどを使って、内側を型抜きしておきましょう。
そうするとこんな感じになるので、ここまでできたらCmd+Gでグループ化しておくと後々楽になります。
で、適当に色をつけておいてCmd+Shift+Vでさっきコピーしていた線画を同じ位置にペースト。
ペーストした線画も線画だけのグループも用意しておくと何かと便利じゃないかなと思います。
これでざっくり文字の塗りと線が分離できます。
そしてバリエーションを作る
色をガンガン変えていきましょう。以前紹介したグローバルカラーなんかを使うのも良いかもしれません。
塗りのパスを選択して、パスのオフセットを使えば全体に細く白いフチをつけて視認性をよくしたりできますね。
塗りにスタイライズの落書きをかけて、クリッピングマスクで整えるとこんな感じ。
ライブトレースを使うことで、カラーバリエーションなどもガンガン作れるので、「手書き風フォント」ではなく、「手書き」という選択もアリですよ！というお話しでした！
