タグ: フォントの作り方

こんにちは。ANGEL VIBESです。今日はいよいよFontographerの使い方のお話です。前回までのプロセスで、Fontographerに読み込ませるためのAIデータ作成までたどりつきましたね！　あともうひとふんばりです。
Fontographerは公式サイト（旧サイト）に体験版（試用版）があります。もしFontographerをお持ちではなく試しに使ってみたいという方は、体験版を使ってみるのもありですね。→ダウンロードはこちら☆
今回は、私が持っているFontographerが5.1Jなので、このバージョンでのお話をします。

「Fontographer 5.2 for Mac OS X demo」 は
Fontographerの公式サイト（旧サイト）でダウンロードできます。

 

［5］Fontographerを立ち上げたらまずは「フォント情報」の設定

Fontographerを立ち上げましたか？　そうしたらメニューバーから「ファイル」→「新規フォント」を選び新規のドキュメントを開きます。そして「エレメント」→「フォント情報」を選び各項目の設定をします。

「名前」の設定
「フォントファミリー名」にフォントの名前を入力します。素敵な名前、中二病のような名前、自由に名づけましょう。「フォントファミリー名」を入力すれば、「フォントグループ名」等、自動的に入力されます。ウエイトを変えてフォントファミリーを作るのでなければ、ウエイトはデフォルトの「Regular」、傾きも同様にデフォルトの「Plain」でOK。

「メトリクス」の設定
「メトリクス」の設定をするには多少の計算が必要です。ここでは、「emスクエア」の高さを1000とした時の、その中に占める「アセンダーライン」から「ベースライン」までの高さ、そして「ベースライン」から「ディセンダーライン」までの高さの比率を計算します。この「アセンダーライン」から「ベースライン」までの高さは「アセンダー」、「ベースライン」から「ディセンダーライン」までの高さは「ディセンダー」のといいます。
「元AI用紙」では、上下の印がついていましたね。実は、この上下の印までをあわせた高さが「emスクエア」の高さです。これを100%として、そこに占める「アセンダー」「ディセンダー」の比率を計算するというわけです。
参考のフォント「Daisy」は、emスクエアの高さは78mm、「アセンダー」の高さは64mm、「ディセンダー」の高さは14mmです。なので「emスクエア」の高さを1000とした場合、「アセンダー」の高さはおよそ820、「ディセンダー」の高さはおよそ180という比率になります。「メトリクス」画面では「すべての値を自動計算」のチェックを外し、「アセンダー」に820、「ディセンダー」に-180（マイナスがつきます）と入力します。

emスクエア（の高さ）＝アセンダー＋ディセンダー

「エンコーディング」の設定
「最大グリフ」項目の数値は256でOKです。「エンコーディング」は「MacOSRoman」に、「グリフ名」は「PDF互換のグリフ名を適用」を選択。「OpenTypeレイアウト」は「OpenTypeレイアウトコードを生成しない」をチェックします。

「クレジット」の設定
「フォントベンダー」には販売社名を入れます。ここでは「販売社」、というか、オリジナルフォントをデザインしたあなたが名乗りたいブランド名ととらえておいていただいてOKです。「ベンダー URL」はオリジナルフォント配布Webサイト（もしあれば）などを入力します。「デザイナー」にはデザイナー名、「デザイナー URL」にはデザイナーのURLを入れましょう。「バージョン」は1.0から始めれば良いと思います。
そこまで入力すれば、「バージョン記録」「著作権」「商標」「説明」は自動的に作成されます。

「ライセンシング」の設定
「ライセンシング」にはエンドユーザーとのライセンスに関する契約についての記述をします。配布等により、エンドユーザーが発生する場合は記述した方が良いですが、そうでなければ空欄のままで大丈夫です。
エンドユーザーが発生する場合でも「ライセンスTEXT」の欄に書ききれない文章量になることがあります。その場合そこは空欄にし、代わりに「ライセンスURL」にURLを入力し、エンドユーザーライセンス契約のこと（あるいはそれに該当するAGREEMENTなどのこと）が書かれたページに誘導するというのも手段です。
そして「OpenType埋め込み許可」の「埋め込み」は、「表示と印刷（文書の表示または印刷のみ許可）」を選び、「埋め込みサブセットを許可」をチェックします。

