※ 注意：教程基於 Velositey 早期版本，當前最新版為 1.1，介面略有差異但核心功能一致且更強大。

為什麼需要 Velositey？

觀察 ThemeForest 熱門 WordPress 主題（Avada、Enfold、Salient），不難發現它們共享高度相似的佈局模式：Logo 左對齊、導航右側、大幅輪播 Banner、明顯的柵格系統。這類重複性工作佔據了設計師大量時間，Velositey 正是為了解決此痛點而生的 Photoshop 擴展面板，能以「點點點」的方式在幾分鐘內生成完整網頁線框，再配合 PS 原生功能精調，大幅提升原型設計效率。

安裝與啟動

1. 確保已安裝 Adobe Extension Manager。
2. 將解壓後的 Velositey 資料夾放入 Photoshop/Plug-ins/Panels，或直接用 Extension Manager 安裝 .zxp。
3. 重啟 PS，選單 視窗 → 擴充功能 → Velositey 即可呼叫面板。

核心功能實操

1. 新建文件：內建 1170px/30px 間距柵格

點面板 [+] New Template，自動生成符合 Bootstrap 風格的 12 欄柵格畫布，免去手動引導線麻煩。

2. 一鍵添加區塊

面板提供分頁：Header、Slider、Content、Modules、Footer。點擊任一縮圖即在畫布對應位置生成該區塊，圖層自動歸組、命名規範。

• Header：含 Logo 左/導航右、置中、漢堡選單等 6+ 樣式。
• Slider：內建標題+副標+雙按鈕、全屏圖片、三欄卡片等 8 種變體。
• Content：三欄圖文、兩欄側邊欄、單欄長文等。
• Modules：可重複添加的獨立內容塊（特色介紹、價格表、團隊展示…）。
• Footer：簡約版、多欄連結版、訂閱表單版等。

3. 微調間距

面板底部提供「Add Spacer」按鈕，可在區塊間快速插入固定高度的留白，保持垂直韻律。

進階：非破壞性精調流程

生成的線框只是骨架，要變成高保真原型，必須遵循「圖層完整性」原則——所有調整皆為非破壞性，保留隨時回修彈性。核心工具三件套：

• 智慧物件 / 連結智慧物件：Logo、圖示、圖片置入後可無損縮放、批量更新。
• 調整圖層：色階、曲線、色相/飽和度…隨時可改參數。
• 圖層效果：投影、描邊、漸變疊加…可疊加、可關閉。

實戰：Logo 智慧物件化與跨區塊複用

1. 在 Header 群組找到 Logo 矩形圖層 → 右鍵「轉換為智慧物件」。
2. 再次右鍵選「編輯內容」，PS 開啟 .psb 子文檔，放入實際 Logo 向量圖，存檔關閉，主文檔同步更新。
3. 右鍵該智慧物件 → 「轉換為連結…」→ 存為 images/logo.psb，納入專案資產管理。
4. Footer 群組的 Logo 圖層同樣右鍵「替換內容」指向同一 .psb，即可實現全站 Logo 一處修改、處處生效。

其他元素同理

圖示、Banner 圖、產品圖均建議走「連結智慧物件」流程，配合「調整圖層」做色調統一，「圖層效果」做懸停狀態預覽，整份 PSD 圖層數可控制在 50 組以內，極易維護。

總結

Velositey 將「重複佈局」標準化、組件化，配合 PS 非破壞性工作流，讓設計師從像素級搬運工轉型為「系統架構師」。下次接到「急需明天見客戶的官網原型」時，試著用 15 分鐘跑完骨架，再花 30 分鐘灌真實文案與品牌風格，你會發現原型設計也可以很優雅。