CH 2.4 訊息貼圖（含可換字疊圖）｜AI 自製 LINE 貼圖：從 0 到上架的 12 小時養成

(01)

今天你做的不是「一張畫」，而是一個版型

為什麼這很重要

訊息貼圖跟主貼圖（370×320）最根本的差異不是尺寸——是「圖固定、字動態」這個核心機制。你設計的是一個讓 LINE 疊字用的版型，不是一張完成品。這個觀念如果沒建立，後面每個步驟都會踩錯方向。

橘貓上班族的靜態 8 張送審了，PRAC1 結束了。今天進階班下半場第一堂，是 LINE 三類貼圖裡最有趣、也最容易被忽略的一種——訊息貼圖。

先講清楚兩個跟主貼圖完全不一樣的特色，再開始：

特色 01

尺寸不同

訊息貼圖是 270×270 px PNG（正方形），不是 370×320。第一次做的人很容易拿著上次的橘貓直接丟上來，結果格式被擋下來。這是本單元的第一個死角。

特色 02

可換字

每張訊息貼圖會在固定位置疊上對方的名字。「OOO 早安！」這張，朋友 A 收到看到的是「小美早安！」、朋友 B 收到看到的是「小華早安！」——OOO 那塊是 LINE 自動代入收件人名的。

這兩個特色合起來的意思是：你今天設計的不是「一張畫」，而是一個「版型」。版型上「圖」是固定的、「字」是可換的、「位置 / 字型 / 顏色」是你決定的。

今天 55 分鐘的契約：你要產出 3 種版型的訊息貼圖（早安 / 偷懶 / 加油），通過「上傳前自查清單」，並用「模擬退件案例」幫自己驗收。實際送審 1-7 天回覆，那是課後的事；課堂內你要學會的是「送審前我自己先當審核員」。

(02)

KEY CONCEPTS — 訊息貼圖的 6 個關鍵概念

6 分鐘把這些概念確認清楚，之後的操作示範和動手練習才不會卡在名詞上。

概念 01

訊息貼圖（Message Sticker）

LINE 三類貼圖（靜態 / 動態 / 訊息）裡的第三類。用戶傳訊時選用，會把對方在 LINE 的顯示名字疊到貼圖預設的「OOO」位置。視覺上是「圖 + 可變文字」的版型，不是單純一張圖。

概念 02

訊息貼圖規格

270×270 px PNG（正方形，與主貼圖 370×320 不同），檔案 ≤ 1MB、透明背景、8 / 16 / 24 張選一。本課示範以「8 張版本」為主，跟 Part 1 對齊。

概念 03

可換字疊圖（Custom Text）

訊息貼圖的核心機制：你預先在版型上留文字位置（一個矩形區），LINE 會在傳送時把對方暱稱代入這個位置。字型、顏色、大小都由你在 Creators Market 後台設定，不由 LINE 自動配。

概念 04

文字疊圖三大設計重點

好不好看、能不能過審，靠這三點：(1) 文字位置（避開角色五官 + 放在留白區）、(2) 字型選擇（LINE 預設字型 vs 自訂上傳）、(3) 顏色對比（AAA 對比 7:1 以上為佳）。

概念 05

最常見退件兩條

R1-R5 五大原因都適用，但訊息貼圖最常踩：R1 文字模糊（字太小 / 對比不夠 / 字型太細）和 R3 邊緣殘影（去背沒做乾淨，疊上字後白邊更顯眼）。

概念 06

模擬退件案例

LINE 真實審核要 1-7 天，課堂無法等到結果。所以本單元用「講師預先做好的失敗範本」當驗收基準——學員把自己版型跟失敗範本對照，等於提前自我退件 + 修補一輪。

R2 / R4 / R5 在訊息貼圖的特別注意：R2 角色不一致（8 張並排看是否同一隻橘貓）、R4 含他人 IP（文字示範用了「麥當勞」「iPhone」等品牌名當可換字範例）、R5 含真實人物（送審時附的範例文字若打了真實本名 + 配真人風角色）。範例文字一律用「小明 / 同事 / 老闆」這種通用代稱。

(03)

STEP BY STEP — 操作示範 25 分鐘 · 3 步流程

