項目準備與畫布建立

專業的網頁設計始於有序的素材管理。先將 Logo、Banner 圖、產品圖、文字文案等歸類放入專案資料夾。啟動 Photoshop，新建畫布：寬 1920 px（適配主流顯示器）、高度依內容自適應、解析度 72 ppi、色彩模式 RGB、背景透明或淺灰。

網格系統與基準框架

1. 980px 核心內容區

選取矩形工具（U），繪製寬 980 px、高度自適應的矩形，作為頁面主視覺容器。按 V 切換移動工具，在選項欄點擊「水平居中對齊」，使其劇中顯示。

2. 參考線定位邊界

按 Ctrl+R 顯示標尺，從左/右標尺拖出垂直參考線吸附至矩形左右邊緣，形成 960/980/1200 等常用網格欄位基準，後續所有模組對齊皆以此為準。

Header 區塊構建

1. 圖層組織結構

在圖層面板建立「Header」群組，內含「Logo」、「Nav」、「Contact」子群組，圖層結構清晰便於後期維護與切圖。

2. 導航背景樣式

在「Nav」群組下繪製矩形做導航背景，雙擊圖層開啟圖層樣式：

• 漸變疊加：垂直線性漸變 #2C3E50 → #1A252F
• 描邊：內部 1px #0F161A
• 內發光：噴射模式、不透明度 30%、大小 10px、顏色 #000

3. 導航文字排版

文字工具（T）輸入選單項目，字體微軟正黑體/ PingFang SC、14px、#FFF。按住 Shift 拖拽首尾文字吸附左右參考線，全選文字圖層點選項欄「水平分佈對齊」，瞬間完成等距排版。

4. 頂部聯繫欄與分隔線

導航上方新增群組放置服務熱線、社交圖標。用鉛筆工具（B）按 Shift 畫 1px 深/淺灰雙線做選單分隔，Ctrl+J 複製並用對齊工具精準定位，最後合併圖層（Ctrl+E）、套索工具羽化 5px 刪除首尾銳利邊緣，形成虛實相間的優雅分隔。

5. Hover 狀態預覽態

複製導航背景矩形，調整漸變方向、添加高光描邊，作為滑鼠懸停狀態設計稿，交付前端時同步輸出。

Banner 區塊與後續模組

新建「Banner」群組，繪製全寬 1920px、高 350-500px 矩形承載輪播圖。後續依需求依序構建：服務優勢區（圖標+標題+描述）、產品展示區（卡片式佈局）、合作夥伴滾動條、Footer 版權資訊等。每個區塊獨立群組，命名規範如 `Sec_Services`、`Sec_Products`，圖層顏色標記區分功能區，極大提升團隊協作效率。

交付規範清單

• PSD 源檔：圖層分組清晰、命名語義化、智能物件保留可編輯性
• 切圖標註：關鍵尺寸、間距、色值、字體標註完備
• 狀態稿：Default / Hover / Active / Focus 四態齊全
• 切片輸出：Web 格式分資料夾存放，命名對應 CSS class

總結

規範的圖層結構、精準的參考線網格、可復用的圖層樣式、標準化的交付流程，是專業網頁設計師區別於業餘者的關鍵。熟練掌握本教程全流程，你就能高產出高品質、易維護、前端友好的企業官網設計稿。