本教學不僅教你怎麼「畫」出網頁，更傳達版面架構思維：如何規劃視覺層次、引導視線流向、平衡資訊密度。跟著實作一個 Fancy 風格設計工作室官網首頁，學會彈性套用的佈局邏輯！

最終成果預覽

素材準備

1. 紋理圖：開啟後「編輯」→「定義圖案」儲存。
2. 大幅背景圖：下載原尺寸備用。

步驟 1：建立畫布與背景紋理

• 新建 1100×1260px 文件。
• 油漆桶工具選「圖案」模式，套用剛定義的紋理填滿背景圖層。

步驟 2：頁腳與中部大圖佈局

• 拖入大背景圖置底，命名「bottom」，圖層模式「正片疊底」。
• 複製該圖層（bottom 副本），移至頁面中上部，豐富視覺層次。

步驟 3：導航欄設計（亮點：主副標題雙層結構）

1. 圓角矩形工具：半徑 15px、940×99px。
2. 圖層樣式：漸層疊加、內發光、描邊等（參考教學圖參數）。
3. 直線工具畫分隔線（色 #5e5a59）。
4. 矩形工具畫懸停狀態按鈕背景（深色），實作時可由 CSS :hover 實現。
5. 文字排版：一級導航大字，下方小字做說明性副標題（非二級選單），寬敞通透極具設計感。
6. 鉛筆工具 1px 畫白色箭頭，搭配橢圓形底框，細節見工夫。

步驟 4：Banner 輪播區與陰影立體感

1. 大圓角矩形承接導航下方，作輪播區容器。
2. 同風格箭頭按鈕置左右。
3. 橢圓工具畫黑橢圓，高斯模糊 8-10px → 編輯 → 變形 → 扭曲，拉成投影漸變橢圓，賦予懸浮立體感。

步驟 5：特色服務區與 CTA 按鈕

• 橙色鉛筆圖示 + 圓角矩形資訊塊 + 文字說明（原教學矢量素材網站已失效，可自繪或找替代素材）。
• 高對比度橙色 CTA 按鈕，植入關鍵轉換詞（如「開始專案」），視覺權重最高。

步驟 6：圖標群與圖層樣式統一

• 排版圖標+標題+描述三欄，圖層樣式統一：內陰影、斜面浮雕、漸層疊加（參考教學三張參數圖）。

步驟 7：Logo 與最終微調

• 設計專屬 Logo 置於導航左側或頁首適當位置。
• 整體檢視：對齊、間距、色調一致性、圖層命名分組規範。

延伸學習

• PS 製作網頁 Banner 廣告教學
• Photoshop 製作清涼水中網頁模板
• PhotoShop 切片工具切割圖片轉網頁格式

完成版面後，記得輸出切圖規格表與標註檔交付前端，讓設計完美落地！