網頁背景圖案的核心原則是「低調服務內容」：提供微妙質感打破純色單調，卻不搶奪視覺焦點。本教學將示範如何從零建立三種經典網格圖案（十字、對角交叉、單向對角），並教導如何透過調整畫布大小、線條粗細、顏色與材質疊加，衍生出無數變體，最後說明材質圖案平鋪時的反重複技巧。

設計原則：背景須「被感覺，不被看見」

優秀的背景圖案如 iPhone 原生壁紙：低對比、低飽和、高頻細節，讓前景圖標與文字清晰可讀。設計前請牢記：圖案越細密，平鋪後視覺密度越高，顏色必須越柔和。

一、十字網格圖案

1. 建立 7×7 px 基礎畫布

奇數尺寸確保中心線兩側對稱。放大至 2000% 方便像素級操作。

2. 繪製垂直與水平中心線

• 新增圖層 1，單欄選區工具（M）置中選取 1 px 垂直選區，填充 #F3F3F3。
• 新增圖層 2，單列選區工具置中選取 1 px 水平選區，同色填充。

3. 定義圖案並套用

「編輯 > 定義圖案」命名「Grid_Cross_7px」。於任意大尺寸文件中，新增填充圖層 > 圖案疊加，選擇此圖案即可無縫平鋪。

變體：畫布改 5px 密集網格、11px 疏網格；線條色改 #E0E0E0 或 #CCCCCC；線寬改 2 px（畫布同步增大）。

二、對角交叉線圖案

1. 建立 8×8 px 畫布

偶數尺寸才能讓兩條對角線交點精準落於畫布幾何中心。

2. 繪製兩條對角線

• 新增圖層，線條工具（U），按 Shift 從左上角繪至右下角，1 px、#F3F3F3。
• 新增圖層，從右上角繪至左下角，同樣設定。

3. 定義圖案套用

同樣定義為「Grid_DiagCross_8px」，套用效果呈現精緻織布感。

三、單向對角線圖案

直接刪除對角交叉圖案中的一條線圖層，重新定義圖案即可。進階變化：調整線距（畫布高度）、線寬（描邊寬度）、方向（旋轉 45°/135°）。

四、為圖案注入色彩與材質

淡色填充

在圖案填充圖層下方新增純色填充圖層，色相任意，飽和度 ≤ 10%，亮度 85-95%，混合模式正常，即賦予淡雅色調。

材質疊加——關鍵三原則

1. 放大基礎圖案：如 99×99 px，降低平鋪重複頻率（兼顧檔案大小）。
2. 材質極低調：不透明度 5-10%，對比度極低，僅提供觸覺暗示。
3. 無縫處理：參考《Photoshop 製作不規則無縫拼接圖案》技法，對材質邊緣進行偏移修復。

實作範例：對角交叉 + 細微噪點材質

1. 新建 99×99 px 文件，矩形填滿畫布，套用「對角交叉」圖案疊加。
2. 放大 200%，新增圖層，取背景同色畫筆，選擇「噴槍/粉彩」類筆刷，流量 10%，隨機點擊數下。
3. 定義為「Grid_DiagCross_Texture_99px」，套用於網頁背景，重複感極難察覺。

總結與資產管理建議

• 將常用圖案存入「預設管理器 > 圖案」，命名規範：`Grid_Type_Size_Color`（如 `Grid_Cross_7px_LightGray`）。
• 建立專屬 .pat 圖案庫檔案，團隊共享、跨專案複用。
• 實際專案中，優先使用「圖案填充圖層」而非像素圖層，保持矢量級可縮放性與非破壞編輯。