先看講師走完，再自己跑一輪。Demo 配合「3 種版型範例」+「文字位置範本」+「模擬退件案例」三組試跑包資產。

1

8 min · 規格 + 3 種版型

訊息貼圖規格 + 3 種版型介紹

訊息貼圖跟主貼圖最大差異是「正方形 270×270」+「文字位置預留」。版型設計從第一筆開始就要不一樣。

規格速查（鎖死，不要記錯）

項目	訊息貼圖	對比：主貼圖
尺寸	270×270 px	370×320 px
形狀	正方形	長方形
檔案	≤ 1MB	≤ 1MB
背景	透明 PNG	透明 PNG
張數	8 / 16 / 24	8 / 16 / 24 / 32 / 40

我準備了 3 種橘貓上班族訊息貼圖版型示範，覆蓋最常見的三種疊字情境。位置決定氣氛：上方=正式、下方=吐槽、右側=陪伴。

版型 A｜OOO 早安

文字位置：上方 1/3，水平置中

構圖：橘貓在下半部（揮手笑臉），上半部留 30% 純色米色區

字型：圓體粗黑（LINE 預設）

顏色：深咖啡 #5C3317 配米白 #FFF8E7

使用情境：早上第一次傳訊時，「小美早安！」「老闆早安！」

版型 B｜OOO 在偷懶

文字位置：下方 1/3，水平置中

構圖：橘貓在上半部偏左（白眼無語），下半部全留給文字

字型：手寫粗體（吐槽親切感）

顏色：黑色字配螢光黃底色塊

使用情境：辦公室吐槽，「老王在偷懶」「阿明在偷懶」

版型 C｜OOO 加油

文字位置：右側中央，垂直置中

構圖：橘貓在左下（舉拳加油），右側 60% 留給文字

字型：穩重粗體（「我認真在挺你」感）

顏色：深藍 #1E4A6B + 橘色 #b5703a 雙色

使用情境：朋友考試、面試前，「小華加油！」

2

12 min · 本單元核心

文字疊圖三大設計重點實戰

這 12 分鐘是 CH2-4 的精華。帶著 3 種版型把「文字位置 / 字型 / 顏色」三件事做到位。

(A) 文字位置：避開五官、放在留白區（4 min）

最常踩的雷是「字壓在角色臉上」。黃金法則 3 條：

避開五官：眼睛、鼻子、嘴巴核心區一律不能被文字壓到——先用矩形把五官圈起來當禁區。
放在純色 / 漸層留白區：避開有圖案、有細節的區域（橘貓的毛紋、衣服花紋）。
與角色保持 ≥ 20px 距離：文字邊緣跟角色邊緣不要貼太近，預留安全距離。

Photopea 操作：開新檔 270×270 → 拉輔助線把畫面分成 9 格（井字構圖）→ 把橘貓 PNG 拖進去先放好角色位置 → 用矩形工具框出文字疊圖區。這個矩形之後到 Creators Market 後台會用「Text Area」設定對應，輔助線只是設計輔助、不要輸出到 PNG 裡。

(B) 字型選擇：LINE 預設字型 vs 燒字進圖（4 min）

訊息貼圖的文字有兩條路，但只有一條對的：

Path 1
LINE 預設字型

推薦給入門學員。Creators Market 後台提供約 8-10 款預設字型（中英日各幾種）。免費、字型授權無風險。版型 A 用「圓體粗黑」、版型 B 用「手寫粗體」、版型 C 用「標楷粗體」。

Path 2
燒字進圖

本課明確不推。在 Photopea 把文字打上去連同橘貓一起匯出 PNG，「OOO 那塊就不能換字了」——等於做出一張「假訊息貼圖」。想用特殊字型改回去做主貼圖系列就好，訊息貼圖的價值就是可換字。

口訣：寧可字型普通一點，換字功能保留。這是訊息貼圖跟主貼圖的核心差異。

(C) 顏色對比：淺字配深底 / 深字配淺底（4 min）

訊息貼圖第二大退件原因是「字看不清楚」。原因都是顏色對比沒做夠。

