成品預覽

一款具有層次感、金屬質感條紋、光暈高光、陰影投射的現代網頁頁腳，採用固定寬度居中佈局，適配 1024×768 以上螢幕。

設計規劃

• 畫布：1440×900 px（模擬 17 吋筆電全屏）。
• 頁腳區塊：固定寬 760px、高 420px，居中對齊（確保 800×600 可見）。
• 風格關鍵字：Web 2.0、漸變、金屬質感、光暈、柔和陰影、網格紋理。

Step 1：背景漸變基調

背景圖層填充線性漸變：#B0B0B0 (頂) → #E1E1E1 (底)，垂直向下拖曳 (Shift 鎖定垂直)。

Step 2：參考線建立固定寬度佈局區

視圖 → 新建參考線版面：寬 760px、間距 0、邊距自動居中。或手動拖曳 4 條參考線框定 760×420px 區域。

Step 3：金屬條紋背景條（全寬填充）

1. 下載/製作 1px 高金屬條紋圖案（或自行繪製：噪點+動態模糊+對比度）。
2. 編輯 → 定義圖案 命名「Metal_Stripe」。
3. 新建文件 1440×86 px，編輯 → 填充 → 圖案 選「Metal_Stripe」。
4. 全選複製，貼回主文件底部，對齊畫布底緣。

Step 4：頂部光暈條（漸變包應用）

1. 新建圖層，矩形選框工具 (M) 框選全寬、高 21px 區域（緊貼金屬條上方）。
2. 漸變工具 (G) 載入專業漸變包（如「Black 5-Gloss」），Shift 垂直拖曳建立光暈漸變。
3. 移動至金屬條上方緊貼。

Step 5：光暈條圖層樣式——內陰影增厚實感

雙擊光暈條圖層 → 內陰影：混合模式「正常」，顏色淺灰 #CCCCCC，不透明度 100%，距離 2px、大小 2px、雜角 0。產生頂部細線高光，增強立體厚度。

Step 6：金屬條深化——疊加模式著色

1. 前景色 #545557，背景色 #1E211F。
2. 金屬條圖層下新建圖層，Ctrl+點擊 金屬條縮略圖載入選區。
3. 漸變工具選「前景到背景」，Shift 垂直拖曳填充選區。
4. 選中金屬條圖層，混合模式改為 正片疊底，條紋紋理保留並著色深化。

Step 7：內容區圓角矩形與立體投影

1. 所有圖層上方新建圖層，圓角矩形工具 (U) 半徑 5px，在參考線中央繪製 #DFDFDF 圓角矩形（內容承載區）。
2. 圖層樣式 → 投影：距離 3px、大小 8px、不透明度 40%。
3. 圖層右鍵 → 建立圖層（將投影分離為獨立圖層）。
4. Ctrl+T → 右鍵 → 透視，向內拖拽頂部兩控制點，製造近大遠小透視投影。向下移動投影層，柔邊橡皮擦擦除上緣過渡。

Step 8：文字、版權、Logo 排版

在內容區內排版：版權聲明、導航鏈接、社群圖標、品牌 Logo。字體建議：標題 Microsoft JhengHei Bold / 正文 Microsoft JhengHei Regular，顏色深灰 #333333，行高 1.6。

Step 9：切圖輸出策略（供前端重構）

1. 隱藏所有文字圖層（文字由 HTML/CSS 實現）。
2. 依視覺結構切分為 2-3 張背景圖：

• `footer_bg_repeat.png`：金屬條紋+光暈條（1px 高或 86px 高可重複 X 軸）。
• `footer_content_bg.png`：圓角矩形+投影（不重複，定位 bottom center）。
• 可選：`footer_divider.png` 裝飾線。

3. 存儲為 Web 所用格式：JPEG 高品質 (70-80) 用於含漸變/照片的大圖；PNG-32 用於透明/銳利邊緣圖標。

CSS 重構提示

.footer {
  background: url(footer_bg_repeat.png) repeat-x bottom center #E1E1E1;
  padding-bottom: 120px; /* 預留內容區高度 */
}
.footer-inner {
  width: 760px; margin: 0 auto;
  background: url(footer_content_bg.png) no-repeat bottom center;
  padding: 20px 30px 80px; /* 內容區內距 */
  color: #333; font-family: "Microsoft JhengHei", sans-serif;
}

結語

頁腳設計不僅是視覺收尾，更是品牌信任感、導航補充、法律合規的載體。掌握「漸變建調 → 紋理疊加 → 光影塑形 → 切圖分離 → CSS 重構」全鏈路，能讓設計稿無縫落地，減少設計與前端的溝通成本。