Illustratorで中国飾り結びを描く。

01. SVGを編集可能な文書として開く。

1. 練習用ファイルを保存し、 ファイル → 開く で次を選びます： illustrator-knot-starter.svg.
2. 選ぶメニュー： ファイル → 別名で保存 。Illustratorの作業用 .ai コピーを保存し、元の練習用ファイルを残します。
3. 開くメニュー： ウィンドウ → レイヤー。内容を展開して次のグループを選べるようにします： Hanging-loop（吊り輪）, Connector（つなぎ） と Knot-body（結び本体）。本体の中には horizontal-cord（横方向のひも） と vertical-cord（縦方向のひも）.
4. 使う道具： 選択ツール（V） でグループ全体を移動します。 ダイレクト選択ツール（A） では中のパスやアンカーを選べます。グループをダブルクリックすると編集モードに入り、Escapeキーで終了します。

横・縦の名称は45°回転する前の格子に基づきます。画面では2方向の斜線に見えます。元からベクトルの線なので画像をトレースする必要はありません。グループを分けるなら選択して右クリックし、 グループ解除を選びます。飾り全体を動かすときは本体のグループを保ちます。

02. 格子を動かさず外側の輪を整える。

練習用は両方向に等間隔の4本の線があり、曲線の折り返しでつながって見えます。元の間隔は 64 px、ひもの線幅は 18 pxです。まず外側の輪を一つ変えてみます。

1. ダイレクト選択で外側の曲線をクリックし、端のアンカーを選んで方向ハンドルを表示します。
2. ハンドルを少し伸ばすと丸い輪に、短くすると小さな輪になります。つなぎ目を滑らかに保つため、端のアンカーは元の直線上に残します。
3. 輪が尖ったら元に戻します。少しの調整で十分なことが多く、内側の交差は動かしません。
4. 全体を配置するときは次を選びます： Knot-body（結び本体）。開くメニューは ウィンドウ → 整列 で、 アートボードに整列、次に 水平方向中央に整列を選びます。吊り輪とつなぎのグループも同じ方法で中央に配置します。個々のひもを整列すると間隔が崩れるため避けてください。

折り返しを自分で描くなら ペンツール（P） を塗りなしで使います。曲線の両端で隣の直線に沿ってドラッグしてハンドルを作ります。U字の折り返しは滑らかな2つのアンカーで描けます。元の線と比べてから置き換えます。

03. 各交差で下になるひもを切る。

練習用では一方向のひも全体が上です。織り目を表すには交差ごとに上下を入れ替えます。下のひもを実際に切り、色付き背景でも隙間が見えるようにします。

1. 回転前の図を左から右に見て、最上段の赤い列の最初の交差を選びます。赤を 上 、金を下にします。
2. 金のパスをダイレクト選択し、 はさみツール（C） で交差の両側を切ります。位置は 交差の中心からパスに沿って約22 pxです。中央に44 pxの区間ができます。
3. ダイレクト選択に戻り、中央の短い区間だけを選んで削除します。選択を外して確認し、赤は連続、金は2つの端に分かれた状態にします。
4. 同じ赤い列の次の交差では逆にし、金を連続させて赤を切ります。 上・下・上・下 の順で列を進めます。
5. 次の列は逆の順から始め、全体の 16 交差が交互になるまで繰り返します。各交差では一方向だけが連続します。

設定を保つ： 丸型線端 を線パネルで選びます。18 pxの線では端がアンカーから9 px延び、22 pxの切断位置なら上のひもの横に約4 px空きます。拡大して両側を確認します。正確に切るなら交差中心を通る44 pxの参考線を下のパスに平行に置き、切断後に消します。

下のひもを背景色の四角形で隠さないでください。透明PNGや別背景のSVGで塗りつぶしが見えてしまいます。交互の順序は完成版SVGを横に開いて比べられます。

04. ひもの色と線幅を変える。

1. 次の中のパスを選びます： horizontal-cord（横方向のひも）。次に 線 の色ボックスをダブルクリックしてカラーピッカーを開きます。例の色は #B53B30.
2. 同様に次を設定： vertical-cord（縦方向のひも） 色は #C78E35。最終的に同色にする場合も、交差の確認中は違う色が便利です。
3. 開くメニュー： ウィンドウ → 線。本体のパスを次の 18 px 線幅にし、 丸型線端 と ラウンド結合を使います。塗りは「なし」のままです。
4. 試す太さ： 12 px で軽い印象を試し、使うサイズで比較します。太くするなら切れ目も広げ、下の端が上のひもに触れないようにします。

吊り輪とつなぎは少し細くし、例では12 pxです。作業用ファイルでは線を編集可能なまま残せます。このレッスンではアウトライン化は不要で、行うと線幅の変更方法も変わります。

05. ビーズ、巻き止め、房を描く。

練習用ではつなぎの下に房の空間があります。追加する物は別のグループにして、本体を動かさず仕上げ部分を移動できるようにします。

1. 使う道具： 楕円形ツール（L） で30 × 30 pxの円を描きます。金で塗り、濃い金の細い線を付け、つなぎの下端に中央を合わせます。
2. ビーズの下から巻き止めまで短い赤線を描きます。例のビーズ中心は x 300, y 580、下端はy 595、線の終点はy 610です。
3. 巻き止め用の角丸長方形を描きます： 74 × 27 px、中心x 300、上端y 610。塗りは金、線は濃い金2 px、角丸の半径は約9 pxにします。
4. ペンツールで巻き止めのすぐ下、y 631から房の開いたパスを1本描きます。塗りなし、 7 pxの赤線、丸型線端にし、下で少し外へ曲げます。
5. 房のパスを複製し、横に 9本のパス を並べます。上のアンカーは約9 px間隔、同じ高さにそろえ、下端は緩い曲線になるよう変えます。中央の端はy 802付近、外側はy 789付近です。
6. 巻き止めを房の上へ出すには オブジェクト → 重ね順 → 最前面へ。ビーズ、短いつなぎ、巻き止め、房を選び、 オブジェクト → グループでまとめます。グループ名を Tassel（房） にしてレイヤーに表示します。
7. 房のグループ全体を選び、整列で アートボードに整列 → 水平方向中央に整列を選びます。上下に動かし、ビーズをつなぎに接続します。

使うパネル： ウィンドウ → 変形 で位置とサイズを正確に入力できます。付属600 × 900 px SVGの原点はアートボード左上です。中心や角の座標を入力する前に、変形パネルの基準点を確認してください。

06. 作業用ファイルを保存し、両形式を書き出す。

まず.ai文書を保存します。吊り輪と房の端の周囲に余白を残し、 表示 → 透明グリッドを表示 で背景の透明部分と交差の隙間を確認します。

SVGではパスを保ち、PNGはピクセル画像になります。透明PNGは完成カードに載せやすく、SVGは各部分を選んで編集し続けられます。