矢量精度構建可無限縮放的幾何格紋背景

手工繪製格子背景優於圖案填充的優勢在於：每條線條可獨立控制粗細/顏色/透明度/斷裂，適應品牌視覺系統的精細定制需求。本教程演示矢量形狀層構建精準格網的專業流程。

核心製作流程

1. 基準網格建立

• 新建文檔（如 1200×1200px），視圖→新建參考線佈局：欄數/行數 10，間距 0，邊距 0
• 或：編輯→首選項→參考線/網格/切片，網格線 120px，子網格 1 → 視圖→顯示→網格

2. 矢量線條精確繪製

1. 矩形工具 (U) → 選項欄選「形狀」，描邊 2px，填充無，顏色 #CCCCCC
2. 按網格線繪製橫向/縱向線條，智能參考線自動吸附對齊
3. 所有線條圖層選中 → 右鍵「合併形狀」 → 單一矢量圖層，便於整體調整

3. 風格化變體設計

• 標準格網：均勻線寬/顏色，極簡秩序感
• 主次線條：主網格 2px 深灰，次網格 0.5px 淺灰，構建視覺層級
• 斷裂/虛線：路徑面板選中特定路徑段 → 屬性面板設置虛線樣式
• 漸變線條：圖層樣式「漸變疊加」角度 0°/90°，線條顏色隨位置變化
• 透視變形：Ctrl+T 右鍵「透視」拉伸遠端線條，模擬 3D 地面網格

4. 材質與氛圍疊加

• 紙張/畫布紋理疊加，「正片疊底」低不透明度
• 邊緣暗角：新建圖層徑向漸變黑透明，「正片疊底」
• 色彩分級：查找表/曲線 賦予溫暖/冰冷/復古調性

進階變體：不規則/有機格網

1. 矩形網格工具 建立基礎網格
2. 直接選擇工具 (A) 隨機拖動錨點位移 5-15px
3. 路徑面板「描邊路徑」筆刷模擬壓力 → 線條粗細變化
4. 添加圖層樣式「斜面浮雕」內部凹凸 → 立體凹槽感

輸出與複用策略

• 保存 PSD 保留矢量可編輯性
• 導出 SVG（右鍵形狀圖層→導出為 SVG）前端直接使用
• 定義為圖案預設（編輯→定義圖案）一鍵鋪滿任意尺寸
• 制作動作記錄全流程，參數化生成不同規格/風格變體

手工繪製格網看似繁瑣，實則是對視覺秩序的精確控制權。當品牌需要「第 3 條線稍粗、第 7 格透明度 50%」這類精細需求時，矢量手工流程的價值才真正顯現。