專案概覽

以大量圖片素材與筆刷質感，構建具有濃厚懷舊質感的首頁設計，涵蓋頁首、導航、側欄、主內容、頁尾等區塊，強調材質轉換為可重複背景的實戰考量。

最終效果

核心流程

1. 文件與佈局：950×800 px → 擴展至 1200×1000 px 適應寬螢幕，拉參考線劃分頁首、導航、側欄、頁尾，背景填 #7A8173。

2. 頁首圖案：50×300 px 新檔畫對稱圖形，定義為「Pattern 1」；主檔新圖層畫 300 px 高矩形套用圖案，填充 0% 合併圖層得 Pattern1 層（圖）。

3. Pattern1 樣式：加投影、漸變疊加、圖案疊加（貼緊原點），調整參數得紋理質感（圖）。

4. 導航列：矩形蓋住 Pattern1 一點，套圖案疊加、黑→深紅漸變疊加、柔和投影，加圖層蒙版黑白漸變做淡入淡出（圖）。

5. 光暈點綴：橢圓 #691E1B 命名「Light」，高斯模糊 50 px，刪除超出導航列部分，模式「顏色減淡」（圖）。

6. 側欄背景：紅色矩形 #3D100B，加陰影、顏色疊加、圖案疊加；注意投影距離設 0 便於切圖，漸變僅用水平/垂直利於 CSS 重複（圖）。

7. 網站標籤：置入破舊標籤素材左上角，魔棒選棕圈反選，色階與色相/飽和度調整融入（圖）。

8. 標籤邊緣破損：不規則筆刷橡皮擦邊緣，減淡工具同筆刷做撕紙高光（圖）。

9. 標籤陰影：複製標籤層，亮度 -100、高斯模糊 10 px，模式「正片疊底」75% 不透明度（圖）。

10. 標籤去飽和：飽和度 -40 讓質感更灰暗（圖）。

11. 裝飾圖片：置入生銹火車素材，模式「變暗」融入（圖）。

12. Grunge 字體排版：標題用破損字體、黑色、模式「疊加」，複製層偏移 1-2 px、不透明度 75% 產生模糊感；同法做標語與導航連結（圖）。

13. 筆刷裝飾：Jenn B 破損筆刷加數字、膠帶、邊角等，圖層置於標籤陰影之下（圖）。

14. 搜尋框：紅色矩形 #6A0400 加描邊與圖案疊加（圖）。

15. 主要內容區：深灰矩形 #0D0F0E 加投影與描邊，圖層資料夾分組管理（Header、Sidebar、Content、Footer）。

16. 破損邊框：下載素材貼於灰底上（後續步驟原文未完整）。