底色	文字色	對比結果	是否安全
米白 #FFF8E7	深咖啡 #5C3317	高	安全
深咖啡 #5C3317	米白 #FFF8E7	高	安全
米白 #FFF8E7	黃色 #FFD700	低（同色系）	退件 R1
漸層紫粉	白色	中（漸層底會吃字）	加描邊才安全
純黑 #000000	螢光黃 #FFFF00	極高	安全（吐槽型常用）

用 contrast-ratio.com 檢查，比例 ≥ 7:1 才算 AAA、≥ 4.5:1 為 AA。建議至少 AA 以上。
底是漸層時，文字要加 2-3px 黑色描邊或淡淡陰影。
縮成 120×120 px 預覽（手機聊天室實際大小），看不清就回去加大字級或換顏色。

3

5 min · 模擬退件驗收

模擬退件案例驗收

用講師預先做好的「失敗範本」當驗收標準，學員把自己 3 種版型的設計跟失敗範本對照，自己當審核員幫自己挑毛病。

版型	正解版	失敗版問題	退件原因
案例 1 版型 A 早安	OOO 佔畫面寬 60% 深咖啡字配米白底	OOO 只佔 25%（太小）淺米色字 #E8D8B5 對比 <1.5:1	R1文字模糊、對比不足
案例 2 版型 B 偷懶	邊緣乾淨文字在下方 1/3 純色區	橘貓邊緣白光暈「在偷懶」壓在貓臉上擋眼睛	R3邊緣殘影 + R1文字遮擋
案例 3 版型 C 加油	270×270 px PNG 600KB	370×320 px（誤用主貼圖規格） 2.3MB（PNG 沒壓縮）	規格尺寸錯誤 + 超過 1MB

驗收流程：把自己做的 3 種版型擺出來 → 對照三組正解 vs 失敗範本逐項勾選 → 如果犯了當下修補 → 修完再對照一輪 → 不對自己滿意之前不放行。

(04)

HANDS-ON — 動手 15 分鐘 · 3 種版型實作

在這 15 分鐘內，依 Step 1-2 做出 3 種版型的訊息貼圖（OOO 早安 / OOO 在偷懶 / OOO 加油），每張通過「上傳前自查清單」8 條 + 用「模擬退件案例」對照自查。

我的版型文字組合示範

填入你想用的角色身分和訊息，一鍵看看可換字貼圖的效果示範。

我要用的收件人稱呼例：老爸 / 老婆 / 老王 / 室友

選擇版型

進度檢核點（每 5 分鐘自檢一次）：

時間	應該完成
5 min	版型 A（早安）：構圖 + 文字位置 + 顏色定案
10 min	版型 B（偷懶）：構圖 + 文字位置 + 顏色定案
15 min	版型 C（加油）：定案 + 三組都對照模擬退件案例自查完

落後怎麼辦：落後 5 分鐘以上 → 講師走場輔助；落後 10 分鐘以上 → 至少把版型 A 做到完整，B/C 留作課後練習。

進階加分題（提早做完者）：把 3 種版型的「文字位置區」用 Photopea 紅色虛線框標出來，存成「版型參考圖」（不是上架版本，是給自己未來做更多訊息貼圖的設計藍圖）。回家套在第 4-8 張訊息貼圖上，省下重新思考構圖的時間。

(05)

VERIFY — 學會了嗎？4 個當堂驗收點

學員當堂能做到以下 4 件事，就算 CH2-4 學會了。

驗收基準

能說出訊息貼圖規格：270×270 px PNG、≤1MB、透明背景、8/16/24 張選一

能說出文字疊圖三大設計重點：位置（避開五官 + 留白區 + ≥20px 距離）、字型（LINE 預設優先 + 不燒字進圖）、顏色（AA 對比 + 縮 120×120 測試）

能對照模擬退件案例自我驗收：看 3 組失敗範本，30 秒內標出每張對應 R1-R5 哪一條

手上有 3 種版型的 270×270 PNG（早安 / 偷懶 / 加油各 1 張），皆通過上傳前自查清單

當堂無法驗證的事（屬於課後或下一單元）：實際送 LINE 審核並過審（1-7 天）、8 張訊息貼圖完整套組（本單元只做 3 種版型範例）、訊息貼圖在 LINE 聊天室實際使用體驗。

