專案概覽：打造極簡風電商品牌標識
本教程演示如何在 Photoshop 中從零設計一套電商網站 Logo，涵盖主標識、組合標識、圖標變體、應用場景延展。最終輸出包含 AI 矢量源檔、PNG 透明底、SVG Web 格式、品牌規範單頁。風格定位：幾何極簡、藍綠雙色系、可縮放矢量核心。
第一階段：文檔設置與網格系統建立
- 新建文檔：Ctrl+N → 寬高 2000×2000 px、300 dpi、RGB、透明背景。高解析度確保後續任意尺寸導出無損。
- 建立參考線網格：
- Ctrl+R 顯示標尺，Ctrl+; 顯示參考線。
- 視圖→新建參考線佈局：列/行 12、寬度/高度 0、間距 20 px、邊距 100 px → 確立 12 欄模組化網格。
- 鎖定參考線：Ctrl+Alt+; 防止誤移。
- 色彩模式管理：編輯→色彩設置 → 工作空間 RGB: sRGB IEC61966-2.1，CMYK: Japan Color 2001 Coated，確保跨媒體色彩一致。
第二階段：核心圖形構建 — 矢量優先原則
1. 基礎幾何單元繪製
- 選取橢圓工具(U 循環切換)，按住 Shift 繪製正圓，填充主品牌色
#0066CC，無描邊。
- 複製圖層 (Ctrl+J) → Ctrl+T 縮放 70% → 置中對齊 → 填充輔助色
#00CC99 → 形成雙圓同心結構。
- 選取矩形工具，繪製寬高比 1:3 條狀矩形，置於雙圓中心橫向貫穿，填充白色
#FFFFFF。
2. 布爾運算生成複合形狀
- 選中三個形狀圖層 → 右鍵 → 合併形狀 → 選擇「排除重疊區域」 → 獲得「雙圓中空+橫條貫穿」的單一矢量路徑。
- 路徑面板 → 右鍵路徑 → 「建立選區」 → 羽化 0 px → 新建圖層填充品牌漸變色(稍後步驟)。
- 優勢：矢量路徑無限縮放不失真，後續可直接匯出 SVG/AI，且便於後續修改比例。
3. 字體排版與光學校正
- 文字工具 (T) 輸入品牌名「ShopEase」，字體：Inter Bold / Noto Sans TC Bold，字號 120 pt，字距 -20，行高 1.1。
- 光學校正：將文字轉為形狀(右鍵文字圖層→轉換為形狀) → 直接選擇工具(A) 微調字母節點：'S' 上下端點水平對齊、'p' 腿部延長 2px、'E' 中橫條縮短 10% → 消除視覺不平衡感。
- 文字與圖形間距：基線對齊圖形中心，間距 = 圖形高度 × 0.15 (約 45 px)。
第三階段：視覺效果賦予 — 圖層樣式系統化應用
1. 主標識圖形樣式
- 漸變疊加：線性漸變 135°，
#0066CC (0%) → #00AAFF (50%) → #00CC99 (100%)，體現科技與活力雙屬性。
- 內發光：混合模式「螢幕」，色彩
#00FFFF，不透明度 35%，噪聲 5%，大小 8 px → 邊緣發光質感。
- 投影：混合模式「正片疊底」，色彩
#003366，不透明度 25%，角度 120°，距離 4 px，擴展 0%，大小 8 px → 微浮雕立體感。
- 描邊：大小 1 px，位置「內部」，漸變填充
#FFFFFF (0% 不透明度) → #FFFFFF (30%) → 邊緣高光修飾。
2. 文字樣式 — 保持可編輯性
- 文字圖層右鍵 → 「混合選項」 → 僅添加投影(同圖形參數)與內陰影(距離 1px、大小 2px、不透明度 20%)，保持文字向量屬性，後續修改文字內容樣式自動跟隨。
第四階段：變體設計與響應式適配
| 變體類型 | 構成元素 | 適用場景 | 安全區/比例 |
|---|
| 主標識(橫版) | 圖形 + 橫排文字 | 網站頁首、橫幅廣告、名片橫版 | 最小寬 120px，文字高度 ≥ 12px |
| 主標識(直版) | 圖形上、文字下垂直排列 | App 圖標、社交媒體頭像、方形廣告位 | 1:1 畫布，邊距 15% |
| 圖標 | 僅圖形部分 | Favicon、App 圖標、導航欄、載入動畫 | 正方形安全區 70% |
| 文字標記 | 僅品牌文字(含字距調整) | 極窄空間、版權聲明、水印 | 字高 ≥ 10px |
| 單色版 | 全黑/全白/單一品牌色 | 單色印刷、激光雕刻、水印、深色模式 | 保持原始比例 |
第五階段：專業導出與交付包準備
1. 矢量源檔匯出
- AI 格式：選中所有矢量圖層 → 右鍵 → 「匯出為」 → 選擇 Illustrator (.ai)，保留圖層結構與圖層名稱。
- SVG 格式：檔案→匯出→匯出為 → SVG → 設置：字體「轉換為輪廓」、小數位數 3、最小化勾選 → 適合 Web 直接引用。
2. 光柵格式批量導出
使用美術板工具(Shift+V) 建立對應各變體尺寸的美術板(如 512×512、256×256、128×128、64×64、32×32、16×16) → 檔案→匯出→美術板到檔案 → 格式 PNG-24、勾選透明度、縮放 100% → 一鍵生成全套圖標尺寸。
3. 品牌規範單頁製作
新建 A4 豎向文檔，版面包含：
- 主標識構造圖(網格、比例、安全區)
- 色彩系統(主色/輔助色/中性色：HEX、RGB、CMYK、Pantone)
- 字體規範(標題/正文/字重/字距/行高)
- 變體使用規範(最小尺寸、禁用案例、背景適配)
- 應用展示(名片、信紙、App 圖標、社交媒體封面模擬圖)
導出 PDF(印刷品質)與 PNG(螢幕預覽)雙版本交付。
第六階段：動態化延展(進階)
- 時間軸面板 建立幀動畫：圖形旋轉 360°、漸變色相位位移、文字字距彈性動畫。
- 導出 GIF/APNG/WebP 動態 Logo，用於載入頁、轉場動畫。
- After Effects 連動：匯出分層 PSD → AE 導入合成 → 添加粒子/光效/3D 深度 → 輸出 Lottie JSON 或 MP4，賦予品牌動態生命力。
專家總結：電商 Logo 設計的五大鐵律
- 矢量優先：核心圖形全程矢量，位圖特效僅作為表現層，源檔保留純矢量版本。
- 網格約束：所有元素對齊模組化網格，確保縮放比例協調、間距系統化。
- 可讀性底線：最小尺寸下文字仍可辨識，圖形細節不糊成一團。
- 單色可用：全黑/全白版本視覺識別度不降，適應極端應用場景。
- 交付標準化：統一命名規範、完整尺寸套件、品牌手冊同步輸出，降低後續協作成本。