第4回
「手書きサインを
 Fontographerに移す」

1998/09/20 長倉 さかゑ    
質問・問い合わせは上の千社札をクリックして下さい。
  トップページに戻る 

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

 

 さて、いよいよサインの文字化です。
 お預かりしたサインはスキャニングして、データをphotoshopで調整して画像データを整えてFontographerに持っていきフォントにします。手順としては前回第3回の説明の「画像」としてFontographerに移し、トレースする方法です。


流れとしては下のようになります。
  1)サインのスキャニング
  2)photoshopで画像を調整して、サインをしっかりさせる
  3)サイン部分を選択して、コピーします。

次にFontographerをアクティブにして、入れたい文字ボックスを開き
  4)ペーストします
  5)オートトレースします。
  6)トレースの細部調整。
  7)字幅などの調整

以下、図解で順を追って説明していきます。

photoshop上でサインの部分を選択します。方法は自動選択ツール「魔法の杖」で文字の部分をクリックして選択します。普通にコピーして、Fontographerで文字にしたい字種ウィンドウを開き、ここにペーストします。選択された画像はテンプレイトレイヤーにコピーされグレイで表示されます。これをアンダーレイとしてアウトラインレイヤーでトレースしてパスを作ります。

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

右の図はサインをスキャニングデータしてphotoshopで修正を終えたものの部分です。
スキャニング解像度を高くしても結局トレースしますので400dpiの解像度にしています。

スキャンデータをphotoshopで修正します。まず「イメージ」→「色調補正」の「レベル補正」でヒストグラムの変更して、大ざっぱに整えます。つぎに「イメージ」→「色調補正」の「明るさ・コントラスト」で白黒を整えます。これでサインの文字部分をはっきりさせます。


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

右の図は、わかりにくいと思いますが、photoshopでサインの黒の部分を選択している図です。

photoshop上で修正の終わったサインの部分を選択します。方法は自動選択ツール「魔法の杖」で文字の部分をクリックして選択し、他にも離れた部分にもある場合は、「選択範囲」→「近似色の選択「で忘れずに全部コピーしてFontographerにペーストします。

コピーは通常のコピーです、Adobe Illustratorでのコピーのように「option」は使いません。


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


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

photoshopで選択コピーして、Fontographerをアクティブにして、移したい文字ボックスを開けて、コピーします。

ペースト画像はアウトラインレイヤーの下にあるテンプレイトレイヤーにコピーされて、グレイで表示されます。

大文字「C」のボックスにコピーしたところの図です。ハイトいっぱいにペーストされています。


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

オートトレースした後の図です。ペーストした画像をトレースしました(させました)。

コピーしたボックスのアウトラインレイヤーで、メニューバーの「エレメント」→「オートトーレス」を選択します。
 設定は「自動」で曲線フィット「5」の設定です。

これではひどいので、このポイントをこれから手で修正していきます。
パスの修正は丁寧に、方法はベジェですので Illustrator と同様、ポイントの削除はコマンド+Mです。


図5━━━━━━━━━━
修正して右図くらいなら、いいでしょう(偉そうに!?)。
下絵と少しずれがありますが、少しラインを変えています。

ポイントはもう少し多くてもいいかも知れませんが。

これでサインのアウトラインが完成しました。

図6━━━━━━━━━━
取り込み画像と、ポイントを不可視にして、プレビュー表示したものです。

太さが微妙に変わっているところや、筆跡に少し揺らぎがあるところ、手書き風の雰囲気を残してあります。

ちなみに、
テンプレートを表示しないときはレイヤーボックスの「テンプレート」のチェックをはずします。
プレビュー表示は「コマンド」+「L」、ポイント消去(表示)は「コマンド」+「U」がショートカット。
どちらも「標示」メニューの上に並んでいます。

図7━━━━━━━━━
トレースの修正結果を大文字Cに割り当てました。
Adobe Illustrator5.5で印字してみたところです。

これでマークができて、次に算用数字をデザインして文字に加えれば当初パーツすべてができあがります。
数字のデータを送って下さい。photoshop、Adobe Illustratorのどちらでもいいです。