「レコメンデーション」の設定
デフォルトのままでOKです。

さあこれで「フォント情報」の設定は完了です。ここまでできたらいったん保存（コマンドS）しましょう。そうすると、拡張子「.fog」のデータが保存されるはずです。

 

［6］Fontographerのドキュメントに「元AI用紙」のAIデータをペースト、濃淡を100%にする

Fontographerのドキュメントのマス目がありますね。A、B、C、D・・・と１文字ずつ並んでいます。ここにAdobeIllustratorで作成したAIデータをペーストしていきます。

こんな感じでマス目にペーストしていきます。

全部の文字をペーストできたら、文字の塗りつぶしの濃淡を100%にします。
「濃淡を100%に」何ソレ？　そうなりますよね。ちょっと説明します。AIデータをFontographerのドキュメントにペーストした時点では、文字は透明な状態となっています（マス目をクリックすると１文字ごと別ウィンドウで開くことができ、状態が確認できます）。なのでフォントデータとして実態を持たせるため塗りつぶしが必要となります。
では濃淡を100%にする方法です。濃淡を100%にしたい文字をドキュメント上で選択し（ペーストした文字全て選択する）、メニューバーから「エレメント」→「選択情報」を選びます。「塗りつぶしとストローク」の左横の三角をクリックして開くと、「グラフィックス」の項目があります。「塗りつぶし」にチェックをし「濃淡」を100%にします。これで、各文字が、濃淡100%となり、見た目にBlack100%の状態になります。

「選択情報」で「濃淡」を100%にします

これを

こうじゃ！

ここまでできましたか？　あとはemスクエアの印を消すなどの行程を経て、データを書き出しフィニッシュです。詳細は、また次回。

 

まとめ

・emスクエア（の高さ）＝アセンダー＋ディセンダー
・Fontographer を立ち上げたら、「エレメント」→「フォント情報」で必要事項を入力する。
・Fontographer のドキュメントにペーストしたデータは透明なので、濃淡を100%にする必要がある。

ではまた！

 

こんにちは。ANGEL VIBESです。今日もFontographerを使ったオリジナルフォントの作り方お話です。前回は、フォントの図案を決めて下描き用紙に下書きし、下絵を完成させるところまで進みましたね。今日は、その下絵をAdobeIllustratorでトレースし、Fontographerに読み込ませるためのAIデータを作成するところまで解説します。

 

［2］スキャナーで下絵をスキャンし一文字ずつ切り分ける

下絵が完成したら、スキャナーでスキャンしAdobePhotoshopで開いて一文字ずつ切り分けます。切り分けた文字の下絵はpsdで保存します。「PSD下絵」などの名前のフォルダを作り、その中に保存していくと良いでしょう。
切り分け方ですが、下絵全体の中から１文字ずつ選択してコピー（コマンドC）し、新規ドキュメント（コマンドN）にペースト（コマンドV）。これをPSD形式で保存していきます。これで、1文字ずつ切り分けることができます。

下絵をスキャンしてPhotoshopで開き

1文字ずつ選択し、新規ドキュメントにコピー＆ペースト。
Aから始めて、こんなかんじのPSDデータをフォルダに保存していきます。

全部の文字を保存し終えたなら、トレースの準備は整いました。

 

［3］AI形式のトレース用紙を使いAdobeIllustratorで1文字ずつトレースする

「トレース用紙」何ソレ？　そうですね。そのようなモノはどこにも売ってません。これもANGEL VIBESオリジナルのAIデータがあるので、初めてフォントをデザインする方は、使っていただいてかまいません。→無料ダウンロードはこちら☆
「トレース用紙」は前回のお話で出てきた「下描き用紙」と内容は同じです。でも、「トレース用紙」は、ページ数（ドキュメントの数）が数メージあり、なおかつレイヤーに分けてあり、トレースがしやすい仕様になっています。「下描き用紙」をもとに下絵を作成したのなら、「トレース用紙」を利用していただくと作業がしやすいと思います。
※なお、私の自作の「トレース用紙」も、「俺が作ったトレース用紙だ」などとしてこの用紙のAIデータを売ったりするのでなければ、自由に使っていただいて結構です。どんどん使ってフォント作成にお役立てください。

