creatersnest41

Illustratorで手書き風のタイポグラフィを作成する方法


デジタルだけど手書きのようなタイポグラフィーを作りたい時はありませんか?
手書きに比べて修正作業も簡単ですし、一度作ってしまえば登録しておくことで
何度でもワンクリック&ドラッグで同じタイポグラフィーを作成することが出来ます。
手書き風メモや黒板を作成するなど応用範囲も広いので是非知っておきたいところです。

 

手書き風タイポグラフィーの作り方

アピアランス機能を使うと簡単に作成することが出来ます。
それでは手順を追って作っていきましょう。

1

タイポグラフィーにしたい文字を【テキスト】で入力します。
効果を設定する時に完成イメージが掴みやすいので
最初のうちに好みの書体も設定しておきましょう。
今回は【120pt】の【MS Pゴシック】に設定した【TYPE】という文字を使って書いていきます。

2

文字の線と塗りをなしに設定します
テキストは選択したままの状態にしておきます。

4
テキストの【アピアランス】パネルを開き、新規塗りを追加します。
新規線の追加も今回は行っていますが、塗りの設定が終わってから追加しても大丈夫です。
ここで新規線を追加しておくと塗りの設定をする時に変位の設定がしやすいです。
塗り色をここでは黒にしてありますが、黒板にチョークで書いたような表現にするときは白にしておきます。

5

先ほど追加した新規塗りを選択した状態で
【メニュー】→【効果】→【スタイライズ】→【落書き】を開きます。
縁取りをして中を斜線で塗った文字の斜線部分を作っていきます。
何も設定していない状態だと太目のマーカーでグシャっとしたようになっていますね。

6

プレビューを見ながら好きな雰囲気に調節します。
今回は
・角度45°
・アウトラインとの重なり【中央】【変位:0.3mm】
・線のオプション【線幅:0.2mm】【線の丸み:2%、変位:15%】【間隔:0.2mm、変位:1mm】
という設定にしてみました。

7

最初に新規線を追加していなかった方はここで新規線を追加します。
今回は線幅2ptに設定しています。
線の太さで鉛筆風になったりペンで書いたようになったり質感が変わってきます。

8-2

 

新規線に対して【メニュー】→【効果】→【ラフ】を設定します。
線を手書きにしたように見せるため歪ませます。
ここでは【サイズ:0.5%】、【詳細:30インチ】、【ポイント:丸く】にしてあります。

9-2

 

次回からも使いたい方や、他のテキストにも同じスタイルを使いたい人は
【グラフィックスタイル】に追加しておきましょう。
追加の方法は、テキストから【グラフィックスタイル】パネルにドラッグするだけです。

10

ここまででボールペンで丁寧に書いた手書き風タイポグラフィーの完成です。
テキストの塗りを設定すると、上からポスターカラーで色をつけた雰囲気にも出来ます。

 

【おまけ】黒板風のタイポグラフィー

また、少し落書きの設定を変えて黒板風のオブジェクト上に表示すると、チョークのような文字も書くことが出来ます。
今回は手書き風タイポグラフィーと相性の良い黒板風のオブジェクトの作り方も紹介していきます。
文字は最後に配置してもいいのですが今回はすでに作ってあるので
黒板の質感が確認しやすいように先に配置しておきます。

22

オブジェクトを描き、暗めのグリーンと明るめのグリーンのグラデーションを【円形】で設定する
黒板と言えば四角ですが、使うものに合わせて他の形でも良いと思います。

19-2

【アピアランス】パネルでライトグレーの新規塗りを追加する。
黒板の色もそうですが、グレーの明るさなどは好みで色々調節して見てください。

18-2

【メニュー】→【効果】→【テクスチャ】→【粒状】を設定する。
【密度:50】【コントラスト:60】【スプリンクル】を選びます。

19-3
【透明】パネルで【乗算】する
黒板のような少し表面がザラザラしているような感じになりました。

21

新しいレイヤーで白に設定したペンで適当に数本、線を書く。
使い込んだ黒板を表現する時はチョークの消し後を作って行きます。
【ブラシ定義】はかすれた感じのものを使っていきます。

16-2

 

【メニュー】→【効果】→【ぼかし】→【ぼかし(ガウス)】を設定する。
不透明度を変更して背景に馴染ませる。

20

これで黒板風の背景を作ることが出来ました。
すでにテキストは乗せているのでこれで完成です。

 

おわりに

いかがでしたか?
思ったよりも簡単にタイポグラフィーが作成できたのではないでしょうか。
もし黒板風に挑戦するならフチをつけたり影をつけたり工夫するとよりリアルな表現ができますよ。
ぜひ挑戦してみてくださいね。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


趣味はDIYやハンドメイド。興味引かれたものは分野を問わずチャレンジしています。

Next Article【初心者向け】WordPressでナビゲーションの設定をしてみよう!