觀察優秀網頁背景，多數非純色而是無縫拼接紋理平鋪而成。規則紋理（格子、點陣）容易，但不規則有機紋理（草地、石材、織物、水紋）若直接平鋪，邊緣會出現明顯「斷裂線」，破壞沉浸感。本文以草地為例，講解偏移濾鏡 + 修復畫筆製作無縫紋理的標準流程。

為何直接平鋪失敗？

圖像邊緣像素不連續 → 平鋪時邊緣對接產生明顯縫隙（如草地出現「坑洞」）。

標準無縫化流程（五步法）

1. 裁切正方形基礎塊

1. 開啟素材圖（建議 2000px+ 高解析）。
2. 裁切工具 (C) → 寬/高設同值（如 200px），拖選色彩均勻、無明顯大物體的區域（避開四角陰影）。
   

2. 偏移濾鏡：將邊緣移至中心

1. 濾鏡 → 其他 → 偏移。
2. 水平/垂直均設為 畫布尺寸一半（如 100 px）。
3. 勾選 「環繞」。
   原理：將四條邊緣移至畫布中心交叉，原中心區域移至四角。此時「縫隙」顯現在畫布中心十字線上，便於修復。
   

3. 修復畫筆消除中心十字縫

1. 放大至 100%+，選修復畫筆工具 (J)，硬度 0%、大小 20-30 px。
2. Alt 取樣周圍紋理 → 沿水平/垂直分隔線繪製，直至痕跡不可見。
   

4. 驗證無縫

1. 再次執行偏移（相同參數），畫面應恢復原狀且無痕跡。
2. 或：新建大畫布（如 1000×1000），編輯 → 定義圖案 → 油漆桶 (G) 選「圖案」填滿，觀察有無縫隙。
   

5. 輸出 Web 格式

檔案 → 存儲為 Web 所用格式 (Alt+Shift+Ctrl+S) → JPEG 80% / PNG-24，命名規範如 grass_seamless_200px.jpg。

進階：大尺寸無縫紋理（>500px）

單次偏移修復隨尺寸增大難度指數級上升。解決方案：

1. 將大素材切分為 4 塊 200px 正方塊（重疊 50px）。
2. 每塊獨立無縫化。
3. 用內容感知填充/修復畫筆處理塊間接縫，再整體偏移驗證。

應用場景

• CSS background: url(texture.jpg) repeat; 網頁背景。
• 3D 材質貼圖（PBR 流程 Base Color/Normal/Roughness 圖均需無縫）。
• 遊戲地形紋理、建築外立面貼圖。
• 印刷紋理紙、包裝紙、壁紙設計。

避坑指南

問題	原因	解決
修復後紋理有「重複模式感」	修復畫筆取樣範圍過小	擴大取樣範圍、多角度取樣、適當引入「內容感知填充」
驗證時仍有微弱縫隙	修復未至像素級完美	100% 放大、鍵盤方向鍵逐像素檢查、鉛筆工具 1px 修補
色彩邊緣明暗跳變	原素材四角暗角	裁切前先用漸變蒙版/曲線壓暗四角，或選中心區域裁切

結語

偏移濾鏡 是無縫紋理製作的「核心引擎」，配合修復畫筆 可解決 95% 有機紋理無縫化需求。掌握此流程，即擁有「將任意攝影素材轉為無限平鋪紋理」的能力，是 UI/3D/遊戲/印刷設計師的必備基本功。