Mohoでビットマップをベクター化：トレースかラスター維持か

MohoはDraw > Trace Imageでビットマップ図案をベクターへ変換できますが、変換は任意です。ラスター図案の読み込みとアニメーション、レイヤー付きPSDの維持、外部で準備したSVGの読み込みもできます。動かすものと編集したいものに合わせて方法を選びます。

トレースは見える図形を再構築します。手に属する図形を決めたり、胴体の後ろに隠れた腕を復元したり、完成したリグを作ったりはしません。この区別は、画像が鮮明に見えるかより重要です。

図案の方法を選ぶ

• **ラスターを保つ：**描いた質感がデザインの一部で、既存の部品が動きに合う場合です。
• **Mohoの標準トレースを試す：**アニメーションアプリ内でシンプルな画像を変換したい場合です。
• **既存SVGを読み込む：**使える編集可能なベクターがある場合です。
• **外部でトレースする：**Mohoへ渡す前にラスター絵をSVGとして準備・確認したい場合です。
• **可動部品を描き直す：**トレースで必要な構造が得られない場合です。

拡張子より動きから始める

トレース前に、図案が行う小さい動作を書きます。本から鉛筆を持ち上げるのか、腕を曲げるのか、描いた背景へカメラが近づくだけかで準備は異なります。

Mohoの現在の機能説明は、レイヤー付きPSDの読み込みと、画像・ベクターのアニメーション用メッシュを説明しています。ビットマップは、動かす前に必ず変換すべき未完成のベクターファイルではありません。ここでの高度な読み込みとリギングはMoho Pro 14向けです。Proの手順を使う前に、自分のエディションの機能を確認します。

レイヤー付きPSDをSVGへ変える前に、PSDレイヤー保持の制限を読みます。分かれた部品が必要なら元のレイヤーを残します。見える合成画像のトレースは別のアセットです。

アプリを比較するなら、Adobe Animateのトレースガイドが独自のTrace Bitmapを扱います。そのメニュー名や設定をMohoへ持ち込まないでください。

最初のサンプルに標準Trace Imageを使う

現在のMoho 14のTrace Imageの章では、絵をImageレイヤーへ読み込み、選び、Draw > Trace Imageを使います。確定後はベクターレイヤーを加え、元のImageレイヤーを非表示にします。ビットマップの参照は残ります。

作りたい図案に合うモードを選びます。

小さいサンプルを調整してから採用します。Detail reductionは、元画像への近さと点の数を減らすことのトレードオフです。色を増やすと区別が残っても、後で整理が必要な場合があります。Photo Edgesは縁のストロークなので、カラーの塗り領域と同じ結果は期待しません。

代表的な部品や小道具1つから始めます。陰影付きキャラクター全体では、顔、質感、重なる手足、細部が一度に混ざり、異なる処理が必要かもしれません。

トレース後は見た目だけで採用せず、新しい図案を調べます。シルエット、図形間の空間、一緒に動かす必要のある部分の数を確認します。まぶたや肘に慎重な曲線配置が必要なら、すべての点を保つより描き直すほうが制御しやすい場合があります。

Trace Imageと、手動トレースの参考画像として使うことも区別します。自動トレースはピクセルからベクターを作り、参考画像は意図した構造を自分で描くためのものです。どちらも動きの計画は必要です。

描いた図案が有用ならPSDレイヤーを保つ

レイヤー付きの元データがあれば、そうでなければ描き直すことになる内容を保持できます。手、前腕、胴体、衣服をイラストレーターが分けているなら原版を保ちます。統合PNGは分離を失い、トレースで元のレイヤー内容を取り戻せません。

ラスターでは、目的の動きに合わせて準備します。

1. 読み込み後に識別できるよう部品を命名します。
2. 計画したポーズで接する部分に十分な重なりを含めます。
3. 質感と陰影を、一緒に動かす部品に付けます。
4. 最も近い予定のカメラ画角で確認します。
5. キャラクター全体の準備前に小さな動きを試します。

これは準備の確認で、任意のPSDが完成した人形として届く保証ではありません。PSD対応はレイヤー付き図案の読み込み方法を提供しますが、配置とリグは必要です。顔の側面が見える回転には、正面の詳細なトレースより別の絵や追加形状が必要かもしれません。

現在のMohoの説明に従ってSVGを読み込む

公式機能ページによると、Moho 14はレイヤー、グラデーション、マスクに対応する改善されたSVG読み込みを導入しました。IllustratorとEPSだけを挙げる古いオンラインマニュアルは、その現在の機能を説明していません。