(06)

TRIAL PACK — 試跑包需求清單

以下資產由 lesson-writer / 課程資產組在後製階段補上。學員在課堂中使用，課後可帶回參考。

資產 A · P0

3 種版型範例 PNG

每張 270×270 px 透明背景 PNG，橘貓上班族主角，各附「文字疊圖區」紅色虛線框示意圖（教學版）。附正解 PSD 原檔 + PNG 輸出各一份。

資產 B

文字位置範本

PSD 模板 270×270 px，三個圖層分組（角色 / 文字位置 / 背景），用紅色虛線框標出 3 種版型的文字疊圖區。檔名：message-sticker-template-3versions.psd

資產 C · P0

模擬退件案例

三組「正解 vs 失敗」對照範本，橘貓主角，刻意做爛。各附失敗版 PNG + 退件理由說明卡（A4 紅字醒目）+ 修補步驟對照。

資產 D

規格速查卡

訊息貼圖 vs 主貼圖 vs 動態貼圖三類規格對比表，A4 列印 / 螢幕一覽兩用。學員寫完整 8 張時隨時對照。

資產 E

上傳前自查清單

每張訊息貼圖 8 條檢查項，3 張共 24 條打勾位。學員當堂跑完後留底，未來真的送審時也能拿來自查。

資產 F

卡關備案

「可以把名字燒進圖省事嗎」「字型會撞別家嗎」「訊息貼圖也要送審嗎」「做完 3 張剩 5 張怎麼辦」「為什麼不能課堂送審」「Photopea 開不了 PSD」等 6 條標準回答。

(07)

PITFALLS — 常見錯誤 3 條

常見錯誤 01

把文字直接燒進 PNG 裡 → 失去「可換字」核心、做出假訊息貼圖

錯誤現象

學員為了用花俏字型，把「OOO 早安」幾個字當圖層直接打進 Photopea，跟橘貓一起匯出 PNG。上傳到 LINE 訊息貼圖後台後，OOO 那塊變成「OOO」三個字面字，朋友傳出去顯示的還是「OOO 早安」，沒有自動代入名字。

根本原因

學員不理解可換字機制是 LINE 後台在傳訊時動態疊上去的。你的 PNG 裡如果已經把字燒進去了，LINE 沒有 Text Area 可以動態替換，自然就變成靜態文字。

解法

訊息貼圖的 PNG 只放角色 + 背景，不要放文字。文字部分用 Creators Market 後台的「Text Area（文字疊圖區）」設定。想要花俏字型 → 改去做主貼圖系列。

常見錯誤 02

文字壓在角色五官上 → R1 + R3 雙重退件

錯誤現象

設計版型 B（偷懶）時，想把橘貓放大讓表情更有戲，結果橘貓佔了 80% 畫面，文字「OOO 在偷懶」只能擠在橘貓臉上、壓住眼睛和鼻子。R1 低品質（文字遮擋表情）+ R3 視覺擁擠雙重問題。

根本原因

學員的本能是「主角越大越好」，但訊息貼圖的核心是「圖 + 字共存」。學員把角色位置當第一個決策，應該反過來——先決定文字放哪，再決定角色放哪。

解法

構圖第一步先框出文字疊圖區（Photopea 矩形工具拉一個矩形），這個矩形決定了角色不能進的禁區。然後再把角色 PNG 拖進去、避開文字區擺放。口訣：先文字、後角色，文字位置決定構圖。

常見錯誤 03

文字顏色與底色對比不足 → 縮到 120×120 預覽時看不清

錯誤現象

設計版型 A（早安）時，選了「淺米黃 #FFD7A0 字 + 米白 #FFF8E7 底」這種同色系搭配。Photopea 全螢幕看還算可讀，但縮成 120×120 後，文字幾乎跟底色融在一起、像沒寫字。退件 R1 文字模糊。

根本原因

學員以「設計圖大小看起來 OK」當判準，沒考慮手機聊天室實際呈現大小。LINE 審核員在手機端看，貼圖在聊天室是縮放顯示，同色系在縮小後就崩。

解法

