PerfectVector
著者: Irene Kim2 分で読める

Adobe Captureで画像を編集可能なベクターシェイプにする

スマートフォンのAdobe Captureで画像をベクター化し、シェイプを整え、Creative Cloudライブラリに保存して、編集可能な結果を確認する方法を解説します。

目次

Adobe Captureはスマートフォンで画像をベクター化できます。ただし、元の作品を復元するというより、再利用可能なシェイプを取り込むと考えると適切です。高コントラストの対象にカメラを向けるか画像を選び、残す細部を調整し、不要な領域を消してCreative Cloudライブラリへ保存します。その後、対応するAdobeアプリで開き、パスを確認できます。

この違いは重要です。明瞭な葉、インクの印、ステンシル、単純なロゴのシルエットは、扱いやすい編集可能な素材になり得ます。柔らかい影、髪、反射、数十色を持つ写真は、かなりの修正を要する解釈結果になりがちです。

実用的な工程
  1. 平面的で、明るく均一に照らされた高コントラストの対象を使います。
  2. CaptureのShapesを開き、撮影範囲を決めるか画像を読み込みます。
  3. 意図した穴を閉じずに、細部の調整でノイズを除きます。
  4. 取り込み後、ほこり、背景の断片、不要な領域を消します。
  5. 滑らかな輪郭の生成後、保存前に確認します。
  6. 正しいCreative Cloudライブラリに保存します。
  7. Illustrator、Fresco、Photoshopなどの対応アプリで開き、実際の形状を確認します。
  8. パス、穴、倍率の確認に合格してから、受け取り側のアプリで書き出します。

Adobe Captureが作るもの

AdobeはCaptureを、写真をベクターシェイプなどのデザイン素材に変換するモバイルツールと説明しています。現在のCapture製品ページは、素材をCreative Cloudライブラリに保存し、デスクトップやモバイルアプリで再利用できるとも説明しています。

Shapesでは、見える境界をベクター形状へ再構成します。ピクセルになる前の元ファイルを復元するわけではありません。元のフォントの特定、隠れたレイヤーの復元、全オブジェクトの正確な分離、作者の元のベジェ曲線の再現は期待しないでください。

元画像得られやすい結果主なリスク
白い紙の黒いインクの印コンパクトな塗り図形ほこりや紙の影が凹凸や点になる
単純な葉やステンシル内部の穴を持つ認識可能なシルエット細い隙間が閉じる
はっきりした少数の領域を持つ平面的なロゴ使えるトレース素材や出発点文字や色境界が変わる
鉛筆スケッチ見える印を滑らかに解釈した形薄い線が消え、質感が断片になる
写真細部を単純化した様式的な形階調が扱いにくい領域になる

現在のFAQは出力をベクターベースのシェイプとし、Photoshop、Illustrator、InDesign、After Effects、Animate、Premiere、Fresco、Expressで対応するとしています。対応していても、すべてのアプリで同じように編集できるとは限りません。実際に仕上げるアプリで開きます。

Adobe Captureで画像をベクター化する方法

1. アプリを開く前に元画像を準備する

トレースが判断しやすい画像を用意します。均一な光と無地の対照的な背景を使い、平面の図案にカメラを平行にします。関係ない物を切り取ります。既存画像を読み込むなら、SNSのサムネイルやスクリーンショットではなく、最も大きく鮮明な原本を使います。

紙の図案では、明暗の勾配を作る強い照明を避けます。暗い側を図形の一部と認識する場合があります。点光源下の光沢紙より、柔らかい窓光の白い紙のほうが分離しやすいことが多いです。

2. Shapesを選び、細部を設定する

Adobeの現在のCaptureからAfter Effectsへのチュートリアルは、Captureを開き、Shapesを選び、対象にカメラを向け、スライダーで細部を増減する基本手順を説明しています。

ゆっくり調整し、次の3か所を見ます。

  • 外側のシルエット
  • 文字内の穴や茎の間など、意図した穴
  • 消すべき小さな孤立した印

