Adobe Animateの画像トレースでビットマップを編集可能にする
Adobe AnimateのImage Traceでビットマップをベクターに変換し、パス、角、ノイズ、塗り、重なりを調整して結果を整理する方法を解説します。
目次
Adobe AnimateはJPEG、PNG、PSDなどのラスター画像を編集可能なベクターにトレースできます。現在の画面では配置ビットマップを選び、Object > Trace BitmapまたはModify > Bitmap > Trace Bitmapを使い、プリセットや設定を選んでプレビューし、新しい図形を確認します。
Adobeのヘルプでは機能をImage Trace、命令をTrace Bitmapと呼んでいます。どちらの名前で検索しても、このAnimateの工程を指します。After Effectsの場合は、Auto-TraceのマスクとSVGシェイプレイヤーのガイドでアニメーションに適したオブジェクトを選びます。
実用的な使い方
- 最も鮮明なラスターを読み込むか配置します。
- 選択してTrace Bitmapを開きます。
- 最も細かいプリセットではなく、図案に合うものから始めます。
- カラーモード、パス、角、ノイズ、方法、塗り、ストロークの変更をプレビューします。
- 確定し、編集可能な図形を確認します。
- 点を除去し、意図しない断片を統合し、冗長な点だけ単純化します。
- ラスター参考を削除する前に、最終アニメーションや出力サイズで比較します。
AnimateのImage Traceがすること
Adobeの現在のAnimateのImage Trace資料は、JPEG、PNG、PSDなどを変更可能なベクターへ変換すると説明しています。スキャンした鉛筆スケッチをトレースし、新しい絵の出発点にもできます。
見えるピクセルを図形へ再構成します。作者の元レイヤー、ブラシ設定、編集可能な文字、シンボル、リグ、隠れた形状は回収しません。別のアニメーション工程には、Mohoのビットマップからベクターへのガイドが、レイヤー付きラスターを残す、内蔵トレースを使う、リグ用SVGパーツを準備する場合を説明しています。
| 元画像 | 得られやすい結果 | 失敗した場合の選択 |
|---|---|---|
| 平面的なアイコンや少色イラスト | 別々の塗り領域 | トレース後に整理する |
| 高コントラスト線画やロゴ | 白黒の塗りやストローク | 二重になる重要な線を描き直す |
| 鉛筆スケッチ | 見える印の編集可能な解釈 | 先に清書やスキャン整理をする |
| 写真 | 多くの色図形やポスター風の単純化 | 様式化が目的でなければラスターを残す |
| 小さい、ぼけた画像 | 波打つ、合体した、推測的なエッジ | 大きい元画像を探すか描き直す |
ビットマップをトレースする手順
1. ラスターを準備する
不要な余白を切り取り、最も高品質な原本を使います。平面的な絵では、圧縮の縁取りや意図しない背景ピクセルを先に除去します。スキャンでは、必要な細部を消さずに紙と線のコントラストを調整します。
確認が済むまで原本を横に残します。きれいに見える結果でも、文字内の穴、顔の特徴、小さなシルエットを変えている場合があります。
Adobeの読み込んだビットマップのガイドは、素材の扱いを説明しています。読み込みとトレースは別の判断です。配置はピクセルを保ち、Trace Bitmapは新しいベクターを作ります。
2. Trace Bitmapを開く
配置ラスターを選択します。公式の方法は次のとおりです。
- コンテキストメニューでObject > Trace Bitmapを選ぶ
- PropertiesのBitmapコントロールでEditを選ぶ
- Modify > Bitmap > Trace Bitmapを選ぶ
調整中はPreviewを有効にします。Adobeによると、解像度は処理速度に影響します。最終サイズで改善しない余分な細部でも、大きな元画像は処理時間が延びる場合があります。
3. プリセットを出発点にする
高・低忠実度写真、グレー階調、白黒ロゴなどのプリセットがあります。プリセットは品質点数ではなく、初期設定の組み合わせです。
必要な細部を保つ最も単純なものを使います。3色のロゴを写真のような小領域の山にしないでください。柔らかな写真も、トレースが終わっただけでコンパクトな編集可能イラストになるとは期待しません。
4. モードとパレットを意図して選ぶ
基本設定にはPreset、Mode、Palette、Colorsがあります。カラーモードはカラー、グレースケール、白黒を決め、パレットと色数が領域数を左右します。
色を増やすと小さな階調変化を保てますが、編集やアニメーションが難しい断片も増えます。残る区別すべてに目的があるまでパレットを減らします。
詳細設定を理解する
現在のAdobeの定義は、最初の調整に使えるほど具体的です。
Paths
元のピクセル端にどれだけ密接に従うかを決めます。Adobeによると低い値ほど密接で、高い値ほど緩やかに適合します。
密接なほどよいとは限りません。完成図案に不要な圧縮の凹凸や手描きの揺れまで保つ場合があります。緩やかな適合は滑らかにしますが、意図した細部を削ることがあります。
Corners
鋭い曲がりを角の点にする強さです。高い値ほど角が増えます。角張ったバッジやブロック文字では上げ、丸い有機形が硬くなる場合は下げます。
Noise
トレース中に無視できるピクセル面積を設定します。値を上げると、除去対象になる小領域の面積も大きくなります。ほこりや圧縮の点に有効ですが、残したいそばかす、質感の点、小さな文字内の穴も消す場合があります。
Method
公式には2つの方法があります。
- Abuttingは隣接エッジが接する切り抜きパスを作ります。
- Overlappingは隣接図形と少し重なる積層パスを作ります。
Abuttingは平面モザイクとして理解しやすくなります。Overlappingは合成時の極細の隙間を避ける場合がありますが、隠れる形状も作ります。編集とアニメーションの計画に応じて選びます。
塗り、ストローク、白
白黒モードでは塗り領域を作り、十分細い要素をストロークとして扱えます。Ignore Whiteは白領域を除けるため、紙背景を大きな図形にしたくない場合に便利です。
実際の結果を確認します。1本の中心線を期待しても、細い黒線が塗り帯の両側のエッジになる場合があります。単一の編集可能ストロークが重要なら、描き直すか中心線向けの工程を使います。
アニメーション前に整理する
最初のプレビューをすぐ動かさず、結果を選択して確認します。
- 孤立点と見えない残りを削除します。
- 文字や図形内の穴を確認します。
- 隣接色が意図どおり接するか確認します。
- 意図しない背景長方形を除去します。
- 1つとして動く断片を統合します。
- シルエットを変えず冗長なノードを単純化します。
- 独立して動かす部分を分けます。
- 整理後に再利用図案をシンボルにします。
ノードへの拡大だけでなく、最終表示サイズにも縮小します。小さな誤差は動きの中では問題にならない場合がある一方、過剰な細部は編集を遅くします。
書き出すかAnimate内で使う
Animateプロジェクトの一部なら、元ビットマップと整理済みベクターを別の名前付きレイヤーにした編集可能原本を残します。後の編集で忠実さの問題が出た場合の参考になります。
SVGで渡すなら公式のSVG書き出し工程を使い、受け取りアプリで確認します。フレームの書き出しは、トレースにない元レイヤーや編集可能文字を再現しません。Synfigには直接SVG読み込みとInkscapeのSIF書き出しを比較し、動く部分とグループ原点を確認します。Toon BoomにはHarmonyのベクター化とSVG読み込みガイドが、ネイティブ描画の輪郭、ビットマップのエンベロープ、Harmony 25読み込みの描画とパレットの選択を説明しています。
Adobeは現在、Animateはメンテナンスモードとしています。提供は継続し、サポート、セキュリティ更新、不具合修正を受けますが、新機能は予定していません。既存工程からImage Traceがなくなるわけではありませんが、新しい長期制作工程の選択には関係します。
別のベクター化ツールを使う場合
同じ文書内で整理して動かすなら内蔵トレースが適しています。Image TraceとAIベクター化の比較はその取捨選択を説明しています。Animate外で変換し、複数画像を比較し、アニメーション前に再利用SVG原本を作る場合は別ツールが適することがあります。
PerfectVectorの画像からベクターへの変換は、対応ラスターをブラウザーで編集可能な図形へ再構成します。同じ元画像でAnimateの結果と比較し、次を判断します。
- 見えるシルエットと内部形状の忠実さ
- 同等の細部に対するアンカー数
- 有用な色分離
- 整理にかかる時間
- Animateに読み込んだ後の挙動
修正が少ないほうを使います。どちらも、低品質ビットマップに失われた元フォント、隠れたレイヤー、正確な曲線は推測できません。
よくある質問
AnimateにImage Traceはありますか？ はい。ヘルプではImage Traceと呼び、現在の命令にはObject > Trace BitmapとModify > Bitmap > Trace Bitmapがあります。
PNGをベクターにできますか？ はい。見えるPNGピクセルを変更可能なベクターに再構成します。元レイヤー、編集可能文字、シンボル、隠れた細部は復元しません。
Paths、Corners、Noiseは何をしますか？ Pathsはピクセル端への適合度、Cornersは曲がりを角にする強さ、Noiseは無視するピクセル領域の大きさを変えます。
AbuttingとOverlappingのどちらを使いますか？ 共有エッジで接する切り抜きパスにはAbutting、隣を少し覆う積層図形にはOverlappingを使います。編集とアニメーション方法に合わせて確認します。
Adobe Animateは廃止されましたか？ いいえ。Adobeによるとメンテナンスモードで提供は続き、サポート、セキュリティ、不具合修正も継続しますが、新機能は予定していません。
参考資料
- Adobe — AnimateのImage Trace — 現在の命令、プリセット、プレビュー、モード、詳細設定の定義。
- Adobe — Animateの読み込みビットマップ — 現在の読み込みと扱い。
- Adobe — AnimateからSVGを書き出す — 現在のSVG書き出しと受け渡し。
- Adobe — Capture FAQ — Animateの提供、メンテナンス、サポートと修正、新機能予定なしに関する現在の説明。
- PerfectVector — 画像からベクターへ — 現在のブラウザー変換、プレビュー、出力、製品の範囲。
整理を始める前に別の結果を比較したいなら、同じビットマップをブラウザーでベクター化し、両方のパスを確認して、少ない修正で図案を保つほうを残してください。
