設計完成、款也付了，結果三年後想改一個電話號碼，才發現手上只有一張 JPG。要嘛重新做一份，要嘛回頭拜託原本的設計師，而對方可能早就換了工作。這個場景在中小企業裡每天都在上演，原因不是誰不專業，而是當初交付平面設計圖的時候，沒有人把「該拿哪些檔案」講清楚。
這篇不談美感，專門談檔案：平面設計圖有哪些常見格式、各自用在什麼地方、向量與點陣到底差在哪、印刷用跟網頁用的規格為什麼不能混用，以及身為業主，你該跟設計師要哪些檔案，才不會把自己綁死在某一個人身上。
平面設計圖不是只有一種檔案
一份設計在完成的當下，通常會同時存在三類檔案，而業主最常只拿到其中一類。
- 原始檔（可編輯檔）：設計師實際工作的檔案，包含所有圖層、文字、路徑與參數，例如 Illustrator 的 .ai、Photoshop 的 .psd、InDesign 的 .indd。有這個檔案才有辦法真正修改內容。
- 交付檔（輸出檔）：為了特定用途輸出的成品檔，例如送印用的 PDF、網頁用的 PNG 或 JPG。這類檔案是攤平過的，多半無法回頭編輯。
- 素材與資產：使用到的字型、購買的圖庫圖片、Logo 的向量檔、產品照原始檔。這些是未來延伸應用的基礎。
很多糾紛就是卡在只交付了第二類。拿到 JPG 當然能用，但那是「結果」不是「來源」，就像收到一份列印好的報告，卻沒有拿到那份可編輯的文件。
向量與點陣：最該先搞懂的差別
這是所有檔案觀念的基礎。搞懂這一點，後面所有格式的用途都會自然清楚。
向量圖是用數學路徑描述的圖形，記錄的是「從這個點到那個點畫一條什麼樣的線」。因此不論放大到名片還是放大到整面招牌，邊緣都一樣銳利，檔案也不會因為放大而變模糊。Logo、字體標準字、圖示、插畫、線條圖形，原則上都應該以向量形式保存。常見的向量格式有 AI、EPS、SVG，以及以向量方式保存的 PDF。
點陣圖是用一格一格的像素拼出來的，記錄的是「每一個點是什麼顏色」。照片本質上就是點陣，無法轉成真正的向量。點陣圖放大到超過原始尺寸就會出現模糊或鋸齒，所以尺寸與解析度在拍攝或製作的當下就要決定好。常見的點陣格式有 PSD、TIFF、PNG、JPG、WebP。
實務上最常見的災難，就是公司的 Logo 只剩下一張從網站上抓下來的 PNG。要做招牌、要印帆布、要做車體貼，全部都會卡住，最後只能請人重新描繪一次。所以不管你的預算多小，Logo 的向量原始檔一定要留在自己手上。
常見格式各自的用途
- AI：Illustrator 的原始檔，向量為主，是 Logo、DM、包裝、名片最常見的工作檔。要修改內容就需要它。
- PSD：Photoshop 的原始檔，點陣為主，保留圖層與遮罩，用於照片合成、修圖、網頁視覺稿。
- INDD：InDesign 的原始檔，專門處理多頁排版，型錄、手冊、書籍會用到。
- PDF：最萬用的交付格式。可以保存向量也可以嵌入點陣，跨系統開啟不跑版，是送印的標準格式，也適合當作給客戶確認的版本。但一般的 PDF 不等於可編輯原始檔。
- SVG：網頁用的向量格式，檔案小、可無限縮放、可以用程式改顏色，非常適合網站上的 Logo 與圖示，對載入速度也友善。
- PNG：點陣格式，支援透明背景，適合線條清楚、色塊分明的圖，例如去背的 Logo 或介面元素。缺點是照片類檔案會偏大。
- JPG：點陣格式，壓縮率高、檔案小，適合照片，但不支援透明背景，而且每次儲存都會再損失一次畫質，不適合當作保存用的母檔。
- EPS 與 TIFF：比較傳統的格式，部分印刷廠與舊系統仍會要求，通常由設計師視需求輸出。
- WebP：網頁用的新式格式，在相近畫質下檔案通常比 JPG 小，有助於頁面速度，但只用於網頁，不用於印刷。
簡單記法：要編輯找原始檔，要送印用 PDF，要放網站用 SVG、WebP、PNG 或 JPG。
印刷用與網頁用的規格差在哪
同一張平面設計圖，拿去印刷跟放到網站上，規格完全不同。混用是新手最常犯的錯。
- 色彩模式：印刷用 CMYK，螢幕用 RGB。兩者色域不同，RGB 能表現的鮮豔藍綠與螢光色，印刷是印不出來的，直接把 RGB 檔送印，顏色一定會跑掉。反過來把 CMYK 檔直接放上網站，顏色則會顯得灰暗。
- 解析度：印刷用的圖片一般要求 300dpi，大圖輸出因為觀看距離較遠可以降低；網頁用 72dpi 即可，真正重要的是像素尺寸而不是 dpi 這個數字。把 72dpi 的網路圖拿去印，一定會糊。
- 出血與安全範圍：印刷品需要出血，通常是 3 公釐，讓底色延伸超出裁切線，避免裁切誤差造成白邊；重要文字則要距離裁切線留安全距離。網頁沒有出血的概念，取而代之的是不同螢幕寬度的適應問題。
- 字型處理：送印前通常要把文字轉外框或嵌入字型，否則換一台電腦開檔就會跑版；網頁則相反，文字要保持為可選取的真實文字，不要做成圖片，否則搜尋引擎讀不到，對 SEO 沒有幫助。
- 檔案大小：印刷檔可以很大沒關係；網頁圖片則要壓縮，過大的圖會拖慢載入速度，直接影響使用者體驗與搜尋表現。
這也是為什麼「把 DM 的檔案直接放到官網當成一張圖」是個壞主意：不只重、顏色不對，裡面的文字搜尋引擎完全讀不到，等於白做一頁。
業主該跟設計師要哪些檔案
專案結束時，建議至少取得以下這幾類，並在報價階段就寫明。
- 可編輯原始檔：.ai、.psd 或 .indd，依專案性質而定。這是未來能不能自己修改或換人接手的關鍵。
- 送印用 PDF：含出血與裁切標記的完稿版本，未來要加印可以直接給印刷廠。
- Logo 的完整版本：向量原始檔，加上橫式、直式、單色、反白、去背等變化版本，並同時提供印刷用與網頁用兩種色彩模式。
- 網頁用輸出檔：SVG 或不同尺寸的 PNG、JPG，方便直接放上網站與社群。
- 使用到的素材清單：字型名稱與授權來源、圖庫圖片的授權範圍、產品照的原始檔。
- 基本規範：色票的色號、指定字體、Logo 的最小尺寸與留白規則。就算只有一頁也很有價值。
拿到檔案之後，記得自己保管一份。放在雲端硬碟並建立清楚的資料夾與命名規則，例如「年份＿專案名稱＿版本」，不要讓唯一的檔案只存在某位員工的電腦或某個即時通訊的對話紀錄裡，那些對話紀錄的檔案是會過期的。
常見問題
設計師只給我 JPG，這樣正常嗎？
如果事前沒有約定，這確實是常見作法，因為原始檔對設計師而言是工作資產。但對業主來說，只有 JPG 代表未來任何修改都得回頭找同一個人。合理的處理方式是在報價階段就談好原始檔是否交付、是否另計費用，而不是在專案結束後才提出要求。
PNG 跟 JPG 到底該用哪一個？
簡單判斷：需要透明背景，或圖面是線條、色塊、文字為主，用 PNG；一般照片則用 JPG，檔案會小很多。如果網站的技術條件允許，照片改用 WebP 通常可以在畫質接近的情況下再縮小檔案，對頁面速度有幫助。
可以把 JPG 轉成向量檔嗎？
軟體確實有自動描圖功能，但那是「重新畫一次」的近似結果，細節、圓角與文字邊緣通常會失真，複雜的圖更明顯。它可以救急，不能取代真正的原始檔。這也是為什麼 Logo 的向量檔要當成公司資產保管。
平面設計圖可以直接拿來當網站的圖片用嗎？
可以，但要先重新輸出。印刷檔的色彩模式、解析度與檔案大小都不適合網頁，必須轉成 RGB 並適度壓縮。另外要提醒的是，不要把整段文字做成圖片放上網站，那些文字搜尋引擎讀不到，內容再好也無法被檢索。
把平面設計圖的格式與交付規則弄清楚，其實花不了多少時間，卻能讓這份設計在未來好幾年都還能繼續被使用、被修改。如果你正在整理公司過去累積的設計檔案，或是打算把既有的視覺素材重新用在官網上，歡迎跟我們聊聊，我們可以協助盤點手上的檔案還缺什麼，以及哪些需要重新輸出才適合放到網站。