スライダーで決まること

輪郭を描く前に、トレースは画像に使う少数の平坦な色を選びます。見るのは図形の内側の塗りつぶされた部分だけで、柔らかい輪郭は見ません。そのピクセルを色ごとにまとめ、実質的に同じ色は統合し、細いアウトラインやアクセントの点のように、小さくてもはっきり違う色はスライダーの範囲内で加え直します。スライダーは使える色の最大数です。「色数(上限)」が8なら最大8色という意味で、5色のロゴなら5色で返ってきます。

次に、すべてのピクセルがその色のどれかになります。輪郭上のピクセルは、その輪郭の両側の2色のどちらかに決まるので、黒い文字と白い背景の間の中間色が、独立したグレーの色になることはありません。同じ色がつながった領域は、その色を塗りにした<path>になります。SVGはオブジェクトごとにグループ化され(背景が最初)、各オブジェクトの中では、どれがどれを囲んでいるかに従って図形が入れ子になり、図形ごとに1つのパスになります。

つまりスライダーは、実際には「結果に使える塗りの種類の数」です。くっきりさや細かさを調整するスライダーではありません。

プリセットの初期値

  • 標準:8
  • Cricut/カッティング:4(「背景を削除」もオンになります)
  • 線画/ステンシル:常に2色(黒いインクと白い紙)。このプリセットを選んでいる間、スライダーは使えません
  • 精細なアートワーク:16

「標準」「Cricut/カッティング」「精細なアートワーク」では、プリセットを選んだ後でスライダーを動かせます。範囲は2〜24です。

うまくいく手順

  1. 色を挙げる。 画像を見て、はっきり区別できる塗りを数えます。アンチエイリアスの輪郭やJPEGのノイズは無視してください。それは残したい色ではありません。
  2. 背景が不透明で、削除しないなら1色足す。
  3. その数に設定して変換する。 プレビューは無料です。
  4. 結果のパレットの帯を見る。 挙げた2つの塗りが1つにまとまっていたら1つ上げます。挙げていない塗りが、ほかの色のそっくりさん(わずかに違う2つの赤など)として出ていたら1つ下げます。
  5. パスの数ではなくパレットを見る。 結果はオブジェクトごとにグループ化され、図形ごとに1つのパスになるので、たいていパスの数は色数より多くなります。1色につきちょうど1つのパスにしたい場合は、設定でレイヤーを色ごとにしてください。

極端な設定にするとどうなる?

少なすぎる場合。 隣り合う塗りがまとまります。濃い青と黒が1つの黒い図形になり、薄いグレーのハイライトは白に消えます。写真を2〜4色にするとポスターのような見た目になります。ステンシルならまさにそれが欲しいこともあります。

多すぎる場合。 フラットなアートワークなら、たいてい何も変わりません。パレットは画像にある色数で止まるので、8でも16でも同じ結果になります。ノイズの多いJPEGでは、大きな塗りがごく近い2つの色合いに分かれることがまれにあります。陰影のあるアートワークや写真では、色を1つ増やすたびに色の帯が1本増えるので、ファイルは大きくなり、帯は細くなります。

フラットなアイコン6個を2・4・8・16色でトレースしたもの。2色ではコーラルが消えて紙がピンクに。4・8・16色では同じ結果

青、ネイビー、コーラル、白い紙の4色でできたガイド用アイコン6個を、2・4・8・16色でトレースしたもの(左から右、上から下)。2色ではコーラルがまとめられて紙が色づき、8色と16色ではパレットが画像にある4色で止まるため、3つとも同じ29個のパスになります。

特別なケース

  • 透明な背景の2色のロゴ: 2色。透明なピクセルは色として数えません。
  • 陰影のあるイラスト: 「精細なアートワーク」の16色から始めるのが妥当ですが、グラデーションだった部分には色の帯がはっきり出ます。帯の出方は許容範囲でも色合いが違う場合は、あとでSVGエディターで帯の色を変えてください。
  • スクリーンショットやUIのモックアップ: もともとフラットなので、8〜12色でうまくいくことが多いです。文字は編集できるテキストではなく、図形としてトレースされます。
  • 写真: 写真がポスターのようになる理由のガイドをご覧ください。色数で変わるのは帯の本数で、帯ができるかどうかではありません。

穴と重なり

リングの内側や「O」の文字の内側のような穴は、SVGのどちらの塗りのルールでも開いたままです。ファイルの塗りのルールを無視するソフトでも同じです。穴を「見せる」ために色数を上げる必要はありません。

色は面積の大きい順に重ねられます。小さな塗りが大きな塗りの中に完全に収まっている場合(青いバッジの上の白い星など)、大きいほうの色は下にべた塗りで描かれ、小さな塗りはその上に乗ります。さらに、どの色も上に描かれる色の下まで少しはみ出しているので、継ぎ目から背景がのぞくことはありません。そのため、白地の上の2色のバッジは、3色でトレースしても正しく見えます。