配色難倒無數設計師。其實提取與應用都有標準化技巧。本文分享「PS 存儲為 Web 格式」提色法與 Metro 風格頁面實戰應用邏輯。

第一部分：如何提取合適色彩

核心工具：PS「存儲為 Web 所用格式」 (Ctrl+Shift+Alt+S)

步驟 1.1 找圖 —— 關鍵決定成敗

• 明確風格方向
• 搜集大量符合風格的高清大圖 (大尺寸色彩更準)
• 對比篩選，選出最貼切的 3-5 張作為母版

示例：Galaxy S4 內建壁紙，色彩豐富、精神狀態積極向上、超大尺寸。

步驟 1.2 提色操作

1. 將圖放入 PS，開啟「存儲為 Web 所用格式」
2. 格式選 PNG-8，色塊設 8 (數字越大色塊越多，視需求而定)
3. 顏色顯示區自動保留畫面佔比最大的 8 色 (程式自動篩選)
4. 點擊右側下拉選單 → 「儲存色表」 → 存桌面
5. 用 PS 打開 .act 色表文件，色板面板即顯示提取的 8 色 (3 色相系)

若母圖色彩不夠完美，可先在 PS 調色再提取。極簡高效，告別盲目吸管。

第二部分：提取色彩如何落地應用

實戰演示：用提取的 8 色構建 Metro 風格頁面 (導航/Banner/內容三區)。

具體應用策略：

1. 導航/Logo： 用最淺藍色，確保在深色背景上清晰可讀。
2. Banner 大背景： 直接使用原始母圖，大標題 Logo 用最深藍色，形成強對比層級。
3. 內容區三色相系統化分配： 直接排列剩餘色會太沖。關鍵技巧：引入過渡圖片 (如生活場景照)，以圖片固有色彩作為緩衝，調整畫面節奏，實現色彩平滑過渡。
4. 內容區文字： 統一用淺藍色 (同導航)，保持視覺一致性。
5. 按鈕處理： 不直接用提取色，改用白色疊加調透明度，獲得通用性極強、適應任何背景的「天然范兒」按鈕 (參考大孔雀老師《網頁配色的天然范兒》)。

設計師三多：多看、多想、多練

技巧是死的，感覺是活的。程式給色板，只有你能賦予它節奏與呼吸。越努力，越幸運。願此基礎教程助你配色會說話，設計更有說服力。