PerfectVector
著者: Irene Kim1 分で読める

水彩画をベクターに変換し、雰囲気を残す方法

水彩画をラスターのまま使う場合、ベクター化が役立つ場合、柔らかい色のにじみが編集可能な色の形へ変わる仕組みを解説します。

目次

水彩画はベクターに変換できますが、きれいなトレースSVGは忠実な複製ではなく、絵の解釈になります。SVG自体はグラデーション、不透明度、マスク、ラスターパターンに対応します。ただし自動の形状トレースは、顔料のにじみや紙の粒を1対1で残さず、ベクターの描画と形状から画像を再構築します。SVGの描画仕様にこれらの基本要素が説明されています。

この変化が役立つ場合もあります。きれいなシルエット、編集可能な色領域、カッターなどのパスを使う道具用の画像が必要ならベクター化します。水彩の質感が作品の中心なら高解像度ラスターを残します。両方必要なら、構造にベクター形状、質感に元のスキャンを使う混合方式にします。

トレース前に出力を選ぶ
  • アートプリント、忠実な複製、紙や顔料の質感を残す用途はラスターを使います。
  • ロゴ、簡略化したイラスト、切断形状、色変更、拡大可能なきれいな輪郭が必要なレイアウトにはベクター化します。
  • きれいなベクターの輪郭内に水彩の質感を重ねたいなら、混合方式を使います。
  • 元スキャンを保存します。トレースは新しい制作用ファイルで、絵の原本の代わりではありません。

ラスター、ベクター、混合方式のどれか

使用先が形式を決めます。好きな部分が失われるなら、「拡大可能」は必ずしも良いことではありません。

必要なもの適した元形式理由
忠実なアートプリントや作品集の画像高解像度PNG・TIFF紙の質感、透明な重ね塗り、柔らかい色の変化を保つ
色を変えるモチーフや簡略化したブランドマークSVG明確な輪郭の選択可能な色領域にする
Cricut、レーザーなどパスを使う工程SVG。通常は先に簡略化機械に必要なのはパスで、絵の質感ではない
絵画らしい大きなレイアウト混合方式パスでシルエットを制御し、ラスターでにじみを残す
昇華転写の印刷だけ高解像度PNGラスターは実用的な制作方法。解像度とテンプレート要件に従う

昇華転写なら、トレース前に昇華転写用SVGとPNGを読みます。きれいなスキャンではなく絵の写真なら、写真からSVGへのガイドの連続階調の制約も当てはまります。

ベクター化で変わるもの

水彩の輪郭は不規則な顔料と部分的な透明度でできています。ベクターの輪郭は塗りのある数学的なパスです。トレースは、領域がどこで終わり、次がどこから始まるか決めます。

通常、3つの変化が見えます。

  • 柔らかい変化が隣接する色の形に分かれます。形を増やせば、より多くの階調を残せる場合がありますが、複雑にもなります。
  • 紙の粒が消えるか、小さな領域としてトレースされます。編集や切断ではすべての点を残しても、通常は役立ちません。
  • ぼかした輪郭が明確な境界になります。きれいに拡大できても、元よりグラフィック的に見えます。

この記事用に生成したオリジナルの1254×1254の水彩風の花で試しました。PNGをPerfectVectorにアップロードし、実際の変換が完了した後、サインアウト状態の比較画面を撮りました。プレビューは95色と表示しました。SVGのダウンロードはロックされたままなので、この画像で示すのは見た目の比較だけです。パス数は確認・報告していません。

水彩風のラスター原画像と実際のベクタープレビュー
PerfectVectorの比較画面。サンゴ色の水彩風の花の原画像と、本物のベクタープレビューが並び、花の形を保ちながら紙の質感と柔らかい色の変化の一部が簡略化されています
テスト画像を実際にPerfectVectorで変換した結果です。サインアウトのプレビューには透かしがあり、95色と表示されています。見た目の変化を示すもので、パスの検査ではありません。

花、配色、絵画らしい雰囲気の多くは残っています。右側は葉と背景の周りが少し整理されていますが、花は水彩らしく見せるため多くの色領域を必要とします。編集可能なイラストとして妥当ですが、紙と顔料が目的なら元画像の代わりにはなりません。

実用的な水彩ベクター化の手順

1. きれいなラスター原本を取り込む

可能ならスキャンします。撮影なら均一な光を使い、カメラを紙と平行にして、スマートフォンの影を避けます。小さいウェブ用コピーを作る前に、可逆形式のPNGやTIFFで書き出します。資料のデジタル化指針も、派生ファイルの前に高品質の原本を保管することを重視します。

紙の質感をすべて消す前に、未変更の原本を保存し、コピーで作業します。

2. SVGで残すものを決める

目的を1文にします。「ビニールデカール用の花の輪郭」なら強く簡略化します。「包装のモチーフの色を編集したい」なら多くの領域を残せます。「原画と同じギャラリー用プリント」なら、ここで止めてラスターを使います。

この判断でトリミングも決まります。周囲の装飾的なにじみは印刷では重要でも、切断ファイルでは不要な形になる場合があります。

3. トレース用コピーを準備する

余分な紙を切り、照明のむらを補正し、作品でない跡を消します。被写体と背景が分かれる程度だけコントラストを上げます。強すぎると、トレース前に淡いにじみが失われます。

透明度が必要なら、紙の背景と絵を見た目で区別できるようにします。削除後に最も淡い花びらと明部を確認します。しきい値が強すぎると最初に消える部分です。