每張設計完成後強制縮成 120×120 預覽，自問「我用手機聊天時看得清這幾個字嗎」。看不清就 (a) 改用對比更強的顏色 (b) 加 2-3px 黑色描邊或淡淡陰影 (c) 放大字級。用 contrast-ratio.com 確認色號對比 ≥ 4.5:1（AA 等級）才放行。

(08)

QUIZ — 檢核題 2 條

Q1（概念驗證）｜訊息貼圖的「可換字」機制是怎麼運作的？

A. 我在 PNG 裡把「OOO」三個字打上去，LINE 會自動把它替換成名字

B. PNG 裡只放角色和背景、不放文字；文字位置由 Creators Market 後台的「Text Area」設定，傳訊時 LINE 動態把對方名字疊到那個位置 ← 正確答案

C. 我每個朋友都要做一張不同名字的貼圖（朋友 A 一張「小美早安」、朋友 B 一張「小華早安」）

D. 訊息貼圖跟主貼圖一樣，都是把字燒進圖裡，只是尺寸不同

看解析

B 是正解。訊息貼圖的核心精神是「圖固定、字動態」——你做一張版型，LINE 在傳訊時根據收件人的名字把字疊上去。所以你的 PNG 裡不能放文字（A 錯：「OOO」會變成字面字）；也不需要為每個朋友做一張（C 錯：那是主貼圖的做法）；訊息貼圖不是燒字進圖（D 錯：燒字 = 失去可換字 = 做出假訊息貼圖）。

記住「先文字、後角色」這個原則：文字位置由後台設定、不由 PNG 本身決定，這就是訊息貼圖跟主貼圖的最大差異。

Q2（應用驗證）｜情境題：你在做版型 B（橘貓 OOO 在偷懶），第一版設計：橘貓佔畫面 80%（白眼翻到天上很有戲），文字「OOO 在偷懶」只好擠在橘貓肚子上，因為其他地方都放不下。底色是純白，文字用深灰色。Photopea 全螢幕看覺得有點擠但還能接受。你接下來最該做哪 3 件事？

A. 全螢幕看 OK 就好，反正聊天室裡大家也不會仔細看

B. 橘貓 80% 看起來主角感很強，這版設計很到位，不需要改

C. 承認文字壓到角色是設計失誤 → 重新構圖（先框文字位置在下方 1/3 再放橘貓） → 縮 120×120 預覽驗收 ← 正確做法

D. 壓在貓肚子上沒關係，反正不是壓到臉，繼續用這版送審

看解析

C 是正確做法。三件事依序做：

承認文字壓到角色身上是設計失誤——不是「有點擠但還能接受」，而是對照模擬退件案例 2 就是 R3 視覺擁擠 + R1 文字遮擋的雙重退件原因。
重新構圖：先決定文字位置再放角色——把「OOO 在偷懶」的文字疊圖區用矩形框出來放在畫面下方 1/3、純色區，然後把橘貓縮小到上半部偏左。
縮成 120×120 預覽再驗收——確認手機聊天室實際大小下文字仍可讀；如果還是不清，改顏色（純白底配深灰字 → 改成黃色底色塊配黑字增加對比）。

A 錯：LINE 審核員會看，120×120 預覽是強制檢查項。B 錯：訊息貼圖核心是「圖 + 字共存」，不是「圖最大」。D 錯：R1 退件不只看壓到五官，文字壓到角色任何部位都增加退件機率。

(09)

紙本素材 — 4 張帶走

以下 4 張可單張列印，課堂中放在筆電旁隨時對照。

紙本素材 1 / 4

3 版型速查

3 種版型的構圖邏輯一覽。設計時先決定版型，再決定文字和角色的位置。

版型	文字位置	橘貓構圖	字型建議	顏色建議
A 早安	上方 1/3 水平置中	下半部揮手笑臉佔約 60% 高度	圓體粗黑（LINE 預設）	深咖啡 #5C3317 配米白 #FFF8E7
B 偷懶	下方 1/3 水平置中	上半部偏左無語翻白眼佔約 50%	手寫粗體（LINE 預設）	黑字配螢光黃底色塊
C 加油	右側中央垂直置中	左下舉拳加油佔約 40%	標楷粗體（LINE 預設）	深藍 #1E4A6B + 橘色 #b5703a

