身為前端工程師，美術基礎較弱，但可透過研習優秀 PS 網頁教學提升設計感。本系列翻譯自國外經典教程，使用 960 Grid System 規範版面，示範如何應用微妙紋理、無縫對角拼接圖案、分頁籤內容區設計，打造輕盈通透的光質感網頁。

最終效果預覽

教學約定

• 軟體版本：Photoshop CS5
• 原教程英文介面，本文截圖為中文版重製
• 原文缺漏參數處，經測試以紅字標註修正值
• 座標標記格式：(x, y, 寬, 高) 或 (x, y)
• 文末附心得與優化建議

步驟 1：建立畫布與背景紋理

1. 開啟 960_grid_12_col.psd，影像 > 畫布大小 改為 1200×1900px（高度可後續調整）。
2. 解鎖背景圖層，填充 #EDEDED（淺灰）。
3. 右鍵圖層「轉換為智能物件」，濾鏡 > 雜色 > 添加雜色：數量 1%、高斯分布、勾選「單色」。

步驟 2：設計頁首區塊

1. 新建群組「Header」。文字工具輸入網站名稱，字體 Gotham Bold、42pt、#707679，對齊網格。
2. 文字圖層添加圖層樣式：投影、內陰影、斜面與浮雕、光澤、顏色疊加、描邊（參考圖參數）。
3. 下載社群圖示集（RSS、Twitter、Facebook），移入文件右側，間距 10px，群組命名「social icons」。

步驟 3：製作無縫對角條紋圖案

1. 新建 5×5px 文件，矩形選框工具按 Shift 建立 5 個正方形選區（如圖）。
2. 填充黑色，編輯 > 定義圖案 命名「Diagonal Stripes」。

（後續步驟將運用此圖案於導覽列、分頁籤等區塊，敬請期待下集）