這篇翻譯教學展示如何用 Photoshop 從零設計一個攝影主題的網站首頁版面，涵蓋版面規劃、素材合成、光效營造、UI 元素繪製、文字排版等完整網頁設計流程，適合想進入網頁設計領域的平面設計師轉型練習。

成品預覽

寬版式首頁，頂部導航列，Hero 區塊展示大幅攝影作品搭配鏡頭光暈，下方疊加草地、雲彩、花朵素材營造層次，底部資訊區塊配色清新：

文件建立與參考線佈局

1. Ctrl+N 新增文件：760 × 770 px（傳統 960 Grid 系統寬度 760 內容區 + 邊距），72 dpi，RGB。
2. Ctrl+R 顯示標尺，拖曳參考線劃分：頂部導航高 80px、Hero 區 400px、內容區 200px、頁尾 90px，左右邊距各 20px，形成 12 欄網格基準。

圖 1｜新建文件與參考線

Hero 區大圖與光效合成

1. 檔案 → 置入嵌入 攝影作品大圖，Ctrl+T 縮放填滿 Hero 區。
2. 濾鏡 → 渲染 → 鏡頭光暈：類型「電影首映」，亮度 120%，位置置於畫面三分之一交點，增加攝影器材質感。

圖 2｜置入素材圖片

圖 3｜鏡頭光暈選單

圖 4｜鏡頭光暈參數設定

前景素材疊加：草地、雲彩、花朵

核心技巧：置入素材 → 橡皮擦柔邊遮罩 → 圖層混合模式疊加，快速融合多素材。

1. Ctrl+J 新增圖層，置入草地素材，橡皮擦工具選噴槍柔邊圓 100 px，不透明度 30%~50%，從邊緣向內擦拭，讓草地自然融入底圖。
2. Ctrl+Shift+Alt+N 新增圖層，置入雲彩素材，同樣橡皮擦柔化邊緣，混合模式螢幕/柔光，不透明度 40%。
3. 再新增圖層置入花朵素材，同樣處理，混合模式正常，不透明度 80%，作為前景視覺焦點。

圖 5｜草地素材融合

圖 6｜雲彩素材融合

圖 7｜花朵素材融合

UI 色塊與導航列建構

1. 新增圖層，矩形選框工具拉出導航列高度選區，填充 #96b327（嫩綠）。
2. 新增圖層，矩形選框拉出側邊欄/按鈕區塊，填充 #6c4406（深棕）。
3. 橡皮擦噴槍柔邊 100 px 柔化色塊邊緣，避免生硬分割線。

圖 8｜色塊基礎佈局

圖 9｜柔化色塊邊緣

內容填充與細節微調

1. 文字工具輸入 Logo、導航選單、標語、按鈕文字，字體選無襯線體（微軟正黑體/思源黑體/Roboto），字重區分標題/內文。
2. 按鈕元素：圓角矩形形狀圖層 + 圖層樣式（內陰影/漸層疊加/描邊）製作立體按鈕。
3. 圖片佔位框：矩形工具畫框，描邊 1px 灰色，內部放置「圖片佔位」文字。
4. 整體檢視：對齊參考線、間距一致性（8px 基準單位）、色彩對比度達 WCAG AA 級。

圖 10｜內容填充完成

切圖與前端交付準備

• 切片工具 (K) 依模組切分：Hero 圖、Logo、圖示、按鈕狀態、背景紋理等。
• 每一切片命名規範：hero-bg@2x.jpg、logo.svg、btn-primary-normal.png、btn-primary-hover.png。
• 檔案 → 匯出 → 存儲為 Web 所用格式：JPG (照片類 80% 品質)、PNG-24 (透明圖示)、SVG (向量 Logo/圖示)。
• 產出設計規格文件（Markdown/Figma/Zeplin）：標註顏色變數、字體階層、間距系統、斷點響應式規則。

現代網頁設計工作流建議

1. Figma/Sketch/Adobe XD 為主設計工具：元件化、自動佈局、原型互動、團隊協作、開發交付一站式。
2. Photoshop 專注圖像處理：Hero 圖修圖、素材合成、特效合成、圖片優化導出。
3. 設計系統：建立色彩/字體/間距/元件 Token，設計稿與代碼同源。
4. 響應式斷點：同步設計 1440/1024/768/375 px 關鍵斷點版面。
5. 無障礙設計：對比度、語意標籤、鍵盤導航、縮放適配。

延伸學習資源

• Photoshop 切片工具切割圖片轉網頁格式教程
• Photoshop 製作漂亮暗紅色網頁框架教程
• 建立乾淨簡潔的個人簡歷網頁介面教程
• MDN Web Docs：CSS 佈局與響應式設計
• Web.dev：網頁設計最佳實踐

雖然現代流程已轉向 Figma 等協作設計工具，但 Photoshop 在「圖像級素材製備」上仍無可取代。掌握 PS → 設計工具 → 前端 的完整鏈路，才是全端設計師的核心競爭力。現在就用這個練習專案，建立你的第一個網頁設計作品集吧！