では、AdobeIllustratorでAI形式のドキュメント、「トレース用紙」を開きます。まず、A、B、C、D・・・と順番に、［２］で作成した下絵のPSDデータを「下絵」レイヤーに配置していってみましょう。方眼の罫線に合わせて並べていきます。下絵の濃さは作業しやすい濃さに調節。下絵のPSDデータにも方眼の罫線があるので、おそらく作業しやすいと思います。
下絵を並べ終えたら、「Design」のレイヤーで下絵をトレースします。トレースしたAdobeIllustratorのドキュメントは、AI形式で保存します。

トレースし終えたら、少し落ち着いて全体を眺めてみましょう。
全体を見て、いかがですか？　気になる部分は微調整をしましょう。

これが

こうじゃ！

 

［4］トレースしたAIデータを「元AI用紙」に1文字ずつ保存します

「元AI用紙」何ソレ？　そうですね。お察しのとおり、ANGEL VIBESオリジナルのAIデータがあります。これも使っちゃいましょうか！→無料ダウンロードはこちら☆
※なお、私の自作の「元AI用紙」も、「俺が作った元AI用紙だ」などとしてこの用紙のAIデータを売ったりするのでなければ、自由に使っていただいて結構です。どんどん使ってフォント作成にお役立てください。

［3］で作成したトレースデータを「元AI用紙」にペーストし、1文字ずつAI形式で保存します。「元AI」などの名前のフォルダを作り、この中に保存していけばいいと思います。なおペーストした文字は、ベースラインにそろえてくださいね。
「AIデータも1文字ずつ保存しなければならないの？」
そうですね。そんな疑問も出てくるかと思います。でも、これはFontographerに読み込ませるために必要なのです。「元AI用紙」のドキュメントの上下に印がついていることに気がつきましたか？　実はこれがFontographerに読み込ませるための、必須の印です。
ちょと説明しますね。Fontograperは画像を読み込む時、上下の高さを100%として読み込みます。なので、任意の高さ100%を示す印を全部の文字のドキュメントに記すことが必要です。印をつけずに文字だけを読み込ませると、文字それぞれの高さを100%として読み込み、出来上がるとバラバラの大きさになってしまいます。正直なところ、この辺はFontographerの面倒なところではあります。

こうやって、1文字ずつのデータを作り保存していきます。

 

全ての文字をそれぞれ保存し終えましたか？　それではいよいよFontographerを使う段階です。次回はFontographerの使い方のお話です。

 

まとめ

手書きの下絵は、
1. スキャナーでスキャンし一文字ずつ切り分ける
2. AI形式のトレース用紙に下絵を配置し1文字ずつトレースする
3. トレースしたAIデータを「元AI用紙」に1文字ずつ保存

これでFontographerに読み込ませる準備は整いました。

ではまた！

 

こんにちは。ANGEL VIBESです。今日はFontographerを使ったオリジナルフォントの作り方のお話です。前回のおさらいをちょっとしますね。
私がFontographerをオススメする理由は、前回お話したように、他のフォント作成ソフトの使い方と基本が共通しているからです。Fontographerを基本として覚えてしまえば、他のフォント作成ソフトも覚えやすいと思います。

 

フォント作成のおおまかな手順

1. 図案を決めます
紙に手書きでラフデザインを描きます。紙は仕事で使ってる慣れているものでかまいません（ちなみに私はmuseの「Marker Pad」A4サイズを愛用しています）。描きながら試行錯誤するうちにデザインが決まってくるでしょう。
デザインがまとまったら、下描き用紙に書き写します。「下描き用紙」？　何ソレ？　これは後で説明します。

