PerfectVector
著者: Irene Kim2 分で読める

InkscapeのPattern Along Path:モチーフで縁飾りを作る

InkscapeのPattern Along Pathで葉のモチーフを繰り返します。コピー設定、変形、編集可能なマスターの保存、最終SVGの確認方法を解説します。

目次

InkscapeのライブパスエフェクトPattern Along Pathは、小さなパスを繰り返して縁飾りを作ります。モチーフをコピーし、沿わせたい経路へエフェクトを適用して、エフェクト内にモチーフを貼り付け、繰り返しのコピーモードを選びます。

操作前に知っておくべき制約があります。このエフェクトはモチーフを曲げます。Inkscape初心者向けガイドでは、繰り返す部分は1本のパスに属し、パスの方向に沿うよう変形すると説明しています。葉の装飾枠には適していますが、比率を正確に保つ必要があるロゴには向いていません。

これは、単純な葉のモチーフを対象とした、ドキュメントに基づく手順です。図は概念図であり、Inkscapeのスクリーンショットやテスト済みの書き出し結果ではありません。

適切な繰り返し方法を選ぶ

Inkscapeの複数の機能に「パターン」という言葉が使われていますが、役割は異なります。

目的最初に使う機能
流れるような縁に沿って曲がる葉Pattern Along Pathライブパスエフェクト
塗り領域全体で繰り返すタイルパターンの塗り
パスの頂点に置く、形の変わらないシンボルカスタムマーカー
曲げずに経路上へ配置するコピーScatter拡張を検討します

パスから生成する機能のリファレンスでは、Scatterと、似た名前のPattern Along Path拡張を区別しています。Scatterは変形せずにコピーを配置します。拡張機能とライブパスエフェクトは別の手順です。この記事では、モチーフと経路を編集できるPath > Path Effectsを使います。

面全体のテクスチャが必要なら、SVGのパターン塗りを使います。選んだ頂点にシンボルを付ける場合は、カスタムSVGマーカーを参照してください。マーカーが任意の曲線に沿って、自動で等間隔のコピーを並べるわけではありません。

葉のモチーフを曲線の縁に沿って繰り返した概念図
概念図:小さなモチーフが形を提供し、別のガイドが経路を提供します。正確な間隔と変形は、エフェクトの設定と形状によって変わります。

単純な葉のパスを1つ準備する

完成した縁飾りのサイズで、はっきり読める単色の葉の輪郭から始めます。細かな葉脈がある枝より、短く幅広い葉のほうが確認しやすくなります。繰り返した結果と元の形を比較できるよう、作業領域の横に予備のコピーを残してください。

この手順では、モチーフを1本のパスにします。図形やテキストは、コピー前にPath > Object to Pathで変換します。図形をパスに変換するガイドでは、図形ツールのオブジェクトと編集可能なパスの違いを説明しています。色付きの部品をまとめたグループは、1本のパスとは異なります。Pattern Along Pathのマニュアルは、貼り付けるパターンを1本のパスと指定し、結果のオブジェクトには骨格パスのスタイルが適用されると説明しています。

SVGという拡張子だけでは判断できません。読み込んだSVGに、グループ、パス、埋め込みビットマップが含まれる場合があります。Node tool(ノードツール)で葉の輪郭そのものを編集できることを確認してください。SVGの編集ガイドでは、パス形状の確認と変更を説明しています。不要な小さな点は繰り返す前に取り除きます。そうしないと、各コピーに同じ不要な細部が現れます。

モチーフが自分のスキャン、PNG、JPGしかない場合は、PerfectVectorで出発点となるSVGを作れます。復元した輪郭を確認し、繰り返したいパスを取り出します。ベクター化は編集可能な形状を提供しますが、縁の配置や曲げ方はInkscapeで設定します。オフラインでトレースする場合は、InkscapeのTrace Bitmapガイドを参照してください。

使える葉のパスがすでにある場合は、そのパスから始めます。

緩やかな曲線へエフェクトを適用する

