用 Illustrator 畫中國結。

01. 將 SVG 開啟為可編輯文件。

1. 下載起始檔，選擇 File → Open（檔案 → 開啟） ，然後選取 illustrator-knot-starter.svg.
2. 選擇 File → Save As（檔案 → 另存新檔） ，儲存為 Illustrator .ai 工作副本，以保留原始起始檔。
3. 開啟 Window → Layers（視窗 → 圖層），展開作品，直到能選取以下群組： Hanging-loop, Connector 與 Knot-body。主體內有 horizontal-cord 與 vertical-cord.
4. 使用 Selection tool (V)（選取工具） 移動整個群組；使用 Direct Selection tool (A)（直接選取工具） 選取群組內的單一路徑或錨點。連按兩下群組可進入隔離模式，按 Escape 離開。

水平與垂直名稱描述的是旋轉 45° 前的格子，在畫布上會呈現兩個對角方向。起始檔由向量描邊組成，無須影像描圖。若需拆開群組，選取後按右鍵並選擇 Ungroup（解散群組）；移動整個掛飾時，仍保持主體為群組。

02. 調整外圈曲線，保持格子位置。

起始檔在每個方向各有四條等距線，以成對回彎曲線連接外觀。原始間距為 64 像素，繩線寬為 18 像素。先試著改一個外圈。

1. 以直接選取工具點選結體外側的回彎曲線，再點其端點錨點，顯示方向控制把手。
2. 把手向外拉一些會讓圈更圓，縮短則讓圈更緊。端點錨點保持在原直線上，接合處才會平順。
3. 若圈變尖，復原這次調整。通常微調把手就夠，內部交叉點應維持原位。
4. 要定位整幅繪圖，選取 Knot-body，開啟 Window → Align（視窗 → 對齊） 並選擇 Align to Artboard（對齊工作區域），接著選擇 Horizontal Align Center（水平居中對齊）。掛圈與連接段群組也用同樣方法置中。不要逐一對齊繩線小段，否則會破壞格子間距。

自行重畫回彎時，使用 Pen tool (P)（鋼筆工具） 並將填色設為無。在曲線兩端，沿相鄰直線方向按住拖曳把手。兩個平滑錨點就能畫出 U 形回彎；替換原路徑前先與起始檔比較。

03. 在每個交叉處切開下方繩線。

起始檔中，一整個方向的繩線都壓在另一方向上方。交織效果需要相鄰交叉處交換上下位置。請在下方繩線做出真正空隙，才能在有色背景上同樣成立。

1. 從未旋轉圖中最上方紅色橫列的左邊起，選第一個交叉處，讓紅線 從上方越過 金線。
2. 以直接選取工具選金色路徑，切換到 Scissors tool (C)（剪刀工具） ，在交叉處兩側的金色路徑上點擊，位置各距 交叉中心沿路徑約 22 像素，形成 44 像素長的中間小段。
3. 切回直接選取工具，只選中間小段並刪除。點空白處檢查：紅線應連續，金線則留下分開的兩個端點。
4. 同一紅色橫列的下一個交叉處反過來，保留金線連續，切開紅線。沿橫列繼續 上、下、上、下 交替。
5. 下一列以相反順序開始，直到全部 16 個交叉處都交替排列。每個交叉處恰好只有一個方向保持連續。

在描邊面板保持 Round Cap（圓端點） 。18 像素描邊的圓端點各超出錨點 9 像素；切點離中心 22 像素，可讓上方繩兩側各留約 4 像素空隙。放大檢查兩邊。若需精準定位，可暫畫一條以交叉點為中心、平行下方繩路的 44 像素參考線，切完後移除。

不要用紙色矩形蓋住下方繩線，否則匯出透明 PNG 或在其他背景使用 SVG 時會露出色塊。需要比對上下順序時，可把完成 SVG 與工作檔並排開啟。

04. 改變繩色與描邊寬度。

1. 選取以下群組內的路徑： horizontal-cord。啟用 Stroke（描邊） 色塊，再連按兩下開啟檢色器。示例使用 #B53B30.
2. 另一組也重複操作： vertical-cord 使用 #C78E35。檢查交叉處時，先用對比色，即使最後打算將兩方向設為同色也一樣。
3. 開啟 Window → Stroke（視窗 → 描邊）。將主體路徑設為 18 像素 線寬、 Round Cap（圓端點） 與 Round Join（圓角）。Fill（填色）保持 None（無）。
4. 可以試試 12 像素 讓繪圖更輕巧，再按預計使用的尺寸比較。若加粗描邊，也要加大切開空隙，避免下方端點碰到上方繩線。

掛圈和連接段可以稍細，示例採 12 像素。工作檔可保留可編輯描邊；本課無須把描邊轉外框，轉換後反而會改變線寬的編輯方式。

05. 繪製珠子、束頸與穗絲。

起始檔在連接段下方留有流蘇空間。把新物件放在獨立群組，移動收尾裝飾時才不會影響結體。

1. 使用 Ellipse tool (L)（橢圓形工具） 畫一個 30 × 30 像素圓，填金色並加細的深金色描邊，置中於連接段下端。
2. 由珠子底部向束頸畫一小段紅線。示例的珠子中心位於 x 300, y 580；底部在 y 595，線段延伸至 y 610。
3. 用圓角矩形畫束頸： 74 × 27 像素，中心在 x 300、上緣在 y 610。設金色填色、2 像素深金色描邊，圓角半徑約 9 像素。
4. 用鋼筆工具畫一條開放穗絲路徑，從束頸下方的 y 631 開始。無填色，設為 7 像素紅色描邊與圓端點，底部稍微向外彎。
5. 複製該穗絲，排成 九條路徑 ，上端錨點約相隔 9 像素。頂端保持同高，下端錨點略作變化，形成柔和弧形底緣。中央穗絲約結束於 y 802，外側約結束於 y 789。
6. 使用以下指令將束頸置於穗絲上方： Object → Arrange → Bring to Front（物件 → 排列 → 移至最前）。選取珠子、短連接段、束頸及穗絲，選擇 Object → Group（物件 → 群組），將群組重新命名為 Tassel ，可在圖層面板操作。
7. 選取整個流蘇群組，在對齊面板使用 Align to Artboard → Horizontal Align Center（對齊工作區域 → 水平居中對齊），再垂直移動，使珠子接上連接段。

使用 Window → Transform（視窗 → 變形） 可輸入精確位置與尺寸。所附 600 × 900 像素 SVG 的座標原點在工作區域左上角；輸入中心或角落座標前，請確認變形面板的參考點。

06. 儲存工作檔，再匯出兩種格式。

先儲存 .ai 文件，掛圈及流蘇尖端四周留足空白，接著選擇 View → Show Transparency Grid（檢視 → 顯示透明度格點） ，檢查空白背景與交叉空隙。

SVG 保留路徑，PNG 則是像素影像。透明 PNG 適合放到已完成的卡片上；SVG 可繼續選取及修改個別部分。