最初から細部を最大にしないでください。細部が多いほど整理も増えがちです。特徴を残し、背景ノイズが消えたところで止めます。

3. 取り込んで不要な領域を消す

ライブプレビューが安定してから取り込みます。公式工程では、その後Deselectを使い、不要な部分をブラシでなぞれます。

まず明らかなほこりや離れた断片を消します。次に狭い隙間や小さな穴を拡大します。小さな橋状部分が別領域を1つの塗り図形にし、細片を消すことで閉じるべき輪郭が切れる場合があります。

4. 滑らかになった輪郭を確認する

進むとCaptureが滑らかな輪郭を描きます。これは新たな再構成であり、完成の証明ではありません。拡大と最終使用サイズの両方で元と比較します。

次を探します。

  • 角や先端のシルエットの変化
  • 閉じたり小さくなりすぎたりした穴
  • 影や圧縮による波打つ曲線
  • 整理後も残る孤立した島
  • 本来均衡の取れた印の意図しない非対称

特徴が誤っていたら、戻って元画像や細部設定を調整します。後で数十の悪い点を直すより速いことが多いです。

モバイルでのシェイプ作成
ノイズのある魚の写真をきれいな編集可能ベクターパスにし、クラウドライブラリへ保存し、アンカーハンドルで整える概念図
Captureは最初の再構成工程です。編集や書き出しを行うアプリで、さらに形状を確認する必要があります。

5. 正しいCreative Cloudライブラリに保存する

保存前に明確な名前を付け、保存先を選びます。ベクターはあるのに目的のプロジェクトライブラリで見つからない、という受け渡し問題を防げます。

AdobeのCapture FAQによると、Creative Cloud同期で対応アプリとCreative CloudのアセットWebサイトから利用できます。現れない場合は、両アプリのアカウントと選択ライブラリが同じか確認し、同期完了を待ちます。

6. 受け取り側のアプリで確認して書き出す

仕上げに使うアプリで開きます。Illustratorなどのパスエディターで選択し、配置したビットマップのプレビューではなくベクターとして動作するか確認します。

ライブラリへの保存を、そのまま制作に使えるSVGのダウンロードと同じと考えないでください。書き出し方法は受け取りアプリと工程に依存します。書き出したら開き直して確認します。SVGはパスだけでなく埋め込みラスターも含められます。SVG仕様の埋め込みコンテンツの項目が、構造確認の重要性を示します。

InDesignで受け取る場合は、Capture Shapesと配置図案のガイドで、取り込んだシェイプを編集するか別のベクター素材を配置するか選びます。

Adobe Captureはカラーベクターを作れるか

現在のFAQにはカラーシェイプの別工程があり、製品ページも画像を拡大縮小可能なベクター素材にすると説明しています。白黒シルエット専用ツールより多機能です。

ただし色があっても判断は必要です。グラデーションの多い写真より、少数の明確な領域を持つ平面イラストが現実的です。色が有用な編集可能領域になったか、断片の山になったか確認します。後者なら複雑さを減らすか、画像全体の再構成向け工程を使います。

Capture、Illustrator Image Trace、ブラウザーのベクター化を比較する

工程適した用途トレードオフ
Adobe Capture単純な形を素早くモバイルで取り込み、Creative Cloudライブラリへ送る速く持ち運べる一方、スマートフォンではパスの細かな制御が少ない
Illustrator Image Traceパレット、パス、角、ノイズを明示してデスクトップでトレース制御は多いが、設定と整理の判断も増える
専用ブラウザーベクター化ツールAdobe工程に入る前にラスター全体の再構成を比較プレビューとSVG受け渡しは便利だが、アプリ固有の編集機能には代わらない

トレース後の仕事に合わせて選びます。作業台でスタンプの印を撮り、共有ライブラリへ入れるならCaptureが自然です。複雑なトレースを精密に制御するならIllustratorを使います。Adobeの外で画像全体を試すなら、同じ元画像を専用ツールでも比較します。

