點狀背景以其節奏感強、視覺干擾小的特點，廣泛應用於 UI 介面、插畫襯底、演示文稿等場景。本教程將示範如何利用「定義圖案」與「圖層樣式」快速生成可控、可複用的點陣背景，並展示三種差異化應用案例。

效果預覽

核心制作流程

1. 製作基礎點陣圖案
   • 新建 20×20 px 透明文檔，放大至像素級。
   • 鉛筆工具（1 px，硬度 100%），在畫布中心點擊一個前景色點（建議純黑 #000000，便於後續著色）。
   • 編輯 → 定義圖案 → 命名「Dot Grid 20px」。
2. 構建可調控的背景圖層
   • 目標文檔新建填充圖層 → 圖案 → 選擇「Dot Grid 20px」。
   • 雙擊圖層縮略圖，在「圖案填充」對話框中調整「縮放」百分比（50%-300%），即時改變點距密度。
   • 為填充圖層添加「色相/飽和度」剪貼蒙版，勾選「著色」統一調色；或直接在填充圖層上套用「漸變疊加」實現漸變點陣。
3. 變體擴展：隨機點陣與不規則分佈
   • 新建圖層填滿 50% 灰 → 濾鏡 → 噪點 → 添加雜色（單色，5-10%） → 圖像 → 調整 → 閾值（拖動滑塊控制點密度）。
   • 編輯 → 定義圖案 → 「Random Dots」。此法生成的點陣更具自然隨機感，適合有機風格設計。

三種場景化應用實例

案例 1：極簡電商 Banner 底紋（圖 1）

• 使用「Dot Grid 20px」縮放 150%，填充色 #f0f0f0，疊加 10% 不透明度漸變（左上透明 → 右下淺灰），營造呼吸感留白。

案例 2：科技感儀表盤面板（圖 2）

• 「Random Dots」填充，圖層混合模式疊加，不透明度 35%，配合藍綠色系「漸變映射」，點綴關鍵數據卡片邊緣。

案例 3：兒童插畫襯底紋理（圖 3）

• 「Dot Grid 20px」縮放 80%，填充粉色 #ffcccc，圖層樣式添加外發光（屏幕模式，淺粉色，擴展 5 px，大小 10 px），營造溫柔夢幻氛圍。

效率提示：建立「點陣背景」智能對象模板

1. 將上述可調控圖層組轉換為智能對象。
2. 雙擊智能對象進入源文檔，修改圖案縮放、顏色、點陣類型即可即時更新所有實例。
3. 存為 .psdt 模板，新建文件即用，實現「一次製作，無限複用」。