フォント作成日記

新しいフォント作成日記(6日目)〜再びIllustratorで試作品づくり

2016/01/14

前回、他の方の作成したフリーフォントと見比べてみたなかで、

「漢字をもう少し手書きっぽくしたほうが、フリーフォントのスキマ産業的見地からして良いかもしれないな…(・∀・)」

といういやらしい思いが湧いたので、文字のデザインをもう一度練り直すことにしました。

広告

 

 

以前作った試作品用のIllustratorファイルを開きます。

image

前に作ったグリフのレイヤーを非表示にして、サンプル用のフォントだけが見える状態にしたら…ad17a3147f03c0af8275ddd20e39ea10[1]今回のデータを書き込むためのレイヤーを一枚新規に追加しておきます。

 

前回はパスで骨格を書いて線の太さを一定にする方法で文字を作成しましたが、今回は手書きのラフさを出すため、骨格は書かずにポチポチポチっと適当にざっくり輪郭を書いていこうと思います。

まず、ペンツールを選択して、塗りの色を黒、線を白に設定します。

3f4fc8245cdf782f7127a3cffd928a0b[1]

ではでは、書いていきましょうか…

3546d8ef31b7bc2f8c250e9a4d67f51b[1]

ちょちょちょ!

ちょっと待って~ちょっと待って~お兄さ~ん!(・∀・)

上の画像ではちょっと伝わりにくいかもしれませんが、編集している時のパスの色が黄色で表示されてます。これだとアンカーポイントなどが少し見えにくくないですか…!?

黄色…ちょっと見づらくないですか…???

ね、見づらい…よね?(・∀・)

 

新規のレイヤーを追加すると、編集中のパスや、オブジェクトの大きさを変更するときに表示されるボックスを表す枠の色が(多分ランダムで)自動的に決められるのですが、たまにこういう「イエロー」のように、見えにくい色に設定されてしまう時があるのです。

43ba5c9e1a336c892fd42b047eefc18a[1]

みえにくい

 

 

そんなわけで、ここは手動で色を変更することにします。

f4d768804d02b889d8658b4771e91992[1]

レイヤーパネルを見ると、現在編集中のレイヤー(この場合は「レイヤー7」)の左側に表示されている色が黄色になっています。こいつが今回設定されてしまった色ですね。

レイヤー名が書いてある横の何もない部分をダブルクリックすると、レイヤーのオプション画面が出てきます。その中の「カラー」という項目を開いて、「イエロー」を自分好みの色に変更します。

 

5da53bc3a07997e18705c8478d81cd12[1]

私は「ブラウン」を選んでみました

これで、アンカーポイントが見えやすくなりました!

9dad68b12d582be68a4ddfca57401243[3]

さてさて、どんどん文字の輪郭を作っていきます。

…っとその前に、アピアランスの調整をしておこう。

399999b5749ca94e9dfb674e6dbf6c36[1]

線と塗りの順番を入れ替えて、線が下に、塗りが上に表示されるようにします。

できたパスは、「ポップパス3」という名前をつけて、グラフィックスタイルに登録しました。

10756e3202bff9cce640cbf6b06fdfe3[1]

ではでは、ペンツールを使ってザクザクと線を描いていきます。

b8c9f01ecc1e359d91d0642348fef7a1[1]

「お」は、まあこんな感じ

 

「買」や「得」の文字にある「目」や「日」の部分の表現は、中を空白で抜くのではなく、白い線を上に乗せて表現しました。

aac4c8696c3b8bc52d30f9420c6ce25e[1]

引いた白線をコピーして…21b88fd99948104ed9ac52fd8918c0df[1]

整列・分布で整えます。

書きながら、時々、アンカー選択ツールでアンカー位置を調整したり、スムーズツールで曲線を微調整したり、そんなこんなで3文字分の文字パーツを作ります。
一通りパーツを作ったら、次はパーツの重なり方を調整します。

まず、「お」の一画目と二画目のように重なり表現をしたくないパーツ同士の場合。

1つにまとめたいパーツを複数選択し、パスファインダーの「合成」アイコンを、Altキーを押しながら(ここ重要)クリックします。7b8a6a7252c2c31d95f2279bdfa33aad[1]
Altキーを押しながらパスファインダーを実行すると!

なんと元のパスを消さずに合成の効果を得ることができるのです!

 

ちなみにAltキーを押さずに「合成」をクリックしてしまうと…6c1391f7eea8cb67bc1db6cd4d606cfc[1]

「お」の一画目と二画目の交差部分に注目してください。

自動的にパスが合体してしまって、交差部分などのパスが消えてしまいます。

結果的に見える形は同じものなので別にコレでも良いのですが、しかしまだまだこの文字は試作品。

どうせ後から修正が必要になったりするのですよ、どうせどうせ。

ですから、今の時点では元のパスを残したままにしておいたほうが、あとあと便利だと思います。

 

その後、他の文字も調整して…

ffaed0cf5f3b3038720ac3160554ee04[1]

 

はい、こんな感じになりました。

ちなみに一番最初に作った、栄えある『たぬ英角ポップ体・試作品1号』の画像が下記。

image

こうして比べてみるとかなりラフになりました。

うーん、インパクトのある手書きポップっぽい雰囲気…出てきてるかな…!?( °∀°)

次回以降は、3文字だけじゃなくて、もう少し文字を作っていこうと思います。

 

(今回の作業時間 30分)

広告

広告

-フォント作成日記

フォントダウンロードページ

1
フリーフォント『エセナパJ』を公開しました。

『エセナパJ』(esenapaJ)は、いわゆる【中華フォント風表現ができるジョークフォント】です。日本語漢字を中国語の漢字字形で表示したり、かな文字をあえて誤字で表示したりしますので、真面目な目的での使用はご遠慮ください。

2
フリーフォント『押出Mゴシック』を公開しました。

『押出Mゴシック(おしだしエムゴシック)』は、M+FONTSで提供されているM+1c Thinに加工を加え、縦画を太くしたフリーフォントです。明朝体のようなアクセントをやや含んだ、クリアで明るいゴシックを目指しました。

たぬき油性マジックの使用例。本屋のポップ風。 3
フリーフォント『たぬき油性マジック』を公開しました。

『たぬき油性マジック』は、普通紙に極太油性マジックで書いた手書き文字から作成した無料日本語フォントです。漢字も多数収録しています。

自由の翼フォントサンプル画像(大) 4
フリーフォント『自由の翼フォント』を公開しました。

『自由の翼フォント』は、TVアニメ『進撃の巨人』第二期オープニングテーマで使用されている書体のデザインをヒントに作成したフォントです。

ようじょふぉんと使用例_置き手紙 5
フリーフォント『ようじょふぉんと』を公開しました。

『ようじょふぉんと』は、文字を覚えたての就学前の子ども(3~5歳ごろ)をイメージして作成した無料日本語フォントです。収録文字はひらがなと数字のみですが、全角カタカナや半角カタカナを利用することで、一つのひらがなにつき3パターンの字形の表現を可能にしています。

6
フリーフォント『Ingress Glyphabet』を公開しました。

『Ingress Glyphabet』はAndroid/iPhoneアプリ『Ingress』内に出現する「Shaper Glyphs」をイメージして作成した欧文フォントです。