萬盛學電腦網

瀏覽器 Windows 10 WPS Office 防毒軟體 資料庫 Excel 教學 檔案管理 Word 教學 網頁製作 裝機必備軟體 Linux 教學

您现在的位置： 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> Photoshop 教學 >> Photoshop 入門教學

PS 設計聖誕節電子郵件模板：從佈局到響應式編碼的完整流程

專案目標

設計一款乾淨、節日氛圍濃厚、符合 EDM 規範的聖誕節電子郵件模板，寬度 620px 安全區，支援主流郵件客戶端（Outlook/Gmail/Apple Mail/手機端）。

第一階段：文件建立與參考線系統

  1. Ctrl+N 新建：寬 700 px、高 2000+ px（依內容延伸）、解析度 72 dpi、RGB、背景透明。
  2. 「視圖 > 新建參考線版面」或手動拖曳垂直參考線：
    40 px、80 px（左內邊距）、340 px（中軸）、600 px、640 px（右內邊距）。
    確保所有內容限制在 620 px (80–600) 安全區內。
  3. 圖層面板建立群組：「Header」「Message」「Best」「Quote」「Footer」，養成分組習慣便於後續切圖與標註。

第二階段：背景與安全區容器

  1. 背景層填充淺灰藍 #f6f9fb（Alt+Backspace），非圖片背景，避免郵件客戶端預設阻擋圖片導致空白。
  2. 矩形工具 (U) 繪製 600 px 寬白色矩形 (#FFFFFF) 置中，作為郵件主體安全區容器。

第三階段：Header 區塊（決定打開率的關鍵）

  1. 品牌標識：文字而非 Logo 圖片（避免圖片被阻擋不可見）。字體：Open Sans Bold、18 px、#434343，左上角留白 20 px。
  2. 瀏覽器備用鏈接：右上角文字「在瀏覽器中查看」，Open Sans Semibold、13 px、#666666，提供無圖片環境下的閱讀入口。
  3. Hero 圖區：600×300 px 矩形佔位 → 上方疊加紅→綠徑向漸變圖層 (模式「正常」) → 再疊加聖誕燈串照片 (模式「疊加」) → 裁切蒙版限制於矩形範圍內。
  4. 主標語：Playfair Display Bold Italic、52 px、白色 #FFFFFF，置中於 Hero 區，文案簡潔有力「Merry Christmas & Happy Holidays」。

第四階段：Message 內容區塊（可複用模組化設計）

  1. 標題：Open Sans Bold、32 px、#333333，頂部留白 40 px。
  2. 正文：Open Sans Regular、18 px、#666666、行高 1.6、段落間距 20 px，控制字數 80–120 字。
  3. CTA 按鈕：矩形 240×40 px、圓角 4 px、填充 #de1816 (聖誕紅) → 文字：Open Sans Bold、14 px、白色、垂直置中。
  4. 分隔線：直線工具 (U 按 Shift) 1 px、#eeeeee，模組間距 30 px。

第五階段：Best 精選文章區（動態內容區塊）

  1. 復用 Message 標題樣式，置於分隔線下方。
  2. 文章卡片：140×140 px 正方形圖片佔位 (矩形工具 + 裁切蒙版) → 標題 16 px Bold、副標 13 px Regular、間距 8 px。
  3. 整組命名「Article」，複製 3–4 份橫向排列，間距 20 px，超出 600 px 由開發端實現輪播/換行。

第六階段：Quote 引言區與 Footer

  • 引言：斜體字體、24 px、#888888、置中、左右留白 60 px、上下留白 40 px。
  • Footer：社群圖標、退訂鏈接、公司地址、版權聲明，字號 11 px、#999999。

切圖與標註交付規範（給前端）