懷舊/復古風格網頁設計近年大熱。本教程完整示範一個中高階專案流程：從畫布設定、格線系統、紋理背景製作、導航列設計、排版層級、裝飾元素運用到圖層管理，適合想提升網頁設計實戰能力的學習者。

最終效果

製作流程重點

步驟 1：畫布與格線

新建 RGB 72dpi，800×950px，顯示標尺拉出參考線。為支援更高解析度，擴大畫布至 1200×1000px，規劃標題、導航、側欄、內容、頁腳區塊。

步驟 2-3：標題背景紋理

建 300×50px 紋理檔 → Edit > Define Pattern → 設計稿中繪製矩形 → 圖層樣式「圖案疊加」套用 → 填充 0% → 合併圖層保留樣式 → 命名「Pattern 1」。

步驟 4-5：圖層樣式與漸層蒙版

「Pattern 1」加入投影、漸層疊加、圖案疊加。再建一層矩形，套用圖案疊加+黑紅黑漸層疊加+柔光，加「隱藏全部蒙版」繪製黑白黑漸層產生反光效果。

步驟 6-7：光效與組織圖層

新層「Light」高斯模糊 50px，混合模式「顏色減淡」。考慮 CSS 切圖便利性，陰影偏移設 0px，漸層僅垂直/水平。建立資料夾歸類圖層（Header, Sidebar, Content, Footer）。

步驟 8-11：標籤裝飾製作

放入舊標籤素材 → 魔棒選取棕圈 → 反選 → 色相/飽和度調整 → 橡皮擦不規則刷邊緣 → 減淡工具強化邊緣 → 複製圖層做投影（亮度 -100，高斯模糊 10px，正片疊底 75%） → 飽和度 -40 統一色調。

步驟 12-15：輔助圖像與裝飾筆刷

放入老式火車插圖，混合模式「變暗」。添加 Grunge 字體標題（混合模式「疊加」，複製層位移 1-2px 製造模糊感）。下載 Jenn B 筆刷添加數字、膠帶、角落裝飾，圖層樣式加描邊與圖案疊加。

步驟 16-19：內容區與側欄設計

建立四大資料夾架構。內容區矩形加投影描邊。側欄加 Grunge 角落（不透明度 25%）。文字排版：標題用 Grunge 字體 #4D0D0D，內文 Arial #3F3F3F，加投影。特色欄放入寶麗來相框，同標籤技法做邊緣磨損與投影。

（教程內容較長，此處節錄核心步驟，完整細節請參考原圖解）