4. 変換する

SVGを原画の代わりにせず、形を主体とする版を試したい場合にPerfectVectorが役立ちます。準備したコピーをアップロードし、通常サイズと拡大でプレビューを評価します。安定した外形、つながった茎、判別できる抜きの形、何百もの断片を探さずに選べる色領域を確認します。

カッター用なら印刷より大幅に簡略化します。機械は透明なにじみを再現できず、小さな孤立形状は剥がす素材になります。

5. ベクターエディターで確認する

Illustrator、Figma、Inkscapeなどで結果を開き、1枚の埋め込みビットマップではなくパスか確認します。いくつかの領域を選んで色を変えます。輪郭を拡大し、ノード数が形の複雑さに合っているか見ます。

簡単な葉の周囲に点が密集しているなら、整理するか、もっと簡単な原稿を試します。ノード過多は、プレビューが良くても後の編集を難しくします。

6. 両方の原本を残す

未変更のラスターと編集したSVGを別々の原本として保存します。忠実な複製にはラスター、形が主体の用途にはSVGを使います。違う問題を解決するファイルなので、一方で他方を置き換える必要はありません。

混合方式が適する場合

ベクターパスをマスクやクリッピング形状に使い、その中に元の水彩スキャンを残します。レイアウトや拡大縮小用の外側の輪郭はきれいになりますが、内部にはピクセルがあります。

包装、誌面レイアウト、デジタルの構成など、絵の質感が重要でもモチーフの境界を整えたい場合に有効です。完全なベクターではなく、カッターは質感をたどれません。納品時に中身を明示すれば問題ありません。絵画的な場面と再利用するモチーフを組み合わせる絵本なら、子どもの本のイラストでラスターとベクターを選ぶ方法をご覧ください。

簡単な手順は、シルエットだけベクター化し、下に高解像度スキャンを置き、パスをクリッピングマスクにすることです。リンクまたは埋め込みラスターは、最終印刷サイズに必要な解像度を保ちます。

結婚式の紙製品では、すべての柔らかいにじみを保つより編集可能な形が重要な場合だけ、選んだモチーフを複数のレイアウトに再利用します。

手動の選択肢:IllustratorのImage Trace(画像トレース)

IllustratorのImage Traceではどれだけの細部を形状にするか、より細かく操作できます。公式文書は限定色からFull Toneまでのモードを説明しています。Full ToneではColorスライダーを上げると小さな色領域から多くのパスを作り、下げると少数の大きな塗り領域を作ります。見た目を近づけるほど管理する形状が増えることが、水彩の中心的なトレードオフです。現在の画像トレースパネルのオプションで調整項目を確認します。

Illustratorを使っていて、色数、パス、角、ノイズを手動調整したいならImage Traceを使います。各設定を調整せず最初の結果が欲しいなら専用ツールが手早い方法です。どちらも、最も質感を残すプレビューではなく、必要なファイルで評価します。

ベクター化を避ける場合

次の場合はラスターを使います。

  • 紙の表面と顔料の粒が作品の一部である。
  • 透明な重ね塗りや柔らかいにじみを忠実に複製する必要がある。
  • アートプリント、作品集、保存記録が目的である。
  • SVGが細かすぎて快適に編集できない。
  • 「ベクターなら常にプロらしい仕上がりになる」という思い込みだけが理由である。

大きく整えたラスターは美しく印刷できます。パスが制作上の利点を生むときにSVGを使います。

よくある質問

水彩をSVGにできますか? はい。スキャンをSVGのパスへトレースできますが、形による解釈です。柔らかいにじみ、紙の粒、透明度が、不透明または部分的に透明な色領域に変わるため、忠実な複製ではありません。

質感を失わず水彩をベクター化する方法は? きれいで簡単なSVGにすべての質感を保つことはできません。高解像度ラスター原本を残し、複雑なトレースを受け入れるか、ベクターの輪郭内にスキャンを切り抜く混合方式にします。絵の表面は残りますが、ラスターのピクセルも含まれます。

水彩にはPNGとSVGのどちらを使いますか? 忠実な表示や印刷にはPNGです。拡大可能なきれいな輪郭、編集可能な色領域、制作用パスが必要ならSVGです。印刷、切断、デジタルレイアウトに使うなら両方を残します。

水彩に合う画像トレース設定は? すべての絵に合う設定はありません。カラーモードで、必要な簡略化に合う配色を選び、管理できる範囲だけ細部を増やします。Full ToneでColorを上げると小さな領域からパスが増え、編集や切断には複雑すぎる場合があります。

参考資料

  1. Adobe Illustrator:画像トレースパネルのオプション — 配色、グラデーション、パス、ノイズ、透明度、複雑さの調整を説明しています。
  2. Adobe Illustrator:画像をベクターに変換 — ラスターを編集可能なパスにする方法を説明しています。
  3. W3C:SVGの描画 — 塗り、ストローク、グラデーション、パターン、不透明度を説明しています。
  4. 米国国立公文書館:デジタル化した写真プリントの形式 — TIFFやPNGなど可逆原本形式を示しています。
  5. Printful Help:150と300 DPIの違い — 現在の昇華転写の解像度と使用先固有の注意を説明しています。

形を主体とする版が用途に合うなら、準備した画像をPerfectVectorにかけ、SVGを採用する前にシルエット、淡いにじみ、色領域をラスター原本と比べます。

ブログのその他の記事

ロゴやアートワークを
きれいで編集可能なSVGに変換