PerfectVectorの画像からベクターへの変換は、対応ラスターをブラウザーで編集可能なSVG図形に再構成します。ここでは比較方法として有用です。同じ平面的な元画像をプレビューし、シルエット、内部の穴、色分離、必要な整理をCaptureの結果と比較します。修正が少ないほうを残します。

Frescoで作った図案なら、Captureへ移す前にベクターブラシと既存ラスターのトレースを比較します。

Adobe Captureのよくあるトレース問題を直す

小さな点が多すぎる

柔らかく均一な光と単純な背景を使います。対象を消さず、ほこりが消えるまで細部を下げます。後で数百のベクターの島を削除するより、先に紙や元画像を整えるほうがよいです。

細い隙間が閉じる

隙間周辺のコントラストを上げ、ぼけない範囲で近づいて取り込みます。重要な隙間なら、全トレースに微小な変化まで残させるより、受け取りエディターで小さな区間を描き直します。

曲線が揺れる

大きく鮮明な元画像から始め、不要な細部を減らします。影、JPEGの縁取り、不安定な焦点はすべてエッジの根拠になります。意図したシルエットを変えない点だけ単純化します。

デスクトップアプリにシェイプがない

Adobeアカウント、保存先ライブラリ、ネットワーク同期、対象アプリのShape対応を確認します。互換表は素材種類ごとです。あるCapture素材に対応しても、すべてに対応するとは限りません。

書き出したSVGにまだピクセルがある

ベクターエディターで、必要ならマークアップも確認します。SVG内に包んだラスター画像は、依然としてラスターです。拡大縮小できる原本として扱う前に、対象が編集可能なパスで表されているか確認します。

よくある質問

Adobe Captureは画像をベクター化できますか? はい。写真や読み込んだ画像をベクターベースのShape素材にできます。見える境界を再構成するもので、元レイヤー、フォント、隠れた形状は復元しません。

Adobe Captureは直接SVGを書き出しますか? 公式のShape工程は、対応アプリで使うためCreative Cloudライブラリへ保存します。受け取りアプリと版で書き出し方法が異なるため、仕上げるアプリで開いて書き出し、SVGに編集可能なパスがあるか確認します。

どの画像がCaptureに向いていますか? インクの印、ステンシル、葉、単純なアイコン、細部の少ないスケッチなど、平面的で焦点が合い、明確なシルエットを持つ高コントラスト画像が適しています。複雑な写真、影、ぼけ、圧縮ノイズは整理を増やします。

カラーのベクターシェイプを作れますか? はい。現在のFAQにカラーシェイプがあります。グラデーションや細かな階調変化の多い写真より、少数の明確な平面領域を持つ元画像が適しています。

CaptureのシェイプをIllustratorで編集できますか? はい。AdobeはShape対応アプリにIllustratorを挙げています。制作に使う原本にする前に、パス、穴、点数、塗りを確認します。

参考資料

  1. Adobe — Capture製品ページ — 現在のベクター、画像から素材への変換、Creative Cloudライブラリ機能の説明。
  2. Adobe — Adobe Capture FAQ — 現在の素材種類、Shape互換性、同期、カラーシェイプ。
  3. Adobe — After EffectsでSketchとCaptureのシェイプをアニメーション化 — 現在のShapes手順、細部調整、選択解除による整理、平滑化、命名、保存。
  4. W3C — SVGの埋め込みコンテンツ — SVGにもラスターを含められる理由を示す仕様。
  5. PerfectVector — 画像からベクターへ — 現在のブラウザー変換、プレビュー、SVG出力、製品の範囲。

Captureの結果に修正が多すぎるなら、同じ画像をブラウザーのベクター化ツールで比較し、両方を確認して、よりきれいな編集可能パスで作業を続けてください。

ブログのその他の記事

画像を
きれいで編集可能なベクターパスに変換