想學習如何用 Photoshop 設計一個乾淨、現代感的網頁版面嗎？本教學將帶你一步步完成從畫布設定、參考線佈局、Logo 設計、導航欄製作到頁首區塊與特色內容區的完整流程。跟著操作，輕鬆掌握網頁設計的核心技巧！

預覽最終成果

首先看看我們即將完成的網頁樣貌：

步驟 1：建立新文件與單位設定

開啟 Photoshop，按 Ctrl/Cmd + N 建立新文件。建議寬度 1200px、高度依內容而定、解析度 72dpi、色彩模式 RGB。接著進入 Ctrl/Cmd + K 偏好設定，將「單位與標尺」全部設為「像素」，這是網頁設計的標準單位。

步驟 2：建立內容區參考線（960px 佈局）

1. 開啟標尺（Ctrl/Cmd + R）與資訊面板（F8）。
2. 選取矩形選框工具（M），在畫布左上角拉出 120px 寬的選區，參考資訊面板調整精確寬度。
3. 從左側標尺拖出參考線至選區右緣；再將選區移至右側邊緣，拖出另一條參考線至選區左緣。如此即形成置中 960px 的內容安全區。

步驟 3：設計 Logo 與標語

1. 新建群組命名「logo」。
2. 使用文字工具（T）輸入「SMASHING」（或自訂網站名），字體 Arial、粗體、42pt、銳利、顏色 #101112。
3. 雙擊圖層開啟圖層樣式，套用「漸層疊加」，左色 #101112、右色 #3a3b3c（依教學圖調整）。
4. 將文字移至距頂 35px、貼齊左參考線。複製圖層，改文字為「Dzine」，漸層色改為左 #b27625、右 #e5ad27，置於「SMASHING」右側。
5. 在 Logo 下方加上標語文字，完成 Logo 區塊。

步驟 4：製作導航欄

1. 新建群組「navigation」置於 logo 群組上方。從頂部標尺拖參考線至 150px 處。
2. 矩形工具（U）畫一條全寬 4px 高的橫線，顏色 #e3ab27。
3. 導航文字距橫線 12px、距左參考線 20px 排列。用橢圓工具畫 72×35px 圓角矩形作為懸停狀態，套用漸層（左 #e5ad27、右 #b27625），文字白色。

步驟 5：右上角「聯絡我們」區塊

在畫布右上方（Logo 對側）放置電話圖示，旁邊加上電話號碼（Arial 20pt #292929）與描述文字（Arial 粗體 11pt #595959）。

步驟 6：建立頁首區塊

1. 新建群組「header」。
2. 矩形工具畫 1200×440px 矩形，置於導航欄下 1px，命名「header bg」，套用漸層（左 #2e2226、右 #7a7556）。
3. 再畫一個 960×360px 矩形，距 header bg 頂 40px、貼左參考線，命名「header container」。

步驟 7：特色項目區塊

1. 在 header 群組內新建群組「fp」。
2. 矩形工具畫 630×340px 區塊，距 header container 內邊 10px，填黑、命名「fp container」。
3. 匯入特色圖片，置於 fp container 上方，右鍵建立「剪貼蒙版」限制顯示範圍。調整圖片角度（Ctrl/Cmd+T 旋轉 -4°），圖層模式設「亮度」。
4. 底部加半透明黑色標題背景（630×90px、不透明度 90%），上方加 1px 分隔線。輸入標題（Arial 25pt 白銳利）與描述（Arial 12pt #a4a4a4 無銳利）。

步驟 8：快速報價區塊

1. 在 header 內新建群組「quick quote」。
2. 橢圓工具畫 300×340px 圓角矩形，距特色區 10px，命名「qq container」。
3. 複製導航欄 hover 按鈕的圖層樣式貼上至 qq container，快速套用相同視覺風格。

至此，一個結構清晰、視覺統一的簡潔網頁設計雛形已完成。你可以繼續往下設計內容區、頁尾等，或依專案需求調整細節。記得善用群組管理圖層，讓檔案好維護！

延伸閱讀

• PS 制作網頁 Banner 廣告教學
• Photoshop 切片工具切割圖片轉網頁格式
• 打造乾淨簡潔的個人簡歷網頁介面
• Photoshop 製作漂亮暗紅色網頁框架