SVGがあるなら元のベクターを保ちます。スクリーンショットを再トレースすると再構築が増えます。フラットなPNGやJPEGから外部で形を準備したいなら、PerfectVectorの変換ツールで読み込み前に確認するSVGを作れます。元画像と結果を比べ、動きに合わせた図形の整理を決めます。

SVGグループは要素の入れ物で、骨格リグではありません。SVG仕様のグループモデルが構造を説明しています。多数の編集可能なパスがあっても、有用な名前付き部品があるとは限りません。すべて一緒に選ばれるなら、ビットマップと結論する前にSVGのオブジェクトとグループ解除の診断を使います。

アニメーション用図案と判断する前に小道具を確認する

以下は、チームが指示した教室のイラストの既存PerfectVector変換です。地球儀、本、鉛筆があり、調査では33本のパス、12色のベタ塗り、埋め込み画像なしでした。名前付き小道具に整理するSVGグループもありませんでした。

準備の例として役立つ2つの点があります。

• **1色が別の物にまたがります。**同じ黄色の5本のパスには本と鉛筆の部分が含まれます。色選択では鉛筆全体を選べず、動かすと本の一部も動きます。
• **白く見える隙間も塗り図形です。**地球儀と外側の支えの間は、不透明なほぼ白い領域です。外の背景は透明ですが、その囲まれた領域は透明ではありません。背景が違うと重要になります。

SVG準備の確認

鉛筆だけを持ち上げるシーンなら、輪郭、消しゴム、帯、黄色い本体、陰影、木、先端のすべてのパスを特定します。本と地球儀は選択の外へ置きます。鉛筆に覆われていた部分も調べます。移動で原画が描いていなかった場所が見える場合があります。

回転する地球儀では、球の図案と静止する台に別の計画が必要です。円の上の平らな地図は、復元した3D地球ではありません。グループ化に時間を使う前に、目的の回転の描画・動かし方を決めます。

ほぼ白い隙間も意図して判断します。塗られた領域なら保ちます。シーンの背景を見せたいなら、その領域を編集し、コピーで周囲の輪郭を確認します。淡い塗りをすべて消さないでください。本のページや鉛筆の木にも淡い色があります。

小さな読み込みと動作を確認する

SVG対応は使用先の試験の出発点で、この小道具がMohoで正しく動く証拠ではありません。コピーで確認します。

複雑なリグを作る前に有用な動作1つを試します。小道具なら鉛筆を上げ、見える領域を確認します。キャラクターなら目的のバインドで関節1つを試します。その規模で構造を直してから作業を広げます。

失敗したらトレースの細部を増やすのが必ず答えとは限りません。部品を整理し、不足を直し、曲線を描き直すか、目的の外観になるラスターを保ちます。ベクタートレース品質の評価表は、使用先の動作を整ったプレビューとは別に確認します。

よくある質問

Mohoはビットマップをベクターにできますか？ はい。Imageレイヤーへ読み込み、Draw > Trace Imageを使います。結果を確認して動かす部品を整理します。トレースは完成したリグを作りません。

Mohoで動かす前にPSDをベクター化する必要がありますか？ いいえ。レイヤー付きPSDに対応するので、描いた細部を残すラスターの手順も適切です。目的の動き用に部品を準備し、リグを試す必要はあります。

Moho 14でSVGを読み込めますか？ はい。レイヤー、グラデーション、マスクを含む改善されたSVG読み込みを導入しました。アニメーションに使う前に、自分のファイルの見た目と構造を確認します。

トレースで腕、脚、頭が分かれますか？ そうなるとは考えないでください。見える領域をたどるので、1部品が多数のパスに分かれたり、色で無関係な部分がつながったりします。必要な動きに合わせて整理・描き直します。

参考資料

1. Lost Marble — Mohoの機能 — レイヤー付きPSD、画像・ベクターメッシュ、Moho 14の改善されたSVG読み込み。
2. Lost Marble — Moho 14 Trace Image — 標準コマンド、変換モード、設定、保持するビットマップ参照。
3. W3C — SVGドキュメント構造とグループ — グループが図案の入れ物で、アニメーション部品やリグ情報ではないこと。

---

動かす前にラスターの絵へ編集可能な図形が必要なら、PerfectVectorで代表的な部品1つを変換します。輪郭と囲まれた隙間を原画と比べ、可動部品を整理し、残りの準備前にMohoでSVGを試してください。