手書きレタリングの形を保ってベクター化する方法
文字の穴、表情のある線の端、意図した質感、編集しやすい曲線を保ちながら、手書きレタリングをきれいなSVGにする方法を解説します。
手書きレタリングをうまくベクター化するには、カメラが記録したすべてのピクセルではなく、描こうとした形をトレースします。きれいな高コントラストのスキャンから始め、インクの質感をどれだけ残すか決め、SVGの書き出し前に文字の穴、線の端、接合部、ノード数を確認します。
最後の確認が、使える文字ファイルと、形式上は有効なだけのトレースを分けます。数秒でSVGができても、eの穴を閉じ、近いストロークを結合し、生き生きした筆の終わりを鈍いくさび形に変えてしまう場合があります。
要点
- 太く、コントラストが高く、すでに目的の形に近い文字には自動トレースを使います。
- 小さい原稿、撮影の悪い原稿、長く使うロゴや文字体系にするものは手で描き直します。
- 重要な不規則さを残し、スキャンのノイズや偶然の凹凸を削除します。
- 大きな拡大と最終サイズの両方で、穴、線の端、接合部、アンカーポイントを確認します。
まず残すものを決める
手書きレタリングは入力した文字とは違います。不均一なベースライン、次の線に寄りかかるストローク、文字末尾のかすれた筆の輪郭に価値があることがよくあります。すべて整理するとありきたりな見た目になり、すべて残すとほこりと揺れが多い重いSVGになる場合があります。
トレース前に、この作品の個性を示す特徴を確認します。
- カウンター： a、e、g、oなどの内側の、閉じた、または部分的に閉じた空間です。
- ターミナル： ストロークの端です。鋭い払い、丸い端、かすれた筆の終わりが、スタイルの多くを担います。
- ストロークの接合部： 筆記体の線が交わるか、別の線に合う場所です。
- 質感： 意図したインクの粒、筆毛の隙間、粗い輪郭です。
- リズム： 単語全体の間隔、傾き、ベースラインの変化です。
それ以外は整理の候補です。紙の粒、圧縮のブロック、ほこり、影は取り込みの問題で、文字の特徴ではありません。個別の文字をフォントの字形にするなら、FontForgeのSVG読み込み手順でベースライン、輪郭、間隔を設定します。
自動トレースか描き直しか
どちらも本物のベクターを作れます。原稿と、どれだけ長く使うかで選びます。
| 状況 | 適した方法 | 理由 |
|---|---|---|
| きれいな白紙の太い黒文字 | 自動トレース | 境界が明確で解釈がほぼ不要 |
| 意図したかすれのある筆文字 | 自動トレース後に選択的な整理 | 全体の描き直しは個性となる質感を消す場合がある |
| 影やぼけのある小さなスマートフォン写真 | 取り込み直してからトレース | 避けられる歪みから始めるべきでない |
| 主なブランドロゴになる文字 | 手描き、または丁寧なトレース修正 | 長く再利用するため正確な形状に価値がある |
| 単発の印刷、ステッカー、SNS画像 | 自動トレース | 再利用する文字体系よりきれいな結果が重要 |
| プロッターや1本線の彫刻 | 中心線の工程 | 通常の輪郭トレースはインクの両側の縁をたどる |
最後は見落とされがちです。画像ベクター化ツールの大半はインクを囲む塗り形状を作ります。印刷、ウェブ、ビニールの形、多くの塗りつぶし彫刻には正しい方法です。ペンプロッターや1本線の彫刻には中央のパスが必要です。Inkscapeの現在のトレースガイドは手書きや線画用の中心線モードを説明しています。線画のトレースガイドと署名SVGガイドでも違いを詳しく説明しています。
きれいなトレースのための準備
- 紙に対して正面から取り込みます。 十分な解像度でスキャンするか、均一な日光で真上から撮ります。遠近の歪みはトレース前に文字の形を変えます。
- 机や紙の端をトリミングします。 解釈が必要な作品だけを渡します。
- ブラックポイントとホワイトポイントを調整します。 紙はきれいな白、主要なインクは濃くします。細い入りのストロークが消えるほどコントラストを上げません。
- 孤立した汚れを消し、意図した質感を残します。 拡大し、各点を筆の方向と比べます。ランダムな点は通常消し、繰り返す筆毛の跡は作品に属するかもしれません。
- 偶然の隙間を修正します。 元の線が明らかにつながる意図なら、乾いたペンや悪い写真による途切れを閉じます。
- 未変更のスキャンを残します。 修正で絵が変わり始めたときの基準です。
デジタルで描いたなら、単色または透明背景の大きなPNGを書き出します。低品質JPGは避けます。圧縮のブロックが輪郭の小さな形になるためです。
ベクター化して文字の形を確認する
準備したスキャンを編集可能なSVGにし、手作業の前に確認したい自動トレースの用途にPerfectVectorが適します。文字をアップロードしてSVGを生成し、完成と扱う前に確認します。
まずカウンターを見ます。重要な内部の穴はすべて開いているべきです。強く平滑化したり近い輪郭を結合したりすると、小さい穴から閉じやすくなります。
次に線の端と接合部を見ます。端はランダムな凹凸でなく、元の勢いを保つべきです。交差では、偶然の橋、狭まった角、細い白い隙間を探します。縮小すると見えなくても、印刷や切断で再び現れる欠陥がよくあります。
最後にエディターでアンカーポイントを表示します。多いほど忠実とは限りません。簡単な曲線の点が密集すると編集が難しくなります。Adobeの現在のトレース編集ガイドは、過剰な点にSimplifyを勧めています。ノードが多すぎるSVGでは、個性を消さず判断する方法を説明しています。
質感をどれだけ残すか
共通の「きれいな設定」はありません。使用先で決めます。
スクリーン印刷、ポスター、大きなラベルでは、輪郭の質感が元のインクらしさを出す場合があります。大きな隙間と筆毛の跡を残し、安定して再現できない小さな断片を消します。
ビニール切断、レーザー切断、小さい印では、さらに簡略化します。各切り欠きが工具の動き、各点が別の形になり、内部の小さな孤立部分は剥がしや製造が難しくなる場合があります。800%だけでなく最終の実寸で試します。
質感が重要なロゴなら、個性のある主要版と簡略化した小サイズ版を保存します。小サイズ版は悪いトレースではなく、細部が残らない場所のための意図した視覚調整です。
よくある失敗と対処法
文字の穴が閉じた。 元画像でその周囲の分離を強めるか、小さな切り抜き形状で編集します。1文字を救うために全体を減らし続けないでください。
2つの線が結合した。 元の線が接しているか確認します。接していなければ元の隙間を整理して再トレースします。接していれば、重なりを1つのシルエットにするか、重ねた形のままにするか決めます。
輪郭が溶けたプラスチックのよう。 個性を消しすぎています。選んだ質感を元から戻すか、平滑化を減らします。必要なのは意図した不規則さで、全体一律の粗さではありません。
曲線が落ち着かない。 ノードが多すぎてピクセルのノイズを追っています。少しずつ簡略化し、そのたびにスキャンと比べます。
白い四角がある。 紙が背景形状としてトレースされています。削除し、明るい・暗いキャンバスの両方で確認します。隠れた背景の問題も防げます。
最後の実用確認
実際に使うソフトで開き、納品前に確認します。
- 開くべきカウンターがすべて開いている。
- 細い入りと抜きのストロークが消えていない。
- 通常の読むサイズで接合部が意図した見た目である。
- 線の端が元の筆跡に似ている。
- 質感が再現できる大きさで、小さなノイズがない。
- 簡単な曲線のアンカーポイントが少ない。
- 必要な場合、背景が透明である。
- 最終の印刷、切断、画面サイズで使える。
合格したら、編集可能なSVGとラスタープレビューを一緒に保存します。SVGは制作用原本、プレビューは顧客、印刷業者、将来の自分がエディターなしで意図した見た目を確認するためです。
ゴム印にはゴム印用画像の工程できれいなスキャンを編集可能な形へ変え、押印サイズで穴と細い線を確認します。封蝋なら封蝋用の工程を使い、注文前に製作者と実寸の図案を確認します。どちらの変換も印や金型自体を製造しません。
陶器の印なら、陶器用スタンプ画像の工程に準備し、予定サイズで穴を確認します。
参考資料
- Adobe Illustrator：画像トレースパネルのオプション — しきい値、パス、角、ノイズ、塗り、ストローク、透明度の調整です。
- Adobe Illustrator：画像トレースの結果を編集 — 編集可能なパスへの展開と過剰な点の簡略化を説明しています。
- Inkscape初心者ガイド：画像のトレース — 手書きや線画の輪郭・中心線トレースを説明しています。
- W3C：SVGのパス — 開閉パス、サブパス、曲線、端点を説明しています。
スキャンが準備できたら、PerfectVectorにかけ、丁寧な描き直しより自動トレースを選ぶ前に、穴、線の端、接合部、アンカーポイントを確認します。