2. 下描きした図案をスキャンしトレースします
下描きした図案をスキャナーでスキャンします。これを下絵にしてAdobeIllustratorでトレースします。トレースした画像はAIファイルで保存します。文字のベースはこれで完成です。

３. AIファイルをFontographerに読み込ませフォントデータ化します
AdobeIllustratorで作成した文字のベースとなるAIファイルを、Fontographerに読み込ませます。AdobeIllustrator上で画像をコピーし、Fontographerの所定のマス目に１画像ずつペーストしていくイメージです。ペーストができたらカーニング設定等の行程を経て、フォントデータを書き出し完成します。

フォント作成の手順は、およそこんな流れです。
次は具体的な例をもとに、Fontographerを使用したフォント作成について詳しく解説したいと思います。

 

フリーフォント「DAISY」もFontographerで作りました

このフォント「DAISY」もFontographerで作りました（私のフォント配布サイトでダウンロードできます）。ローマ字の大文字だけのフォントなのですが、今回はこのフォントを例に解説します。フォントを作った経験がなく最初に作るなら、大文字だけで良いでしょう。慣れたら小文字も作ってみたら良いと思います。
私がこのフォントを作る時に使用したFontographerのバージョンは5で、言語は日本語版です。フォントのデータ形式は、MacでもWindowsでも使えるタイプ（クロスプラットフォーム）のOpenTypeフォントにしました。OpenTypeって何？　という方もいるかもしれませんが、フォントの形式の話はまた後日（長い話になると予想されるので・・・）。とりあえず、MacでもWindowsでも使いたいなら、どちらでも使えるタイプ（クロスプラットフォーム）のOpenTypeという形式があると覚えておいていただければと思います。

では、Fontogrpherを使ったオリジナルフォント作成の手順を解説していきます。

 

［１］下描き用紙に図案を描く

オリジナルフォント作成用の「下描き用紙」？　本当に「何ソレ？」です。実際、そんなモノ売ってませんから。ただ、方眼紙で代用は利くと思います。ですが、もし良ければ私が自作した「下描き用紙」を使っていただいても結構です。→無料ダウンロードはこちら☆

私が自作した「下描き用紙」を使うなら、A4の用紙にプリントして使ってください。プリントする紙の紙質は鉛筆で書きやすければ良いです。家庭用プリンタを使える環境なら、museの「Marker Pad」などのレイアウトパッドに印刷して使っていただくのも良いです。実際、私はそのようにmuseの「Marker Pad」に印刷して使っています。
※なお、私の自作の「下描き用紙」ですが、「俺が作った下描き用紙だ」などとしてこの用紙のAIデータを使って用紙を作って売ったりするのでなければ、自由に使っていただいて結構です。どんどん使ってフォント作成にお役立てください。

フォントの図案がまとまったら、下描き用紙に書き写します。細かな部分も表現できるので、鉛筆で描くと良いと思います。鉛筆は皆さんが使いやすいものが良いでしょう。ちなみに私の愛用はSTAEDTLER、あの青いやつです。

A、B、C、D、・・・一文字ずつ描いて、使いたい役物まで描いたなら、下書きは完成です。
次回は、この続きです。

 

まとめ

オリジナルフォントを作成する手順は
1. 図案を決め、紙に下書き
2. 下描きした図案をスキャンしトレースし、AIファイルで保存
3. AIファイルをFontographerに読み込ませフォントデータ化

下描きは
・方眼の用紙を使うと良い
・ANGEL VIBESオリジナル下描き用紙を使っても良い→無料ダウンロードはこちら☆

ではまた！

こんにちは。ANGEL VIBESです。今日はフォントを作りたいという方に向けた、プロローグ的なお話です。

フォントが好きだ。だから作りたい。そういった方はオリジナルのデザインで自作のフォントをどんどん作ってみたらいいと思います。
根気がいる作業が含まれるけれど、あれやこれやとデザインを考えるのは、実際、楽しいですよ☆

 

私がフォントデザインを始めたワケ

