專案背景與設計目標
為初學者提供一套標準化、可落地的 WordPress 新聞部落格首頁設計流程。畫布寬 1200px，採用 960px 內容區寬度(12 欄網格)，包含五大區塊：頁首區、幻燈片輪播區、特色文章區、側邊欄 Widget 區、頁尾區。教程強調標尺/參考線/資訊面板三大精準定位工具的實戰配合。
第一步：文檔與精準定位系統建立
- 新建文檔：1200×1700 px、72 dpi、RGB、白底。
- 標尺與參考線：
- Ctrl+R 開啟標尺，Ctrl+; 切換參考線顯示。
- 垂直參考線：視圖→新建參考線 → 垂直 220px、1180px → 鎖定 960px 內容區居中。
- 水平參考線：依區塊高度依次建立(頁首 140px、輪播 400px、特色文 600px…)。
- 資訊面板：視窗→資訊，移動滑鼠即時顯示座標/寬高/色值，配合標尺測量實現像素級對齊。
第二步：深色系背景與網格紋理構建
- 基底色：背景圖層填充
#081010(深灰藍)。
- 建立網格圖案：
- 新建 20×20 px 透明文檔 → 鉛筆工具(B) 1px 白色
#FFFFFF 繪製「┐」形邊角(右上、左下各一像素)。
- 編輯→定義圖案 → 命名「Micro Grid」。
- 套用圖案：主文檔新建圖層 → 油漆桶工具(G) 選「圖案」填充 → 圖層混合模式 柔光、不透明度 50% → 形成微妙的高科技質感背景。
第三步：頁首區 — Logo、導航、搜尋三位一體
1. 頁首容器
- 矩形工具(U) 繪製 960×50 px 矩形，置於頂部參考線內。
- 圖層樣式：
- 漸變疊加：線性 90°，
#353535 → #505050 (頂部較亮)。
- 描邊：1px、內部、
#081010 (與背景融合)。
2. Logo 設計
- 字體：Helvetica Black / PingFang SC Semibold，24 pt，字距 -10。
- 圖層樣式：
- 投影：
#000000、不透明度 40%、距離 2px、大小 4px。
- 漸變疊加：線性 90°，
#92B4B5 → #FFFFFF (金屬銀質感)。
3. 導航列 — 像素級對齊
- 位置：距 Logo 右側 208px(標尺測量)。
- 分隔線：矩形選區工具(M) 1px 高選區 → 漸變工具(G) 前景
#4F4F4F 到透明，由下往上拉 → 再疊 1px 直線 #081010 增強立體感。
- 選單文字：Helvetica Roman 14 pt，項目間距 18px(含分隔線)。
- 陰文字技法：複製文字圖層 → 顏色
#1B1B1B → 向上移動 1px → 形成內凹刻字效果。
4. 搜尋框
- 圓角矩形工具(U) 半徑 20px，填充
#363636。
- 圖層樣式：內陰影
#4F4F4F(距離 2px、大小 4px) + 投影 #000000(距離 1px、大小 3px) → 內凹輸入框質感。
- 放大鏡圖標置入置中對齊。
第四步：幻燈片輪播區 — 內容豐富的英雄區
1. 容器基底
- 矩形 620×1305 px(含下方特色文章區)，填充
#E1EAEA 淺青灰。
- 轉為智能物件 → 濾鏡→雜訊→添加雜訊 1%、高斯分佈、單色 → 細微紋理打破純色平淡。
2. 圖片佈局規範
- 主預覽圖：300×200 px，位置對齊參考線。
- 縮略圖：60×60 px，間距 10px 水平排列。
- 統一描邊：1px
#4E4E4E 統一邊框風格。
3. 文字與按鈕系統
- 標題：Helvetica Bold 16pt
#1A1A1A。
- 摘要：Helvetica Regular 12pt
#4A4A4A，行高 1.5，兩行截斷。
- Read More 按鈕：80×25 px 圓角矩形 3px，漸變
#0066CC→#00AAFF，文字白色 11pt。
- 箭頭圖示：鉛筆工具 1px 手繪 → 載入選區 → 反選 → 按鈕圖層加向量蒙版 → 隱藏箭頭圖層 → 獲得完美像素級箭頭缺口。
4. 輪播控制器
- 圓點指示器：10px 圓形，間距 8px，當前態填充品牌色、其餘態 30% 不透明度。
- 左右箭頭：40×40 px 圓形背景 20% 黑半透明，箭頭圖標白色居中。
第五步：側邊欄 Widget 區 — 模組化組件庫
- 分類導航：圖標 + 文字 + 箭頭，懸停態變色預留。
- 熱門標籤雲：圓角標籤背景
#2A2A2A，文字 #CCCCCC，間距 8px 流式排版。
- 社群媒體圖標：32px 圓形圖標，品牌色填充，hover 態白底品牌色字。
- 廣告位/贊助商：125×125 px 標準尺寸，灰色虛線框佔位。
第六步：圖層管理與設計規範輸出
- 圖層命名規範：區塊前綴 + 元件名，如
header/logo、slider/thumb_01、sidebar/tag_cloud。
- 群組巢狀結構：Header / Slider / MainContent / Sidebar / Footer 五大一級群組，內含元件二級群組。
- 色彩/文字樣式面板：視窗→色彩樣式/文字樣式 存儲全站統一規範，開發端直接引用十六進位色碼與 CSS 類名。
- 切圖標記：需切圖圖層加前綴
@2x、@3x 或使用「產生圖片資產」功能自動導出多倍圖。
第七步：交付前檢查清單
| 檢查項目 | 標準 | 驗收方式 |
|---|
| 像素對齊 | 所有元素邊緣落在像素網格(無半像素) | 100% 縮放檢查邊緣銳度 |
| 圖層結構 | 群組完整、命名規範、無空圖層/隱藏垃圾圖層 | 圖層面板展開逐層核對 |
| 字體授權 | 商業可用字體或已購授權，標註字體檔案位置 | 附帶字體授權說明文件 |
色彩模式：確認 RGB sRGB，無 CMYK/專色殘留。
智能物件：圖片素材均為智能物件，未光柵化，保留原始解析度。
圖層樣式：所有效果可編輯，無「合併圖層樣式」破壞性操作。
切圖與前端交付建議
- 美術板導出：每個響應式斷點(1200/992/768/576)建立美術板 → 檔案→匯出→美術板到檔案 → PNG/WebP。
- CSS 代碼生成：右鍵圖層/群組 → 「複製 CSS」 → 獲得定位、尺寸、漸變、陰影、字體等 CSS 代碼片段，貼入樣式表微調即用。
- Zeplin/Figma 同步：PSD 拖入 Zeplin 或複製圖層到 Figma，自動生成標註、資產、代碼，設計師與工程師零溝通成本對接。
進階延伸：從靜態模板到 WordPress 主題
- 將 PSD 切分為：
header.php、index.php、sidebar.php、footer.php、functions.php、style.css。
- 輪播區採用
WP_Query 循環輸出置頂/最新文章，配合 Swiper.js 實現前端輪播。
- 側邊欄註冊
register_sidebar()，支援後台 Widget 拖拽配置。
- 主題選項框架(如 Redux/kirki)接管 Logo、色彩、排版等選項，實現「無代碼換裝」。