記得：位置決定氣氛——上方=正式、下方=吐槽、右側=陪伴。3 種版型不是隨便選，是根據你要傳的情緒選。

紙本素材 2 / 4

文字位置範本（3 版型）

設計時先用這份範本確認你的文字位置。紅色虛線框 = 文字疊圖區（不要放角色進去的禁區）。

版型 A｜早安

OOO 早安！

[橘貓揮手]

上方 1/3 = 文字區（紅框）
下方 2/3 = 橘貓區

版型 B｜偷懶

[橘貓偷懶]

OOO 在偷懶

上方 2/3 = 橘貓區
下方 1/3 = 文字區（紅框）

版型 C｜加油

[橘貓加油]

OOO
加油！

左方 40% = 橘貓區
右方 60% = 文字區（紅框）

紅色虛線框是「Text Area 文字疊圖區」的設計草稿。Photopea 裡用輔助線或矩形工具確認位置，最終輸出的 PNG 不要含文字，只有橘貓 + 背景。

紙本素材 3 / 4

R1-R5 訊息貼圖自查表

上傳前對照 5 大退件原因，把自己的 3 張版型都勾過一輪。

退件原因	在訊息貼圖的常見狀況	頻率	版型 A	版型 B	版型 C
R1文字模糊	字太小 / 對比不足 / 字型太細；縮到 120×120 看不清	最常見	[ ]	[ ]	[ ]
R2角色不一致	8 張並排看，有沒有換成不同隻橘貓	較低頻	[ ]	[ ]	[ ]
R3邊緣殘影	去背沒做乾淨，疊上字後白邊更顯眼	最常見	[ ]	[ ]	[ ]
R4含他人 IP	文字示範用了「麥當勞」「iPhone」等品牌名	較低頻	[ ]	[ ]	[ ]
R5含真實人物	送審範例文字打了真實朋友本名 + 配真人風角色	較低頻	[ ]	[ ]	[ ]

小提醒：R4 / R5 在訊息貼圖比較少見，但送審時附的「範例文字」要用通用代稱（小明 / 同事 / 老闆），不要打真實品牌名或真人本名。

紙本素材 4 / 4

模擬退件 3 範例卡

把自己的 3 種版型跟以下 3 組失敗範本對照。如果犯了同樣的錯，當下修補後再確認一次。

— 模擬退件案例 1 · 版型 A 失敗版 —

正解版（版型 A 早安）

正解 PNG 示意
OOO 佔畫面寬 60%
深咖啡字配米白底
對比 ≥ 7:1

OOO 字級：佔畫面寬 60%
文字色 #5C3317 / 底色 #FFF8E7
120×120 預覽清晰可讀

失敗版 R1文字模糊

失敗 PNG 示意
OOO 只佔畫面寬 25%
淺米色字幾乎融入底色
對比 < 1.5:1

OOO 太小（25%），縮小後看不到
文字色 #E8D8B5 vs 底色 #FFF8E7，幾乎同色
退件理由：R1 文字模糊、對比不足

— 模擬退件案例 2 · 版型 B 失敗版 —

正解版（版型 B 偷懶）

正解 PNG 示意
橘貓邊緣乾淨
文字在下方 1/3 純色區

去背乾淨，邊緣無白光暈
文字完全落在純色區不壓角色
OOO 和「在偷懶」分行清楚

失敗版 R3R1

失敗 PNG 示意
橘貓邊緣有白光暈
「在偷懶」壓在貓臉上

橘貓耳朵尖有殘留底色白光暈
文字壓在橘貓臉上擋到眼睛
退件理由：R3 邊緣殘影 + R1 文字遮擋表情

— 模擬退件案例 3 · 版型 C 失敗版 —

正解版（版型 C 加油）

正解 PNG 示意
270×270 px
600KB

尺寸：270×270 px（正方形）
檔案大小：600KB（≤ 1MB）
格式：透明背景 PNG

失敗版規格

失敗 PNG 示意
370×320 px（主貼圖規格）
2.3MB

尺寸誤用主貼圖規格 370×320
檔案大小 2.3MB（超過 1MB 上限）
退件理由：規格不符，尺寸錯誤 + 超過 1MB