最初の縁飾りには、開いた浅い曲線を使います。両端が見えるので確認でき、初めから急な角や閉じた継ぎ目を扱わずに済みます。モチーフが期待どおりに動作したら、円形や複雑な経路に進めます。

  1. 葉をコピーします。 パスを選び、Edit > Copyを使います。
  2. 経路を選びます。 縁飾りを沿わせたい1本のパスを描くか選びます。
  3. Path > Path Effectsを開きます。 Pattern Along Pathを探して追加します。現在のガイドではダイアログの検索欄で選ぶ方法を説明しています。古いチュートリアルにはAddボタンが出てきます。
  4. パターンをエフェクトに貼り付けます。 エフェクトのパターン元の貼り付け操作を使います。通常のキャンバスへの貼り付けでは、ページに別のオブジェクトができるだけです。
  5. Repeatedを選びます。 まずこのコピーモードを使い、経路に対するモチーフのサイズを判断します。
  6. 縁飾りのスタイルを設定します。 エフェクトを適用した経路に、葉の繰り返しに使いたい塗りを設定します。輪郭形の縁飾りなら、見える塗りとストロークなしから始めます。

現在のライブパスエフェクトガイドでは、ダイアログと編集可能な挙動を説明しています。より詳しいPattern Along Pathリファレンスでは、パターンのコピー、骨格の選択、エフェクト専用の操作による貼り付けを説明しています。ボタンの位置はバージョンによって異なるため、スクリーンショットの位置ではなくツールチップで操作を見分けてください。

貼り付けとリンクは別の選択肢です。 貼り付けはパターンのデータをエフェクトに渡します。リンクは既存のオブジェクトを制御パスとして使うため、リンクした元データを編集するとエフェクトを更新できます。最初の縁飾りでは、貼り付けのほうが関係を管理しやすくなります。キャンバスに残した予備の葉を編集しても、貼り付けたパターンは変わりません。エフェクトのパターン編集操作を使うか、修正したモチーフを貼り付けます。

間隔より先に繰り返しを設定する

コピーモードは、Inkscapeに何をさせるかを決めます。

Pattern copiesの設定想定される結果
Single経路上に1つのモチーフ
Single, stretched経路全体へ引き伸ばした1つのモチーフ
Repeated経路上に複数のコピー
Repeated, stretched経路に収まるよう引き伸ばした複数のコピー

1枚の葉が長いリボンになる場合は、まずこのメニューを確認します。引き伸ばすモードから切り替えると、そのフィッティングは解除されますが、Pattern Along Pathが変形しないスタンプ配置になるわけではありません。

次にSpacingを調整します。欄の数値だけでなく、葉の先端の間に見える隙間を判断してください。マニュアルでは、パターンの境界ボックスで配置すると説明しています。そのため、配置規則が一定でも、非対称な輪郭では隙間が不均一に見える場合があります。

Normal offsetはパターンを経路に垂直な方向に動かし、Tangential offsetは経路に沿って動かします。両方をゼロから始め、一度に1つの設定を変えて、縁全体を確認します。元のモチーフを縦向きに描いた場合は、パターンの方向設定を確認してください。既定では横向きのモチーフを想定しています。

閉じた縁では、接合点を別途確認します。円の大部分で葉がきれいに並んでいても、最初と最後のコピーがきれいにつながるとは限りません。継ぎ目がデザインに合うまで、モチーフのサイズ、間隔、経路の形状を変えます。1つの間隔値を、どのサイズでも使える決まりとして扱わないでください。

実際に見える問題を直す

症状次に確認すること
貼り付けるとキャンバスに別の葉ができるエフェクトのパターン元の貼り付け操作を使います
適切なモチーフが現れない1本のパスをコピーし直し、目的の経路を選んで塗りとストロークを確認します
1つの引き伸ばされた形が経路全体を満たすPattern copiesを繰り返すモードへ変えます
曲がる部分で葉が詰まる曲がりを緩やかにするか、モチーフを小さくします
元の葉は緑なのに縁が別のスタイルになるエフェクトを適用した経路のスタイルを設定します。貼り付けた形状は元の別々の色を保持しません
予備の葉を編集しても変化しないエフェクト内で貼り付けたパターンを編集するか、意図してリンク元を使います

