第3回
「Photoshopから画像を
  Fontographerに移す」

1998/08/10 長倉 さかゑ    
質問・問い合わせは上の千社札をクリックして下さい。
青い囲み線はそのうち見えないようにします。
トップページに戻る

●第4回「手書きサインをFontographerに移す」」はここをクリックして下さい。
●第3回「Photoshopから画像をFontographerに移す」はここをクリックして下さい。
 
●第1回「素材を用意する」はここをクリックして下さい。  

photoshopからFontographerへの画像コピー

支給されたロゴなどの清刷などをFontographerに移し、修正しフォントにしたい場合などに私がとる方法です。
どちらの方法をとっても結局は、アウトラインのなめらかさと、パスの設置される場所、パスの種類は下絵を見ながら手作業の修正となります。

スキャニングデータからFontographerへ画像データをもって行くには、二つの方法があります。
1)画像として持っていく方法。この画像を下絵としてFontographerでオートトレースします。
2)選択範囲のパスを作りこれをEPS(Adobe Illustrator1.1フォーマット)として保存して、これをFontographerから読み込む方法。アウトラインのパスとして認識しますので、トレースする必要がありません。
ポイントが多くなり汚いですが、取り敢えず、そのまま文字として使うことができます。

上の二つの方法を、もう少し詳しく説明しますと、
1)画像として持っていく方法
清刷をグレイスケール300dpiほどでスキャニングします、あまり解像度を高くしても結局トレースしますので、ほどほどの解像度にしています。スキャンデータをphotoshopで修正します。
まず、まず「イメージ」→「色調補正」の「レベル補正」でヒストグラムの変更して、大ざっぱに整えます。つぎに「イメージ」→「色調補正」の「明るさ・コントラスト」で白黒を整えます。画像が整ったら、グレイスケールのまま「イメージ」→「階調補正」→「2階調化」します。文字がしっかりさせたら、これをFontographerに移します。

photoshop上でFontographerに移して文字として作りたい部分を選択します。方法は自動選択ツール「魔法の杖」で文字の部分をクリックして選択します。他の部分も選択しなければならないので「近似色の選択」でぜんぶ選択します。普通にコピーして、Fontographerで文字にしたい字種ウィンドウを開き、ここにペーストします。選択された画像はテンプレイトレイヤーにコピーされグレイで表示されます。これをオートトレースしてパスを作ります。

問題はこのFontographerの「オートトレース」です。どういう設定にすればいいのでしょうか。下に例を示します。

図1━━━━━━━━━━

右の図は雑誌の記事タイトルをスキャニングデータしてphotoshopで修正を終えたものの部分です。
一文字23ミリ角の新ゴUがスミで印刷されていたものです。読み込んだタイトルは右下の「デジタル大事」で6文字です。
photoshopの画面です。

モノクロ2値に見えますが、グレイスケールです。解像度は200dpi。

この文字を選択してコピーしてFontographerにペーストしました。

●スキャンした解像度が高い場合や、サイズが大きい場合にはFontographerにペーストしても全部が正常にコピーされない場合がありますので、その時は解像度を下げてもう一度試して下さい。


図2━━━━━━━━━━

上の図のphotoshopで、文字部分を選択してFontographerにペーストとして、オートトレースしたものです。トレースの設定は右下の図です。
微調整で曲線フィットは「きつく」です。右下の設定画面これでよめます?

6文字でパスの合計は177です。濁音の濁点や「シ」の一画、二画の点はパスがそれぞれ4個ではなく、5個から7個でトレースされています。

ペースト画像はテンプレイトレイヤーにコピーされて、グレイで表示されますが、これから下の図は説明のため隠してあります。


図3━━━━━━━━━━

オートトーレスの「自動」で曲線フィットは「1」で、最もラフなトレースです。
6文字でパスの合計は139です。

ほとんどの点画が角のポイントだけでトレースされています。曲線ポイントや、直線とアールがつながるところに生成させる「タンジェントポイント」はありません。

「デ」の二つ目の濁点は、なんと3つのコーナーポイントでトレースされています。


図4━━━━━━━━━━

オートトーレスの「自動」で曲線フィットは「5」です。
6文字でパスの合計は158です。

ほとんどの点画が角のポイントは、おさえられてトレースされています。アールの途中で曲線ポイントが作られていますが、しかし、ぎこちなく使えるポイントではありません。

ポイントの総数で判断すると、こんなもんでしょうけれど、輪郭が甘すぎます。


図5━━━━━━━━━━
自動で曲線フィットは最もきついレベルの「10」です。
6文字でパスの合計は177です。

図2の微調整で曲線フィットは「きつく」とほぼ同じトレース結果になっています。パスの合計も同じです。実質的に同じでしょう。

トレース結果としての輪郭としては、ほぼ近いですが、ポイントの総数が多すぎます。


上のオートトレースの中では、図4の設定でトレースしておいて、トレースされたパスを手作業で修正しながら直していくのが早いのではないかとおもいます。
形によってはオートトレースはしないで、初めから手でトレースした法が早くて、きれいに出来る場合も多くあります。変なトレースを直していくと思いのほか時間がかかります。慣れてくるとポイントの編集、ハンドル(方向線、方向点)の編集も楽になります。文字のパスは適正に、いたずらに多くのポイントを作らないで、スマートなパスを作るようにしましょう。
文字のパスに較べれば、Adobe Illustratorでのベジエ編集、Photoshopでの切り抜きのクリッピングパスなどは簡単で神業のように、早くきれいにできるようになります。赤子の手をひねるようなものです。

2)選択範囲のパスを作りこれをEPS保存して、
  これをFontographerから読み込む方法。

photoshop上でFontographerに移して文字にしたい部分の画像を選択します。次に選択した部分の囲み線を、パスに直します。当然、文字の形が甘くならないように最小の0.5ピクセルで変換します。この作業用パスを「ファイル」→「出力用プラグ」→「Illustratorへのパス出力」でIllustrator1.1フォーマットで書き出し、保存します。Fontographerで文字にしたい字種ウィンドウを開き、「メニュー」→「読み込み」→「EPS...」で保存したファイルを開き、直接読み込みます。読み込んだのが下の「図6」です。


図6━━━━━━━━━━

photoshopで解像度の1ピクセルごとに選択されるので、アールの部分はピクセルの輪郭が忠実にトレースされ、ガタガタになっています。

水平垂直だけで作られている画像ならいけるかもしれません。
このテストでは6文字でパス合計はなんと1,680になっています。

●Fontographerでは一パレットの最大パスが2500ほどです。これ以上のパスがあると正確に文字を表示しなくなります。

●この方法はアウトラインレイヤーに直接読み込みますので、これを修正すると修正前の形が分からなくなります。そこで読み込んだパスをいじる前に、テンプレートレイヤーにコピーして足がかりを残しておくと、修正が楽です。

トレースの修正結果です。

●この続き、第四回へ進む