Photoshop 是網頁視覺設計的利器，特別擅長處理大量圖像材質與筆刷紋理效果。本教學將完整示範如何從零開始設計一款充滿質感、極具氛圍的「破舊風格」首頁，涵蓋頁首、導覽列、側邊欄、主要內容區與頁尾等完整區塊，適合具備 PS 基礎的中階設計師進階練習。

設計規格與準備

• 畫布尺寸：950px (寬) × 800px (高)，解析度 72 dpi
• 為適應寬螢幕顯示，後續將畫布擴展至 1200px × 1000px
• 預設背景色：#7A8173 (灰綠調)
• 假設專案為 WordPress 主題設計，需規劃頁首、導覽、右側欄、頁尾等標準區塊

核心製作流程

步驟 1-2：建立頁首紋理圖案

另開新檔 50px × 300px，利用參考線輔助繪製對稱幾何紋理，執行「編輯」→「定義圖案」儲存為「Pattern 1」。回主檔，在新圖層用矩形工具拉出 300px 高矩形，套用「圖案疊加」並啟用「貼緊原點」，將填充不透明度歸零，再與新圖層合併，獲得可直接編輯特效的紋理基底層（命名 Pattern1）。

步驟 3-4：頁首與導覽列視覺強化

為 Pattern1 添加投影、漸層疊加、圖案疊加等圖層樣式，營造立體厚實質感。導覽列以矩形覆蓋頁首底部，同樣套用圖案疊加、黑至暗紅漸層與柔和投影，並加入「隱藏全部」圖層蒙版配合黑白漸層，形成中間亮、兩側漸隱的視覺焦點效果。

步驟 5-6：光效點綴與側邊欄建構

在 Pattern1 上方新增橢圓形發光層（#691E1B，高斯模糊 50px，混合模式「顏色減淡」），修飾至導覽列上方。側邊欄以深紅矩形（#3D100B）為底，疊加陰影、顏色疊加、圖案疊加樣式。設計時同步考量前端切圖需求：投影距離設 0、優先使用直向漸層，便於後續 CSS 重複背景實現。

步驟 7-11：Logo 標籤精細刻畫

1. 置入破舊標籤素材於左上角，用魔術棒選取褐色圓圈後反選，調整色階與色相/飽和度融入整體色調。
2. 以不規則筆刷配合橡皮擦破壞邊緣，再用減淡工具同筆刷強化邊緣高光，營造剪紙撕裂質感。
3. 複製標籤圖層，亮度歸 -100 (純黑) + 高斯模糊 10px，混合模式「正片疊底」不透明度 75% 產生投影。
4. 整體飽和度 -40，壓低色彩鮮豔度，強化復古氛圍。

步驟 12-14：主視覺與裝飾元素

置入銹蝕火車素材，混合模式設「變暗」融入背景。標題文字使用 Grunge 風格字體，黑色字體疊加模式 + 複製圖層偏移 1-2px + 75% 不透明度，形成模糊雙重曝光效果。導覽連結同步排版。下載 Jenn B 破舊筆刷組（注意授權），添加數字、邊角、膠帶等裝飾，圖層須置於標籤與陰影圖層之下。

步驟 15-18：內容區與頁尾構建

頁首搜尋框：深紅矩形（#6A0400）+ 描邊 + 圖案疊加。主要內容區：深灰矩形（#0D0F0E）+ 投影 + 描邊，圖層分組管理。引入破損邊角素材，疊加模式 + 色值 #171612，側邊欄同素材降低不透明度至 25%。至此，首頁核心框架與視覺語言基本成型，後續可繼續細化內容區排版與頁尾設計。