株式会社コプロシステム

お問い合わせ

2013年10月 9日

Illustratorを使った(たぶん)最も簡単でいい感じの手書き風文字のつくり方

  • このエントリーをはてなブックマークに追加

はじめまして、コプロシステムWebデザイングループ・デザイナーの早水と申します。

これまでの記事内にも名前だけこっそりと登場していましたが、今回から私もTips*Blogを執筆することとなりました。
グラフィック制作のちょっとした小技(Tips)などを中心に書いていこうと思いますので、今後ともどうぞよろしくお願いします。


さて、先日『ブログのタイトルロゴを設置したので、「ロゴ制作の手順」を具体例と合わせて解説』というエントリーで、「夢見る広報室」を例に具体的なロゴデザインの制作手順をご紹介しました。

ここTips*Blogのタイトルロゴも同様の手順で作成していて、

技術的なコツや便利な技を紹介する

人が何かを作る

というイメージで「手書き風」をテーマにデザインしています。

ただ、この「手書き風文字」というのは見た目のラフさとは裏腹に、いざ作ってみるとなかなか思うようにならなかったり、読みにくくなったり、二度と同じものがかけなかったり。。。と、結構面倒臭いのです。
そこで今回は、「Illustratorを使った(たぶん)最も簡単でいい感じの手書き風文字のつくり方」をご紹介したいと思います。

手書き風文字の制作手順

現Tips*Blogロゴの手書き感とはまた違った感じで、紙にペンでスケッチしたような文字を制作します。
↓こちらが完成形。

※今回の手順は、Illustrator CS5.1で制作しています。


ステップ1:テキストの塗りに効果「落書き」を追加する

アピアランスの「塗り」が選択された状態で「新規効果を追加→スタイライズ→落書き」を選択します。


ステップ2:落書きオプションの各値を調整

オプションパネルが表示されるので、線の粗さなどを決めていきます。

  • アウトラインとの重なり:元の文字の輪郭線からはみ出す塗り線の大きさ
  • 角の丸み:塗り線の折り返しの丸み
  • 間隔:塗り線の隙間の幅
  • 変位:塗り線の折り返しの丸みや隙間の均一性

など、ペンの太さや手塗りの大まかさを想像して、程よく調整します。


ステップ3:「角の丸み」と「間隔」を調整

「角の丸み」と「間隔」をいじってみました。
値を小さくすれば画像上のように塗りつぶした感じに、大きくすれば下のようにラフになっていきます。
今回はこの間くらいにしてみました。


ステップ4:輪郭線を指定する

塗りだけでは文字が読みにくいので、輪郭線をつけます。
アピアランスの「線」に「塗り」と同じ色を指定したら、「新規効果を追加→スタイライズ→ラフ」を選択します。
パネルで線のよれ具合をを調整します。
これが強いとあまり奇麗にならないので、ほんの気持ち程度で。

完成!

いかがでしょうか?
とても簡単なステップですが、ちゃんとそれっぽくなったと思います。
また、テキストデータのままですので、一度作ってしまえば後はフォントの変更も文言の変更も自由自在です。
是非試してみてください。

  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「How to do」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP