採用 960 像素寬度規範，結合木紋素材、圓角矩形容器、圖層樣式（投影、內陰影、斜面浮雕、漸變疊加、描邊）、剪貼蒙版、自訂圖案填充、手繩筆刷箭頭、鋼筆繪製折角標籤，完整呈現一款具有手工質感的木紋風格網頁設計。

最終效果

素材包

MissYuan_教程素材.rar

關鍵步驟

1. 新建 12×12px 白底，鉛筆 1px 黑色繪製對角線紋理，編輯 > 定義圖案 存為「斜線紋理」。
2. 新建 700×800px 畫布填 #282828，新建圖層填白、模式「正片疊底」、濾鏡 > 雜色 > 添加雜色 製造紙張質感。
3. 圓角矩形工具（半徑 15px）拉主容器，木紋素材拖入對容器建立剪貼蒙版 (Alt+Ctrl+G) 調整大小位置。
4. 木紋圖層添加圖層樣式（投影、內陰影、斜面浮雕、光澤、顏色疊加、描邊）。
5. 再建較小圓角矩形模式「正片疊底」做內容區，同樣添加豐富圖層樣式。
6. 新建圖層載入主容器選區，白色柔邊筆刷點左下角，矩形選框上移刪除選區，模式「柔光」做高光；同法黑筆刷做陰影同樣「柔光」模式。
7. 矩形工具拉出內容背景條 #EEEADC，添加圖層樣式。
8. 文字排版：使用素材包字體，Email 做藍到黑漸變文字。
9. 產品展示區：白色矩形加樣式，產品圖剪貼蒙版置入，複製旋轉角度擺放。
10. Jenna Sue 字體寫「Our New Product」，Hand Drawn Arrow 筆刷刷箭頭，調不透明度。
11. 鋼筆形狀模式勾折角標籤 #16A5DA 加樣式；Happy Phantom 字體寫「VOLUME 4」旋轉角度加樣式；折角陰影面 #004A65 同樣式。