曲がり方がおかしいという理由だけで、ノードを増やし続けないでください。まず、変形自体を許容できるか判断します。小さな葉ならデザインとして曲がってもよい場合がありますが、文字、円形バッジ、形を維持したいエンブレムには別の繰り返し方法が必要かもしれません。

1本のパスになるため、ライブの縁飾りでは葉ごとの独立した塗り色も設定できません。交互の色が必要なら、間隔に時間をかける前に、別の構成要件として考えてください。Pattern Along Path拡張はグループ化した入力に対応しますが、専用の操作と変形の挙動があります。手順を切り替える場合は、結果を改めて確認する必要があります。

納品用コピーを作る前にマスターを残す

編集可能な版は、エフェクトを残したInkscape SVGとして保存します。保存ガイドでは、Inkscapeの編集データを保持するこの形式と、共有用のPlain SVGを区別しています。

通常のパスが必要な納品ファイルでは、別のコピーを作り、対象オブジェクトにPath > Object to Pathを使います。ライブエフェクトのリファレンスはこの変換を説明しています。また、Inkscapeは元の形状を編集用に保持しながら、描画結果を通常のSVGパスとして保存すると説明しています。変換はそのコピーを確定する方法であり、他のすべてのアプリで正しく読み込める証明ではありません。

納品ファイルを、実際に使うビューアーやエディターで開き直します。最終サイズで、特に最小の隙間、最も急な曲がり、継ぎ目、塗り、ストロークを確認します。他の人が編集可能な葉のインスタンスを必要とするなら、実際のオブジェクト構造を確認してください。繰り返して見えるからといって、葉ごとに独立して選択できるオブジェクトがあるとは限りません。

納品用コピーが正しく見えても、ライブのマスターは保持します。完成した輪郭から縁飾りを作り直すことなく、後で経路や間隔を変更する実用的な方法です。

ラスターしかないモチーフでは、PerfectVectorの画像をベクターに変換する手順から始め、復元した葉を元画像と比較し、使える1本のパスを取り出してからエフェクトを適用します。曲がり、隙間、最終的な納品ファイルを確認してから、縁飾りを承認してください。

よくある質問

Pattern Along Pathで、変形せずにオブジェクトを繰り返せますか? ライブパスエフェクトは、経路に沿うようモチーフを変形します。Repeatedモードでも変形しないという意味ではありません。曲線上に形を変えずコピーするならScatter、頂点にコピーするならマーカーを検討します。

モチーフの色が失われたのはなぜですか? 貼り付けたパターンはパス形状を提供し、ライブの結果には対象経路のスタイルが適用されます。繰り返す部分は1本のパスに属するため、コピーごとの独立した塗り色は保持されません。

PNGをパターン元に使えますか? このライブエフェクトの手順にはパスが必要です。まずモチーフをトレースするか描き直し、ベクターの輪郭を確認してパスをコピーします。SVG文書にビットマップを読み込んでも、ピクセルはパス形状に変換されません。

すぐにエフェクトをパスへ変換するべきですか? デザインを調整する間は、ライブエフェクトを持つInkscape SVGのマスターを残します。通常のパスが必要なときに別の納品用コピーを変換し、対象アプリで開き直して確認します。

参考資料

  1. Inkscape初心者向けガイド:ライブパスエフェクト — 現在のダイアログ操作と、Pattern Along Pathの単一パスで変形する挙動。
  2. Inkscape初心者向けガイド:幾何学的な図形のノード編集 — 図形ツールのオブジェクトを編集可能なパスへ変換する方法。
  3. Inkscape初心者向けガイド:作業の保存 — Inkscape SVGの編集データとPlain SVGでの共有。

ブログのその他の記事

編集しやすい
よりきれいなSVGから始めましょう