私は「ANGEL VIBES」というWebサイトで、自作のフォントを配布しています。そんなサイトを作ったのは、ごくごく自然な流れでした。
私の場合、とにかくフォントやタイポグラフィーが好きで、自分のネタ帳はいつの間にかオリジナルフォントのラフデザインでいっぱいになっていましたし、「Fontographer」（フォント作成ソフト）を手に入れた時、もうこれは配布サイト作るしかない！　と思いました。何より、1990年代からリアルタイムで目の当たりにしていた「フォント・パビリオン」への憧れがありましたしね。知ってますか？　「フォント・パビリオン」。私は今でも大事にとってあります。今やもう、宝物ですよ。

デザイナーのオリジナルフォントがインストールできる状態にパッケージ化されたデータ集は、今なら本や雑誌の付録になっていたり「FONT×FUN HYBRID」のような例があったり、ずいぶん見かけるようになりました。でも90年代当時は、こうしたデザイナーのオリジナルフォント集というのは斬新でした。90年代といえば、折しも、Mackintoshが普及しデスクトップ・パブリッシング（DTP）が浸透していった時代。そしてインターネットも家庭にまで浸透した時代。そのせいもあったのでしょう、デザイナー個人がオリジナルフォントをデザインしたりWebサイトで配布したりというのが、デザイン界隈ではちょっとしたブームでした。
今では閉鎖されてしまったフォント配布Webサイトもありますね。ちょっぴり寂しいですが、新しいサイト新しいデザイナー、Come on!

 

オリジナルフォントの販売は可能か？

いったんオリジナルフォントのWebサイトを開設してしまったりすると、ちょっと思い始めるのが「これ売れるのかな？」ということ。自作のオリジナルフォントの販売が可能か否かということですが、これは可能です。
DLmarketでオリジナルフォントを売っていらっしゃるデザイナーの方もいますね。自分のサイトでダウンロード販売をする方もいます。
私はそういったことはしていないのですが、ダウンロードして使用することについて基本的に無料の「フリーフォント」としてフォントを配布しているわけですが、「ただし、商用で使用する場合は商用使用料金をいただきます」ということにしています。なので、商用で利益が発生する媒体において使用する場合、例えば一般のアパレル企業が持つブランドのロゴに用いるような場合には、料金をお支払いしていただいています。このような商用使用料金としてですが、儲けは出ています。

 

オリジナルフォントを作るには何が必要か？

デザインをする時は何でもそうですが、オリジナルフォントをデザインする時も同じで、アイディアが必要です。フォント作成ソフトはAdobeのクリエイター向けのソフトが覚えられるなら、充分覚えられるでしょう。筋は悪くないですよ。
それよりもアイディアです。頭に浮かんだことや気がついたことは、すぐにメモしてネタを溜めておくことです。なのでまず必要なのは、ネタ帳です。持っていない方は、今すぐ自分が描きやすく持ち運びしやすいスケッチブックやメモ帳を購入しましょう。世界堂にLet's Go☆

ちなみに私のネタ帳はコレ

museのスケッチブックでサイズはA6。いつも手元に置いています。外出時にも忘れずに持って行きます。小さなバッグにも入るので持ち運びしやすいです。私はカフェでネタを考えたりまとめたりすることがしばしばあるので、コンパクトで邪魔にならないこのサイズがちょうど良いです。

ネタの中から「これはいけそう」という案が見つかれば、手書きラフ、そして下絵を描きます。下絵はスキャナでスキャンしてAdobe illustratorでトレースします。その後、フォント作成ソフトにトレースしたデータを読み込ませフォントデータを書き出します。
フォントを作成する手順はおよそそんなところですが、詳しい解説は次回に。といきたいところですが、フォント作成ソフトは何を選ぶべきか、その話が先ですね。ソフトによってフォント作成の手順が変わってくるので。
次回はフォント作成ソフトのお話です。

 

まとめ

フォント作りに必要なもの
1.アイディア
2.アイディアをメモするネタ帳
3.ラフデザインを描く紙
4.Adobe illustrator（ドローソフト）
5.フォント作成ソフト

ではまた！